Hi Geeks! Neste post, vamos trabalhar um pouco com CSS, na verdade para as funcionalidades que vamos demostrar utilizaremos o CSS3, versão cuja a maioria dos navegadores já se adaptou ou estão se adaptando(IE como sempre). Aqui vamos usar dois arquivos: "layout.css" e o "index.html". O arquivo HTML vai estar assim:
<html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
<div id="principal">
<center><h1>Geeks Field</h1></center>
</div><br><br><br><br><br>
</body>
</html>
Bom, primeiramente dentro da tag <head> nós puxamos a referência do arquivo CSS, assim podendo utilizar suas "IDs", em seguida ao criar uma "div", importamos o código existente dentro do id "principal", e dentro da divisão nós escrevemos Geeks Field, para podermos visualizá-lo na página.
Agora o arquivo CSS:
#principal{
width:785px;
background-color:#ffffff;
height:3000px;
box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
-moz-box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
-webkit-box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
border-radius: 2em
}
Neste arquivo definimos todo o layout da página, neste arquivo temos apenas um id, que é o "principal" que vimos anteriormente, em seu escopo, começamos definindo a largura da "div" de 785 pixels, a cor do fundo, a altura. Em seguida, vem o atributo "box-shadow" que tem mais duas subdivisões, e eles são os responsáveis pela criação da sombra na "div", agora vou explicar detalhadamente como funciona essa ferramenta:
Após a definição do "box-shadow" você deve preencher quatro campos separados por espaço:
Primeiro Campo: Aqui você define qual vai ser o tamanho da sombra em pixels no eixo "X", aqui também se escolhe qual a orientação da sombra, direita ou esquerda, para orientar à esquerda é necessário que se coloque um sinal de menos "-" antes do tamanho da sombra, e à direita basta não colocar o sinal.
Segundo Campo: Aqui você define qual vai ser o tamanho da sombra em pixels no eixo "Y", aqui também se escolhe qual a orientação da sombra, cima ou baixo, para orientar para cima é necessário que se coloque um sinal de menos "-" antes do tamanho da sombra, e para baixo basta não colocar o sinal.
Terceiro Campo: Aqui você apenas define a intensidade da opacidade da sombra, com o sinal de menos a intensidade fica maior, e sem fica menor.
Quarto Campo: Neste campo você define a cor conforme o padrão RGB, onde 0 é o mínimo e 1 é o máximo.
ATENÇÃO: repita os mesmos dados, nas subdivisões do "box-shadow", assim como está no código do arquivo. Pronto você já pode visualizar o efeito de sombra na "div"! =D
Agora vamos arredondar as pontas da "div" com o atributo "border-radius", basta você colocar o tamanho do raio precedido da expressão "em".
Se tudo ocorrer conforme está no arquivo, a página vai ficar assim:
Bom pessoal, assim eu finalizo, se possível eu faço um vídeo desse tutorial no canal Geeks Field
Qualquer dúvida poste nos comentários ou visite a página no Facebook.
Até a próxima!
Nenhum comentário:
Postar um comentário