CSS » CSS no Lanche - Ingerir CSS na hora do lanche não engorda

CSS Hacks para IE, Firefox, Opera, Safari, Konqueror

Postado por: Pedro Rogério em 5 de abril de 2009

5 abr
22

Podem haver momentos no desenvolvimento web que você necessitará fazer o uso de hacks CSS devido a inconsistência que ocorre entre os browsers, pois existem browsers que insistem ainda em não seguir corretamente os padrões web(leia-se IE). Mas nessas situações vocÊ não será discriminado se fizer o uso de Hacks CSS, para os leigos, uma forma de escrever CSS para que só certos browsers entendam aquela regra definida e os outros a ignorem.

Existem Hacks CSS para todos os browsers, conheça os mais utilizados na lista abaixo:

Internet Explorer 5 e 5.5:

voice-family: "\"}\""; voice-family:inherit;

Para o IE 5 e 5.5 basta adicionar as regras acimas ao seletor desejado.

Internet Explorer 6 e anteriores:

* html {}

Continuar lendo »

Como utilizar variáveis no CSS

Postado por: Pedro Rogério em 2 de abril de 2009

2 abr
7

Enquanto somente o WebKit aceita temporariamente o suporte a variáveis em CSS eu sigo por uma busca incessante atrás de uma forma, e acabei a encontrando com a utilização de jQuery.

cssWithVars leva o conceito de Orientação a objetos ao CSS onde você pode reutilizar código de forma efetiva. A utilização é muito simples, primeiro devemos criar a nossa variável em nosso CSS:

variavel1 {
	float:left;
    font-size:1em;
}

O 2º passo é chamar a variável no lugar da declaração das propriedades dentro de chaves []:

h1 {
	[variavel1]
}

Vejam só nesse exemplo criado o css funcionando através de variáveis. Preste muita atenção que você dever adicionar os seguintes arquivos a sua página para que ela funcione corretamente:

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.utilities.js" type="text/javascript"></script>
<script src="jquery.createCSSwithVars.js" type="text/javascript"></script>
<link rel="stylesheet" href="caminho/do/css.css" type="text/css" media="csswithvars" />

No exemplo foi utilizado a última versão do jQuery, a 1.3.2, plugin jQuery Utilities, o plugin jQuery createCSSwithVars, e o arquivo CSS com o media type csswithvars.

Download

Download

2º Encontro de TI e 14º Encontro de Web Design

Postado por: Pedro Rogério em 19 de março de 2009

19 mar
15

Desde 2001 atraindo designers, programadores, estudantes e profissionais ligados ao segmento de web de todo o Brasil, o Encontro de Web design, evento pioneiro na área de internet, realiza a sua 14ª em nove capitais brasileiras em 2009: Rio de Janeiro, São Paulo, Florianópolis, Curitiba, Porto Alegre, Brasília, Belo Horizonte, Salvador e Recife.

Com a ajuda de colaboradores e profissionais da área, foram escolhidos como temas principais Entretenimento e Redes Sociais. Para levar à você o melhor de cada assunto, as palestras serão realizadas por Julius Wiedman, editor da Tashen, e Gil Giardelli, da Permission.

Este ano a Arteccom traz mais uma novidade: o Encontro de Tecnologia da Informação, que está em sua 2ª edição, vai ser realizado paralelamente ao Encontro de Web design, nas mesmas datas e locais, mas em ambientes separados. Para saber mais sobre o ETI, acesse o site www.encontrodeti.com.br.

Profissionais especialistas em empreendedorismo e na ferramenta livre WordPress, ministrarão as oficinas, que serão oferecidas tanto para o EWD quanto para o ETI.

Outro bom motivo para garantir já o seu ingresso é que você não precisa se preocupar em faltar o trabalho. Todos os eventos serão realizados aos sábados, das 9h às 18h. O que não vai faltar é novidade e informação para quem é apaixonado por design e gosta de estar sempre atualizado e em contato com profissionais de renome.

Inscreva-se agora garanta o seu lugar no evento da cidade mais próxima de você.

Como sou um cara legal, vou estar sorteando aqui no blog um convite para o evento São Paulo, para concorrer basta estar deixando um comentário aqui no blog utilizando um e-mail válido, pois ele será utilizado no Random.org para sorteio. O formulário estará aberto para comentários até o domingo, portanto, seja rápido. Já você que é do Rio de Janeiro, não esqueci de vocês, vou estar sorteando um convite para o evento também, só que no meu outro blog, e o critério de sorteio será o mesmo.

Tutorial: Como utilizar CSS Sprites

Postado por: Pedro Rogério em 18 de março de 2009

18 mar
8

O nome pode sor meio estranho, mas vamos a uma breve explicação do que são CSS Sprites. Você já viu aqueles botões que possuem o estado “on” e “off”? Aquela técnica pode ser desenvolvida através da utilização de CSS Sprites, onde em uma única imagem você pode guardar todos os estados do botão e efetuar o efeito através da troca de posicionamento de background no CSS, ou até mesmo salvar em uma única imagem todas as imagens utilizadas no site, como faz o Google.com e o Youtube.

O site From the Couch disponibiliza um vídeo ensinando a técnica de CSS Sprites, em inglês:

Via: CSSBlog ES

Ordem de declaração das propriedades CSS

Postado por: Pedro Rogério em 12 de março de 2009

12 mar
33

Manter a organização no CSS é fundamental em qualquer projeto, aliás, organização não deve se resumir somente ao CSS. Eu, particularmente em cada projeto declaro as propriedades CSS em ordem alfabética, muitas pessoas me crucificariam por isso, no começo pode parecer estranho, mas depois se torna mecânico e você consegue produzir o CSS normalmente. Mas como eu gosto de colocar aqui também a visão de outros desenvolvedores, vou deixar aqui a dica que encontrei no blog Aloe Studios de como organizar melhor seu CSS.

Todas as declarações devem se resumir na seguinte ordem: