CSS3
Este artigo não cita fontes confiáveis. (Abril de 2012) |
CSS3 - Cascading Style Sheets | |
---|---|
![]() | |
Extensão do arquivo | .css |
MIME | texto/css
|
Desenvolvido por | W3C |
Tipo de formato | Folha de estilo |
Variante de | XML |
Página oficial | http://www.w3.org/TR/css3-roadmap/ |
CSS3 é a terceira mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para seu projeto web.Com efeitos de transição, imagem,imagem de fundo/Background e outros, que dão um estilo novo e elegante a seus projetos web.Ou em todos os aspectos de design do layout da página. CSS3 foi criado por maricas que queria ser biolados na escola.
A principal função do CSS3 é abolir as imagens de plano/Background de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
Isso se deve aos novos browsers/Navegadores,que estão chegando, com suporte à essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Safari e Mozilla Firefox. Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários.
Diferenciações
elemento
{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-khtml-border-radius:10px;
}
Como pode-se ver, foram necessárias quatro linhas de código para produzir bordas arredondadas num elemento HTML. Cada prefixo da propriedade border-radius serve para uma plataforma de browsers. A -webkit, para browsers como Chrome e Safari, -moz para o Firefox, -o para Opera e -khtml para Konqueror. Obs.: há browsers que não aceitam todas as propriedades CSS3. Para testar, utilize Teste de Seletores do CSS3.info.
Seletores
Veja uma lista dos principais seletores (propriedades) CSS3 e seus exemplos:
border-radius:[tamanho]; /* bordas arredondadas */
border-radius:5px;
box-shadow:[topo] [esquerda] [borrão] [cor]; /* sombra */
box-shadow:2px 2px 2px #000;
text-shadow:[topo] [esquerda] [borrão] [cor]; /* sombra em letras */
text-shadow:2px 2px 2px #000;
opacity:[valor]; /* transparência */
opacity:0.5;
word-wrap:[definição]; /* quebra de palavra (quando ela ultrapassa o tamanho do elemento) */
word-wrap:break-word;
background-size:[largura] [altura]; /* especifica o tamanho do plano de fundo */
background-size:100px 80px;
Novidades do CSS3
O CSS3 é extremamente capaz de construir animações que impressionam o mais avançado desenvolvedor web, tanto em 2 como em 3 dimensões. Os mais comuns são os efeitos de rotação, movimento e transição.
Existem, na web, empresas fazendo propaganda utilizando a criatividade e o poder dessa nova era de estilos.
Bibliografia
- Mauricio Samy Silva, CCS3 Desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3, ano 2012, Editora Novatec, ISBN 978-85-7522-289-8
Ver também
Ligações externas
- «CSS3 .Info - All you ever needed to know about CSS3» (em inglês)
- «W3C Introduction to CSS3» (em inglês)
- «W3C CSS Validation Service» (em inglês)
- «W3Schools CSS Tutorial» (em inglês)
- «Maujor - tutoriais css»