Como utilizar variáveis no CSS

Postado por: Pedro Rogério em
  • 2 abr
  • 8

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

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

Postado por: Pedro Rogério em
  • 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 mar
  • 10

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:

Vídeo (Objeto multimídia)

Via: CSSBlog ES

Ordem de declaração das propriedades CSS

Postado por: Pedro Rogério em
  • 12 mar
  • 33
Ordem das declarações em CSS

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:

  1. Display & Fluxo
  2. Posicionamento
  3. Dimensões
  4. Margens, Padding, Bordas, Outline
  5. Tipografia
  6. Background
  7. Opacidade, Cursores…

Traduzindo isso para o CSS, as declarações ficariam da seguinte forma:

Continuar lendo »

CSS Animation Pong

Postado por: Pedro Rogério em
  • 10 mar
  • 5

Animações são possíveis utilizar em linguages como o SVG, não existindo de forma nativa no CSS. A proposta de CSS Animation introduzida no Webkit especifica os valores que o CSS terá após um determinado intervalo de tempo.

Através dessa proposta são utilizados os Keyframes, Animations, Animation behavior, Animation events para obter os mais variados tipos de comportamento através de CSS sem a utilização de JavaScript. Mas isso por enquanto é privilégio de browsers que utilizam como motor de renderização o Webkit(Safari, Google Chrome, Midori)

Pong com CSS

CSS Animation Pong

Todos já ouviram falar daquele famoso jogo chamado Pong? Se não fosse por ele os vídeo-games não chegariam ao nível que chegaram hoje. Vamos ver aqui um exemplo de como desenvolver esse jogo utilizando CSS Animation(O Jogo no exemplo é somente uma ilustração, a jogabilidade não existe).

Vamos fazer o uso de 3 animações simples, chamadas left, ball e right, movendo nossas “raquetes” para cima e para baixo e a bola para a direita e para a esquerda. A “raquete” da direita utiliza um Keyframe extra para abrandar um pouco mais o movimento para baixo:

@-webkit-keyframes left {
	from { top: 20px; }
	to { top: 150px; }
}
@-webkit-keyframes ball {
	from { left: 40px; top: 60px; }
	to { left: 340px; top: 150px; }
 }
@-webkit-keyframes right {
	from { bottom: 120px; }
	50% { bottom: 60px; }
	to { bottom: 40px; }
}

O estado :hover é responsável por fazer a chamada das animações:

#court:hover div {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#court:hover #paddle-left { -webkit-animation-name: left;  }
#court:hover #ball { -webkit-animation-name: ball; }
#court:hover #paddle-right { -webkit-animation-name: right; }

Não podemos deixar de mostrar um exemplo, mas atenção que você só irá conseguir ver a animação em browsers que utilizam o motor de renderização WebKit.

Esse post é uma adaptação do original: Broken Links.

Páginas:«12345678910...16»