Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Introdução ao CSS3 – O que é? - Kolaborativa

Introdução ao CSS3 – O que é?

Introdução


Este artigo marca o primeiro de vários, fornecendo uma introdução ao novo padrão CSS3 que é o sucessor do CSS2. Vamos estudar juntos sobre essa novidade no mundo web, melhorando nossos trabalhos. Se necessário o material poderá ser alterado, mas sempre com o propósito de melhorá-lo, tendo em vista a escacêz de materiais organizados já que  o suporte ao CSS3 ainda se encontra em fase inicial. Espera-se também nesse aprendizado que o leitor tenha conhecimentos de CSS e HTML para a adequada compreensão dos textos e códigos.

O que é?


O CSS3, é o novo padrão para folhas de estilo que está sendo definido atualmente pela W3C, e trará novidades com características emocionantes, o que levará a uma maior flexibilidade tornando muito mais fácil recriar efeitos anteriormente complexos.

O CSS3 oferece uma enorme variedade de novas formas de criar um impacto em seus projetos, com algumas mudanças importantes. Este primeiro tutorial vai lhe dar uma introdução básica para as novas possibilidades.

Módulos


O desenvolvimento do CSS3 vai ser divididas em “módulos”, partes menores que incluem:

  • O Modelo de Caixa
  • Módulo de Listas
  • Apresentação de Hyperlink
  • Módulo Speech
  • Backgrounds e Bordas
  • Efeitos de Texto
  • Layout Multi-Colunas

Suporte dos navegadores ao CSS3


Atualmente o suporte é precário para os seletores existentes no CSS3. E é extremamente difícil dar uma data prevista, quando os navegadores web irão adotar todos os novos recursos do CSS3, mas a corrida dos navegadores para se adequarem já começou e versões mais novas do Safari, Firefox e Google Chrome já estão dando suporte para alguns recursos CSS3.

Novas funcionalidades serão implementadas gradualmente, e em diferentes navegadores, sendo assim, usaremos então imagens intuitivas para indicar em qual navegador funciona o quê.
Por exemplo: “efeito tal funciona apenas no navegador Google Chrome:

navegadoresnavegadoresnavegadoresnavegadoresnavegadores
Obs:Para maior segurança, usar as versões mais recentes dos navegadores indicados.

Como ainda está em lançamento, o Css3, temos que usar alguns códigos fixos por causa da compatibilidade. A propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador específico interpretará.

Alguns browsers com seus prefixos:

Firefox : -moz-
Safari: -webkit-
Chrome: -webkit-

Portanto, para que o efeito funcione nos três navegadores, é necessário declará-lo duas vezes: uma para o Firefox, e outra para Safari e Chrome:

OBS1:: Esses prefixos não são “macetes” para fazer os códigos CSS3 funcionarem em todos navegadores, apenas é uma forma de “chamar” a existência o suporte que o navegador já possui. Além disso os estilos sem um prefixo é a proposta da especificação atual da W3C e posteriormente não serão mais necessários.

OBS2: Outra nota importante é sobre os exemplos das propriedades CSS3, tentaremos usar o máximo de exemplos sem a utilização de imagens, por isso, se você não está vendo alguns exemplos corretamente (ou nada), então o navegador que você está usando não dá suporte a técnica particular CSS3.


Novidades do CCS3


Veja a lista das principais propriedades que são novidades:

Bordas

border-radius
border-color
box-shadow
border-image

Texto
text-shadow
word-wrap
@font-face
text-overflow

Background
background-clip
background-origin
background-size

Múltiplos Backgrounds

Cores
cores HSL
cores HSLA
cores RGBA
Opacidade

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

Como irá me afetar o CSS3?


Esperemos que, de uma forma positiva, principalmente, o CSS3 irá ser totalmente compatível, por isso não será necessário alterar os projetos existentes para garantir seu trabalho – navegadores modernos continuarão dando suporte ao CSS2.

O principal impacto será a capacidade de usar novos seletores e propriedades que estão disponíveis. Estes permitirão que você que quer alcançar novos recursos de design (animação ou degradê, por exemplo), e conseguir recursos de design atuais de uma forma muito mais fácil (por exemplo, usando colunas).

Alguns exemplos


Gostaria de deixar amostras do poder que o CSS3 já possuí, mesmo ainda em sua fase inicial, dando a idéia do que ainda pode estar por vir.

Sombra Dinâmica

sombracss3

Relógio em CSS3

relogiocss3

Equivalências entre CSS3 e Jquery

Painel vertical deslizante com CSS3

paineldeslizantecss3

Menu CSS3 com efeito Fade

menucss3

Efeito Transition com CSS3

Caixa Pulsante

pulsantecss3

Botões com CSS3

botoescss3

Botões radioativos com CSS3

botoesradioativoscss3

E mais um site com 50 efeitos criados em CSS3 que valem muito a pena conferir!.

Os futuros artigos desta série irão focar cada um em um módulo diferente da especificação CSS3, e os novos recursos que irão trazer. Até Lá!


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DO SITE HTTP://DESIGNSHACK.CO.UK ESCRITO POR DAVID APPLEYARD.


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 6 comments. Add yours

  1. 18th maio 2010 | Jequinh4 says: Responder
    Opa... finalmente aqui lendo os teus posts! Fiquei admirada com o CSS3, esses exemplos são muito cabulosos! O.o Quero aprender tudinho com seus tutoriais, hein?! xD
  2. 5th julho 2010 | Guilherme Mazetto says: Responder
    Muito boa sua iniciativa amigo de desde já difundir e abrir para discussão esse tema tão recente quanto o css3 e html5, parabéns!
  3. 5th julho 2010 | Dodilei says: Responder
    Guilherme, eu que agradeço teu comentário, issu aqui está sendo feito pra todos mesmo! sinta-se a vontade pra contribuir e participar!
  4. 9th junho 2011 | Jeferson says: Responder
    Estou iniciando meu estudos de CSS3 através do seu site.
  5. 16th maio 2013 | Zen says: Responder
    Muito Bom!!!!

Join the Conversation