anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

As propriedades do CSS3 que você não pode deixar de conhecer

Capa Propriedades do CSS

Você deve ter lido várias vezes aqui no Blog do Webdesign sobre a importância do CSS3, certo? Provavelmente leu os outros posts sobre o assunto, praticou os tutoriais…  mas será que conhece bem as novas propriedades da linguagem responsável pelos estilos das suas páginas web? Afinal, o conhecimento e o uso dessas propriedades é essencial para quem quer criar muito utilizando poucas imagens e mais códigos e melhorar sensivelmente o visual de suas páginas!

O CSS3 chegou causando um alvoroço muito grande no mundo do web design, pois ele vai muito além de alterar cores, fontes e espaçamentos. Com CSS3 é possível criar sites responsivos com a técnica media queries (adaptando os sites para os diversos dispositivos, como já postei aqui), assim como mostrar elementos em três dimensões utilizando 3D Transforms (das quais ainda irei escrever qualquer dia desses). E não para por aqui, há muito mais novidades.

Claro, nem tudo são flores. Lembre-se sempre que os sites ainda podem não aparecer idênticos em todos os navegadores. Os recursos do CSS3 vem sendo incorporado aos poucos nos navegadores mais resistentes a mudanças, mas já houve um grande salto nos últimos meses. Embora uma ou outra funcionalidade do CSS3  ainda não apareçam no Internet Explorer, (sempre ele), aos poucos algumas delas vão dando as caras no navegador da Microsoft. E embora a maioria delas ainda possa requerer um prefixo específico do fornecedor, você ainda assim poderá usá-las livremente em seus projetos.

A propriedade Border-Radius

Facilmente, podemos dizer que a propriedade Border-Radius era a mais popular do CSS3 quando do seu surgimento, uma espécie de carro-chefe das mudanças e novidades do CSS3. Afinal ela criava cantos redondos em objetos com cantos quadrados, uma verdadeira revolução na época (quem é web designer há algum tempo lembra que os cantos redondos eram feitos com imagens!). Embora fosse uma verdadeira sensação à época, inicialmente muitos web designers ficaram aterrorizados com o fato do código só se tornar funcional em alguns navegadores e com a ideia de que um código CSS pudesse ser apresentado de forma diferente de um navegador para outro. A verdade é que hoje muitos “vilões” responsáveis por esse terror já implementaram a sintaxe oficial, como o navegador Safari, a partir de sua versão 5.0 e o internet Explorer, a partir de sua versão 9.0. Portanto, vamos conhecer o código responsável por esse atributo, onde o valor de Radius é o valor da circunferência, aqui representada em 04 pixels:

Propriedade Border Radius

-Webkit- border -radius:  4px ;
-Moz- border -radius:  4px ;  
border -radius:  4px ;

Círculos

Você pode não saber disso, mas também podemos criar círculos com esta propriedade:

Circulo com Border radius

-Moz- border -radius:  50px ;
-Webkit- border -radius:  50px ;
 border -radius:  50px ;

A propriedade Box-Shadow

Em seguida, temos a “quase onipresente” propriedade Box-Shadow , que permite que você aplique uma sombra à caixa, dando imediata profundidade aos seus elementos. Apesar do recursos ser ótimo, use com moderação: cuidado para não tornar tudo muito desagradável ao exagerar nos valores definidos! Originalmente, a propriedade Box-Shadow aceita quatro parâmetros:

  • x-offset (posição do x)
  •  y-offset (posição do Y)
  • blur (desfoque)
  • color of shadow (cor da sombra)
-Webkit-box-shadow:  1px  1px  3px  # 292929 ;
-Moz-box-shadow:  1px  1px  3px  # 292929 ;
box-shadow:  1px  1px  3px  # 292929 ;

Propriedade Box Shadow

O que muitos não percebem é que você pode aplicar mais de uma caixa sombreada de cada vez. Isto pode levar a alguns efeitos muito interessantes. Na imagem seguinte, eu uso uma sombra azul e verde para ampliar cada sombra:

-Webkit-box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ;  
-Moz-box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ;  
box-shadow:  1px  1px  3px  verde , - 1px  - 1px  azul ;

Propriedade Box Shadow 02

Sombras inteligentes

Através da aplicação de sombras para as pseudo-classes :: antes e :: depois , podemos criar algumas perspectivas muito interessantes. Aqui está uma de exemplo para você testar:

