Tudo certo pessoal?
Sexta-feira é dia de tutorial e hoje vamos falar um pouco sobre CSS, especificamente CSS3.
Nenhum desenvolvedor web vive sem CSS (Cascading Style Sheets). Mesmo com muitos recursos disponíveis, ainda sentimos falta de algumas propriedades que facilitariam na hora de montar o layout das páginas. Com base nisso, o CSS3, tem algumas novidades bem interessantes.
1. Border-radius (Bordas arredondadas)
A declaração para bordas arredondadas é: border-radius.
Quando aplicamos o border-radius a um elemento devemos definir qual vai ser o raio do arredondamento dos cantos. A propriedade aceita 1 valor (todos os cantos), 2 valores (topo esquerdo/ rodapé direito e rodapé esquerdo/ topo direito) ou 4 valores (cada um dos cantos)
Exemplo:
border-radius:10px;
JS Bin
2. Text-shadow (Sombra nos textos)
É com a propriedade text-shadow que podemos adicionar sombra a um texto utilizando CSS3 Exemplo: text-shadow: #333 3px 4px 5px; No exemplo acima o primeiro valor(#333) representa a cor, o segundo valor (3px) é a distância horizontal da sombra em relação ao elemento, o terceiro valor (4px) é a distância vertical da sombra em relação ao elemento e por fim o valor (5px) é o raio da sombra (efeito blur).
JS Bin
3. Box-shadow (Sombra em ‘caixas’) Para criar uma sombra em um objeto podemos usar a propriedade box-shadow. Assim como o text-shadow o box-shadow é composto dos mesmos 4 atributos. Ex: box-shadow: #333 3px 4px 5px;
JS Bin
E por hoje é só pessoal!
Semana que vem tem mais tutorial, até lá!
