Iniciando com CSS3
Já faz algum tempo que o CSS3 foi lançando e eu ainda não falei nada sobre ele. Pois bem, vamos dar uma introdução ao CSS3. Antes de mais nada quero deixar bem claro que nem todos os navegadores tem suporte ao CSS3, não preciso nem citar o IE6 né :). Aqui vale apenas citar os que possuem suporte: Firefox 3+, Safari 4+ e Opera 9.5+. Vamos iniciar com a história do CSS:
A História do CSS
O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C. Desde então, apenas esboços foram apresentados como módulos em Junho de 1999 (CSS3).
Com essa pequena introdução, já percebe-se que o CSS3 vem sendo planejado a muito tempo. Chega de “papo furado” e vamos prosseguir.
Novidade do CSS3
Novidades são muitas… o melhor delas é que são úteis :). Veja a lista das principais propriedades que são novidades, com o surgimento do CSS3:
Bordas
- border-color
- border-image
- border-radius
- box-shadow
Fundos
- background-origin
- background-clip
- background-size
- fazer camadas com múltiplas imagens de fundo
Cor
- cores HSL
- cores HSLA
- cores RGBA
- Opacidade
Texto
- text-shadow
- text-overflow
- Ruptura de palavras longas
Interface
- box-sizing
- resize
- outline
- nav-top, nav-right, nav-bottom, nav-left
Seletores
- Seletores por atributos
Modelo de caixa básico
- overflow-x, overflow-y
Outros
- media queries
- criação de múltiplas colunas de texto
- propriedades orientadas a discurso ou leitura automática de páginas web
- Web Fonts
Em futuros posts falarei sobre estas propriedades e também criarei tutoriais de exemplo. Por ordem de importância, vamos falar hoje sobre os seletores do CSS3.
Seletores CSS3
No geral, os seletores do CSS3 são estes (obs. E – letra E – é o seletor. Ex: p[atributo*=”string”]):
- E[atributo*=”string”]
- E[atributo$=”string”]
- E[atributo^=”string”]
- E~F
- :root
- :last-child
- :only-child
- :not ( )
- :empty
- :target
- :enabled
- :disabled
- :checked
Quem conhece bem o jQuery, perceberá que ele tem alguns seletores igualzinho ao CSS3, isto ocorre porque o jQuery utiliza os seletores do CSS3 também.
E[atributo*=”string”]
Funciona da seguinte maneira, imagine que eu tenho uma div alinhada a esquerda:
<div align='left'></div>
Podemos estilizar esta div apenas acessando a sua propriedade, que neste caso é align=”left”. Observe que o valor é exatamente igual – left = left.
div[align*=left] {
}
Semelhantemente os seletores E[atributo$=”string”] e E[atributo^=”string”], funcionam da mesma forma, mas a diferença entre eles é que se tiver o $(cifrão) deverá terminar com o valor especificado e se tiver o ^(acento circunflexo) deverá iniciar com o valor especificado.
E~F
Este seletor faz uma combinação de dois seletores para a estilização. Exemplo, um h1 e p:
<h1></h1> <p></p>
e o CSS:
h1 ~ p {
}
Neste caso o que será estilizado com CSS é o p. O segredo para o domínio desta seleção é a ordem dos elementos, se neste exemplo o h1 fosse depois do p o CSS não resultaria em nada. Observe o que estou dizendo:
<p></p> <h1></h1>
:root
Como o próprio nome diz, ele irá pegar o 1º elemento da página, a tag <html>. Podemos usar um css mais avançado e criar CSSs da seguinte maneira:
:root div{
}
:last-child, :only-child e :not()
Para não cansar a leitura, vamos a uma explicação rápida. :last-child irá pegar somente o último elemento de uma lista por exemplo (<li>):
HTML
<ul>
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
<li>Eu sou o ultimo texto desta lista</li>
</ul>
CSS
li:last-child{
background: #ddd;
display: block;
}
:only-child, como o própio nome já diz, (only = único) irá buscar o elemento que é único, para exemplificar usei mais uma vez uma lista:
HTML
<ul>
<li>Texto 1</li>
<li>Texto 2
<ul>
<li>Só tem um LI</li>
</ul>
</li>
<li>Texto 3</li>
<li>Texto 4</li>
</ul>
CSS
li:only-child {
background: #ddd;
display: block;
}
:not, irá “bloquear” a estilização com CSS ao elemento que tiver uma certa #id ou .classe . Neste exemplo abaixo, “bloquearemos” a classe .vermelho:
HTML
<ul id="dois">
<li>Texto 1</li>
<li class="vermelho">Texto 2</li>
<li>Texto 3</li>
<li>Texto 4</li>
<li>Texto 3</li>
<li>Texto 4</li>
<li class="vermelho">Texto 3</li>
<li>Texto 4</li>
</ul>
CSS
li:not(.vermelho){
background: #ddd;
}
:empty
É útil para indicar div que estão em branco (empty = em branco), ou então escondê-las, como no código abaixo:
div.box:empty {
display: none;
}
:target
Esta eu achei interressante… imagine que você tenha links que puxar o ID (#) de uma parte do site, por exemplo este link https://mateussouzaweb.com/blog/tutoriais/novas-funcoes-do-wordpress-parte1#comments você percebe que no final dele existe #comments e é usando esse atributo que vamos estilizá-lo:
h2:target {
background:#F2EBD6;
}
:enabled, :disabled e :checked
Só se aplica a elementos do HTML que tenham a opção de abrir (enabled), fechar (disabled) ou checar (checkbox), como por exemplo formulários. Podemos estilizar como destaque alguns radios que estão desabilitados.
<input type="text" disabled="true" />
O CSS seria:
input:disabled {
border:1px dotted #999;
background:#F2F2F2;
}
O mesmo se aplica ao enabled, mas temos que somente alterar :disabled por :enabled. Ex:
input:enabled {
border:1px dotted #999;
background: #F2F2F2;
}
E para finalizar, com o atributo :checked podemos colocar os checkbox’s que estão checados mais a frente:
<input type="checkbox" checked="checked" />
CSS:
input:checked {
margin-left: 20px;
}
Depois leia também o post do Smashing Magazine que está mais amplo…
Taming Advanced CSS Selectors
A Séria Completa
Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3
Até a próxima.
10 Comentários
Luan disse:
3 de setembro de 2009 às 16:42
Assunto lindo!
CSS3…agora junto com o html5 vai fazer estragos legais *-*
ArthurBQ disse:
20 de abril de 2010 às 16:56
cara css 3, e html 5 tao mandando o ruim eh a parte dos browser aceitarem
incompatibilidade atrapalha muito, inclusive o IE q nao eh atualizado nem segue padrao algum
se vc tiver alguma apostila ou coisa do tipo sobre css3 e em portugues
posta ai
Rafael Fragoso disse:
20 de abril de 2010 às 16:56
Po cara to atras de umas apostilas de HTML 5 e CSS3 mas não acho em canto nenhum, se voce tiver alguma pode mandar pro meu email ?
ficaria muito agradecido, to começando a entrar no ramo de webmaster e queria matar minhas curiosidades sobre essas novas versões do HTML e CSS valeu !!
Luiz Felipe disse:
11 de junho de 2010 às 15:16
Meus parabéns pelo post e pelo site inteiro, estou aprendendo muito lendo seus artigos.
Gostaria de fazer um pedido… como que eu faço para que haja uma transição ao trocar as imagens de um background… exemplo: O cara ao passar com o mouse em cima de um botão, que é uma imagem, e o botão é substituído por outra imagem… como que eu faço para que vá trocando aos poucos, com transição na troca?
Estou querendo saber para adicionar nos 4 menus do topo dessa página: http://www.thenets.org/home
Abrigado desde já.
Bruce disse:
11 de junho de 2010 às 15:20
cara css 3, e html 5 tao mandando o ruim eh a parte dos browser aceitarem
incompatibilidade atrapalha muito, inclusive o IE q nao eh atualizado nem segue padrao algum
se vc tiver alguma apostila ou coisa do tipo sobre css3 e em portugues
posta ai
Márlon disse:
25 de dezembro de 2010 às 16:42
Poxa, esse tutorial não é para iniciante não. Foi tudo muito direto,Eu fiquei sem entender muita coisa, mesmo lendo e relendo.
Mateus Souza disse:
26 de dezembro de 2010 às 18:34
Bom Márlon, não é mesmo para iniciante… é para quem já sabe CSS e quer dar os primeiros passos com as novidades do CSS, na especificação 3. Se você não sabe CSS1 e nem CSS2 é melhor aprender estes primeiro senão você vai ficar boiando aqui mesmo…
nada disse:
25 de fevereiro de 2011 às 18:42
Velho! Seu blog é legal, o conteúdo é massa… adorei. Só gostaria de fazer uma crítica construtiva. Presta atenção na escrita. Não digo erro de gramática (talvez tenha, sei lá)… to falando de descuidos mesmo. Entre algumas coisas achei um emoticon onde deveria haver “dois pontos” mais “o”. Pode dar problema.. =P
Abraço
Mateus Souza disse:
25 de fevereiro de 2011 às 18:45
Hehe, pode deixar que eu vou tomar mais cuidado com isto :p
agnaldo disse:
19 de setembro de 2014 às 18:14
Excelente artigo, parabéns