sombra inteligente

O HTML:

<div class="box">  
<img src="webdesign.jpg" alt="Tutorial" />  
</div>

O CSS:

.box:antes {  
   content: '';  
   position: absolute;  

   z-index: -1; /* esconde a sombra abaixo da imagem */  

   /* A sombra*/  
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                  

   width: 70%;   
   left: 15%; /* metade dos 30% restantes (veja o width acima) */  

   height: 100px;  
   bottom bottom:  0;  
}

A propriedade Text-Shadow

A propriedade Text-Shadow (Sombra do Texto) é muito semelhante a Box-Shadow , ela deve ser aplicada para texto, e recebe os mesmos quatro parâmetros:

  • x-offset (posição do x)
  • y-offset (posição do Y)
  • blur (desfoque)
  • color of shadow (cor da sombra)

Propriedade textShadow

h1 {  
   text-shadow: 0 1px 0 white;  
   color: #292929;  
}

Contorno de texto

Mais uma vez, a propriedade é muito parecida com a Box-Shadow, nela podemos aplicar várias sombras usando uma vírgula como separador. Por exemplo, digamos que queremos criar um efeito de contorno para o texto. Enquanto webkit oferece um efeito de contorno, podemos incrementar o código para que seja visto da mesma maneira em diferentes navegadores (embora não fique tão bonito) usando o método a seguir :

Propriedade textShadow 2

body { background: white; }  

h1 {  
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;  
   color: white;  
}

A  Propriedade Transition

Talvez a contribuição mais excitante do CSS3 seja a capacidade de aplicar as animações a elementos sem o uso do JavaScript. Para que você possa visualizar o exemplo, vamos imitar um efeito comum, onde uma vez que você passe o mouse sobre um link, o texto irá deslizar para a direita.

O HTML:

< ul >  
   < li >  
      < a  href = "#" >  Passe o mouse sobre mim  </ a >  
   </ li >  
   < li >  
      < a  href = "#" >  Passe o mouse sobre mim   </ a >  
   </ li >  
   < li >  
      < a  href = "#" >  Passe o mouse sobre mim   </ a >  
   </ li >  
   < li >  
      < a  href = "#" >  Passe o mouse sobre mim   </ a >  
   </ li >  
</ ul >

O CSS:

ul a {  
   -webkit-transition: padding .4s;   
   -moz-transition: padding .4s;  
   -o-transition: padding .4s;  
   transition: padding .4s;  
}  

a:hover {   
   padding-left: 6px;    
}

A Transition possui três parâmetros:

  • A propriedade de transição. (Defina este valor para todos , se necessário)
  • A duração
  • O tipo de flexibilização

A razão pela qual não se aplicam diretamente a transição para o estado Hover (sobre) é porque, se o fizéssemos, a animação só teria efeito durante o mouseover, ou seja, a passagem do mouse sobre o objeto. Ao tirar o mouse de cima do link, o elemento deve retornar imediatamente ao seu estado inicial.

Com tantos recursos e funcionalidades surgindo todos os dias, os profissionais tem cada vez mais a necessidade de estudar CSS. Portanto, para aproveitar as novas técnicas de CSS que ainda não são suportadas em todos os browsers – garantindo a ótima experiência para os usuários – é necessário saber os fundamentos dessa linguagem poderosa.  Portanto, bons estudos! Não pare de praticar! Estas são somente algumas dicas para que você possa expandir o seu universo de conhecimentos sobre o assunto.

Futuramente, retornarei ao assunto e mostrarei mais propriedades interessantes. Se você tem dicas sobre posts, quer opinar criticar ou elogiar, não deixe de postar seus comentários no espaço abaixo, eles são importantes para nós. Estamos atentos e dispostos a melhorar cada mais o conteúdo do Blog. Até a próxima postagem!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Logo LESS CSS
A Maravilha do LESS CSS
A um tempo os desenvolvedores front end vêm reclamando que o trabalho está muito repetitivo,
  • Clovis Alberto Block

    Gostei da sua didática e do tutorial de janela modal. Já lhe favoritei para mais consultas e leituras.

    • Ronaldo Nunes

      Obrigado, Clóvis. Seu feedback é muito importante para todos nós. É sempre um prazer saber que o aprendizado que dispomos aqui foi útil. Grande abraço!

  • Décio Araújo

    Muito bem explicado! Parabéns!