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:
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.
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:
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.
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.
Podemos estilizar esta div apenas acessando a sua propriedade, que neste caso é align=”left”. Observe que o valor é exatamente igual – left = left.
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:
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:
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>):
: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:
:not, irá “bloquear” a estilização com CSS ao elemento que tiver uma certa #id ou .classe . Neste exemplo abaixo, “bloquearemos” a classe .vermelho:
É útil para indicar div que estão em branco (empty = em branco), ou então escondê-las, como no código abaixo:
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:
E para finalizar, com o atributo :checked podemos colocar os checkbox’s que estão checados mais a frente:
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 !!
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?
Poxa, esse tutorial não é para iniciante não. Foi tudo muito direto,Eu fiquei sem entender muita coisa, mesmo lendo e relendo.
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…
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