Gradiente estilo Photoshop com CSS puro »

27nov 2010, às 11:07

Publicado em CSS3 HTML / CSS HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

O Ultimate CSS Gradiente Editor criado por Alex Sirota é uma avançada ferramenta online com recursos interessantes para desenvolvedores web. Como muitos aqui já devem saber o HTML5 junto ao CSS3 introduziu recursos interessantes e uma das características é a capacidade de especificar gradientes usando o CSS3 puro, sem ter que criar imagem e repetir no fundo do elemento para criar o efeito de gradiente com leveza.

Importante lembrar que até o momento desta publicação este recurso só está disponível em versões recentes do Firefox, Chrome e Safari. Os gradientes são resultantes de CSS Cross-browser que irão funcionar perfeitamente nestes navegadores, já no Internet Explorer exibira um gradiente simples.

Vale também conferir as documentações de CSS Gradiente: no Firefox, Safari e Chrome (Webkit) e Internet Explorer.

CSS3 no Internet Explorer com CSS 3 PIE »

18out 2010, às 07:00

Publicado em CSS3 HTML / CSS | Deixe o seu comentário (3) »

publicado por: Magno Valdetaro

Enquanto o Internet Explorer 9 não chega e ganha espaço entre o internautas para aliviar um pouco do sofrimento dos desenvolvedores web em relação as vantagens do CSS3, somos obrigados a utilizar algumas alternativas eficientes, mas não ideais como o CSS3 PIE.

CSS3 PIE traz algumas das características mais convenientes e úteis do CSS3 como: bordas arredondadas, sombras suaves, preenchimento gradiente, múltiplas imagens de fundo. No site do desenvolvedor há a informação de que outras funções estão em processo de implementação.

Esses são alguns atrativos da CSS3 que todo designer gosta e por muitas vezes costuma usar, mas acaba se limitando por conta dos processos difíceis e demorados, envolvendo sprites complexos (ou nem tanto assim), marcações não semânticas, código extra, e bibliotecas javascripts, entre outros hacks.

A proposta do CSS3 PIE é eliminar algumas limitações impostas ao desenvolvedor, devido à falta de suporte do Internet Explorer. Por meio do PIE acrescentamos ao Internet Explorer a possibilidade de entender algumas das propriedades da CSS3, Considere o seguinte estilo:

   1: #elemento {background:#EEE; padding:2em; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em;}

Esta linha resulta em uma caixa com cantos arredondado em qualquer um dos navegadores modernos, exceto, o IE 6, 7 e 8. No entanto, adicione a seguinte regra  ao elemento:

   1: #elemento {... behavior: url(PIE.htc)}

E apenas isto! agora temos cantos arrendados no Internet Explorer.

Veja alguns exemplos, leia a documentação e e faça o download do CSS 3 PIE.

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.