Preciso da foto que foi usada na chamada no arquivo final do curso. A minha dúvida é a seguinte, como eu posso Exportar um CSS de forma a copiar os estilos da página que eu criei no illustrator ? o que eu queria é passar esse layout do illustrator para um html e css.
Solucionado (ver solução)
Solucionado
(ver solução)
12
respostas
respostas
Foto chamada e Exportação
Boa tarde Vinicius
Sobre a foto da Chamada, eu baixei o arquivo da última aula e está lá. Tenta baixar por este link - https://cursos.alura.com.br/course/illustrator-para-web/task/9870
Sobre sua dúvida, no Illustrator tem uma ferramenta chamada CSS Properties (Propriedades do CSS), com ele você consegue gerar CSS como o próprio nome já diz, para ele gerar o CSS você vai ter que nomear as camadas no painel Layers (Camadas), depois que nomear é só selecionar qualquer objeto do seu layout que na ferramenta CSS Properties vai aparecer o estilo.
Caso ainda tenha dúvidas, veja esse link - https://helpx.adobe.com/illustrator/using/css-extraction.html
Mas, por não ser o foco do Illustrator, ele pode acabar gerando códigos a mais, fazendo com que seu arquivo fique com mais linhas de código. O ideal é fazer o código na mão. Aqui na Alura temos ótimos cursos de HTML/CSS.
Espero ter ajudado.
Att,
Fábio Gushiken
Mas nesse caso, tem mecher nos nomes das layers né ? Tipo se eu nomear de Logo por exemplo o Logo da Kunstees ai ele vai gerar um css com a classe .Kunstees ?
Boa tarde Vinicius
Isso mesmo, o nome que você coloca para a Layer automaticamente vira a classe no CSS. Agora no caso do Logo, ele chega a gerar o código CSS, mas como eu disse ele gera códigos desnecessários.
Segue um exemplo do CSS de um logo:
Espero ter ajudado
Att,
Fábio Gushiken
Eu coloquei uma tag assim :
<div class="Logo"></div>com a classe Logo e coloquei esse código no CSS
.Logo
{
background-image : url(Logo.png);
/*To create image referenced in CSS, use \'Export Selected CSS\' command.*/
background-repeat : no-repeat;
}só que na hora que abri no navegador deu errado, queria saber o porque ? Mas eu entendi como pega o código CSS pelo Illustrator
Boa tarde Vinicius
O que pode estar acontecendo é que você não especificou a altura e a largura do seu logo. Você pode fazer exatamente como esta no print (porém usando o tamanho do seu logo).
Outra coisa é verificar se o seu logo esta no mesmo diretório do projeto, se não estiver não vai aparecer.
Espero ter ajudado.
Att,
Fábio Gushiken
Eu tentei fazer as alterações que você me recomendou, mas não funcionou, eu achei estranho que quando você mostrou o exemplo do logo que você colocou, no código css gerado ele passou a largura e a altura, eu fiz aqui mas quando abri no navegador não apareceu.
<div class="Logo"></div>CSS
.Logo {
background-image : url(Logo.png);
/*To create image referenced in CSS, use \'Export Selected CSS\' command.*/
background-repeat : no-repeat;
width: 466px;
height: 145px;
}Eu salvei o arquivo como testelogo.html e coloquei o arquivo CSS na pasta css assim testelogo.css https://drive.google.com/file/d/0B8cs_U57mR4wR0ZIZWhydlF1VFE/view?usp=sharing
Vinicius, pode colar o código completo do seu HTML e CSS para darmos uma olhada? A imagem Logo.png está dentro do diretório /css?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<link rel="stylesheet" href="css/testelogo.css" />
</head>
<body>
<div class="Logo"></div>
</body>
</html>CSS
@charset "utf-8";
/* CSS Document */
.Logo {
background-image : url(img/Logo.png);
/*To create image referenced in CSS, use \'Export Selected CSS\' command.*/
background-repeat : no-repeat;
width: 466px;
height: 145px;
}Bom é isso ai, eu vi que o tamanho da imagem era 466 x 145 ai coloquei o width e height, coloquei o arquivo Logo.png na pasta img, mas não apareceu o Logo quando fui abrir a página no navegador.
solução!
Não será um erro de caminho do Logo.png? Esse diretório /img está dentro do diretório /css? Se não, se estiver na raiz, terá que indicar no css que ele precisa voltar 1 diretório para chegar no /img.
Teste esse caminho:
background-image : url(../img/Logo.png);Deu certo, Valeu, mas não entendi essa questão de voltar um diretório, fico meio confuso quando se trata de usar o ../
Pense na seguinte estrutura de diretórios/arquivos:
/
/index.html
/img
/img/Logo.png
/css
/css/testelogo.css
Se no seu index.html você quiser chamar o Logo.png com uma tag html, você vai ter que indicar o caminho do logo desta forma <img src="img/Logo.png">, pois o index.html está no diretório raiz e o caminho precisa avançar para o subdiretório /img, que é onde está o arquivo da imagem.
Acontece que no seu caso, você está dizendo no arquivo /css/testelogo.css que use a imagem Logo.png como background, e essa imagem está dentro de um diretório /img que está 1 nível abaixo para o /css/testelogo.css. Então, basicamente o que você faz é usar o ../para dizer que volte um diretório e, a partir dali, entre no /img, onde estará seu arquivo Logo.png.
Cada vez que você usa o ../ele volta 1 diretório relativo ao atual.
Espero que tenha esclarecido :)
Consegui entender sim, Obrigado !!