CSS no Lanche - Porque ingerir CSS na hora do lanche não engorda

CSS Logos

Pedro Rogério — Thu, 29 Jul 2010 11:30:40 +0000

Os desenvolvedores estão se superando cada vez mais. Depois de mostrar aqui o logo do Opera, uma gota de chuva com CSS, e o mais interessante de todos, o logo do Internet Explorer totalmente feito com CSS, acabei achando mais alguns muito interessantes:

jQuery Logo

jQuery UI Logo

CSS Olympic Logo

Chase

CBS

BMW

NBC

Univision

Já viram os ícones do iOS feitos com CSS?

CSS Logos

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Overview: CSS3 Media Queries

Pedro Rogério — Thu, 22 Jul 2010 16:13:48 +0000

Hoje em dia os mais diversos dispositivos possuem acesso a Internet, e para atender a todos eles pode ser um pouco complicado, mas não se você utilizar Media Queries.

Se você não tem idéia do que são Media Queries, vamos a uma esplicação rápida: Hoje o HTML4 e CSS2 atualmente suportam folhas de estilo dependentes de mídias personalizadas para diferentes tipos de mídia. Por exemplo, um documento pode utilizar fontes sans-serif quando exibido em uma tela e fontes serif quando impresso. ‘Screen’ e ‘print’ são dois tipos de mídia que foram definidos. Media Queries estendem a funcionalidade desses tipos de mídia, permitindo que seja mais precisa a rotulagem das folhas de estilo.

Uma expressão Media Querie consiste em um tipo de mídia e zero ou mais expressões para limitar o alcance das folhas de estilo. Entre as características multimedia que possam ser utilizadas em consultas são os parâmetros ‘width’, ‘height’ e ‘color’. Ao utilizar as Media Queries, os documentos podem ser adaptados a um conjunto específico de dispositivos, sem alterar o conteúdo propriamente dito.

Se quiser uma visão mais ampla sobre o assunto, dê uma olhada nos slides desenvolvidos por Russ Weakley que ilustram bem o assunto:

View more presentations from Russ Weakley.

Quer ver um exemplo na prática? A Microsoft acabou desenvolvendo um exemplo para testar no IE9, que ainda está em desenvolvimento e vai suportar essa feature. Utilize algum browser descente ao visitar esse link e redimensione o browser para ver o resultado.

Leitura recomendada

Overview: CSS3 Media Queries

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Internet Explorer Pure CSS Logo

Pedro Rogério — Tue, 13 Jul 2010 16:25:29 +0000

O CSS é o novo Photoshop? Pode não ser mais está chegando bem próximo disso com os mais diversos desenhos complexos que os desenvolvedores hoje em dia conseguem fazer.

E dessa vez o desenvolvedor Andreas Jacob desenvolveu uma versão do logotipo do Internet Explorer com puro CSS. Abaixo você vê como é dada a renderização do logo nos browsers.

Internet Explorer Pure CSS Logo

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Experimentos CSS3

Pedro Rogério — Mon, 28 Jun 2010 11:57:09 +0000

Hoje em dia dá para se fazer muita coisa interessante com o uso de puro CSS, basta ter um pouco de criatividade, e lógico, não ter família. Uma pessoa que eu admiro muito e a cada experimeto com CSS3 se supera é Román Cortés. dê só uma olhada nas coisas que ele já fez e com certeza você vai concordar comigo:

Pure CSS 3D Meninas

Pure CSS Coke Can

CSS Paper Bird

Pure CSS3 Page Flip Effect

Pure CSS Skull with Flames

CSS3 Flower

Experimentos CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Galeria de imagens com CSS3

Pedro Rogério — Tue, 06 Apr 2010 14:55:48 +0000

Nesse tutorial vou mostrar como desenvolver uma galeria de imagens com a pseudo-classe :target das CSS3. A Pseudo-classe :target tem como função alterar os estilos do elemento alvo, já fiz outros tutoriais sobre o assunto, portanto, não vou me alongar explicando os benefícios de utilização dessa pseudo-seletor.

Eu não sou o autor original dessa galeria, acabei a encontrando no site VirtuousWeb e acabei efetuando algumas alterações para que a mesma funcionasse no Internet Explorer.

Dando continuidade ao tutorial, o HTML é bem simples e não tem segredo, basta você observar a estrutura abaixo utilizada para o tutorial:

A div com o id “bloc_img” é onde devem ficar as imagens maiores e a div com o id “bloc_bt” é onde ficam os thumbnails das imagens. Se repararem existe uma imagem que é filha direta da div com o id “bloc_img”, ela será utilizada como imagem default da galeria, essa opção foi implementada por mim e não existia na galeria original.

Agora vamos as regras CSS:

#container {
	width:720px;
	margin:50px auto;
}
#galeria {
	background-color:#eee;
	border-bottom:3px solid #aaa;
	padding:10px;
	overflow:hidden;
	width:700px;
}
#bloc_img {
	width:700px;
	height:500px;
	margin-bottom:10px;
}
#bloc_img > img {position:absolute}
#img_1, #img_2, #img_3 {
	width:700px;
	height:500px;
	display:none;
	position:relative;
	z-index:2;
}
#img_1:target, #img_2:target, #img_3:target {display:block}
a.bt_1, a.bt_2, a.bt_3 {
	float:left;
	width:226px;
	height:130px;
	margin-right:11px;
}
a.bt_3 {margin-right:0}

O código acima nada mais faz do que ao usuário clicar nos thumbs das imagens aplicar display:block ao seu alvo. Vejam a demonstração. Se você reparar no código-fonte, verá que existe um JavaScript desenvolvido por Peter Ryan para habilitar o funcionamento da pseudo-classe :target no Internet Explorer.

Você também pode efetuar o download dessa galeria para estudo futuro.

Galeria de imagens com CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Animação de um Carro com CSS3

Pedro Rogério — Mon, 05 Apr 2010 14:28:48 +0000

Com CSS3 será possível criar pequenas animações através de HTML e CSS usando a propriedade transition. Partindo desse princípio, o desenvolvedor Koller Jürgen criou uma simples animação de um carro que “passeia” pela tela quando o usuário coloca o mouse sobre ele. O código é muito simples e bastam apenas 2 imagens para obter o resultado final:

Após basta definir algumas regras no CSS:

/* Velocidade da animacao */
img{
	-webkit-transition: all 3.1s ease-in-out;
	transition: all 3.1s ease-in-out;
}

/* Animacao do Carro */
a:hover img:nth-of-type(1) {
	-webkit-transform: translate(700px,0px) rotate(0deg);
	transform: translate(700px,0px) rotate(0deg);
}

/* Animacao das rodas */
a:hover img {
	-webkit-transform: translate(700px,0px) rotate(1000deg);
	transform: translate(700px,0px) rotate(1000deg);
}

Agora o resultado final. Artigo original: CSS3 Car Animation

Animação de um Carro com CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Raindrop Logo com CSS

Pedro Rogério — Mon, 29 Mar 2010 12:43:21 +0000

Pra quem duvidava do que o CSS era capaz, já mostrei aqui o desenvolvimento do logo do Opera somente com CSS. E dessa vez, o desenvolvedor Sean Martell criou uma gota de chuva com puro CSS. Ou se prefirir, o logo do aplicativo da Mozilla com puro CSS.

Dêem só uma olhada no processo de desenvolvimento na imagem abaixo:

Como podem ver, o HTML é muito simples:

E abaixo, o CSS utilizado:

.logo {
	position: relative;
	width: 256px;
	height: 256px;
	margin: 20px auto;
}

.raindrop0 {
	position: absolute;
	top: 64%;
	left: 0px;
	width: 100%;
	height: 50%;
	-moz-border-radius: 100%;
	background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner, rgba(0,0,0,0) 0%, rgba(0,105,149,0.4) 37%, rgba(80,80,80,0.1) 47%, rgba(80,80,80,0) 58%);
}

.raindrop1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(20% 20%, rgba(255,255,255,1) 22%, rgba(255,255,255,0.2) 30%, rgba(74,193,186,0.5) 45%, rgba(0,168,243,0.7) 65%, rgba(255,255,255,1) 100%);
}

.raindrop2 {
	position: absolute;
	top: 3%;
	left: 3%;
	width: 94%;
	height: 94%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(30% 55%, circle cover, rgba(0,105,149,0) 70%, rgba(0,105,149,0.8) 80%);
}

.raindrop3 {
	position: absolute;
	top: 3%;
	left: 3%;
	width: 94%;
	height: 94%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(50% 10%, ellipse cover, rgba(0,105,149,0) 73%, rgba(0,105,149,0.3) 80%);
}

.raindrop4 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	-moz-box-shadow:inset rgba(124, 197, 238, 1) 0px 0px 48px;
}

.raindrop5 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(30% 30%, ellipse cover, rgba(0,105,149,0) 50%, rgba(255,255,255,0.9) 72%, rgba(255,255,255,0.6) 90%);
}

.raindrop6 {
	position: absolute;
	top: 35%;
	left: 10%;
	width: 80%;
	height: 60%;
	-moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
	background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(145,240,234,0.8) 6%, rgba(145,240,234,0.1) 25%, rgba(145,240,234,0) 30%);
}
.raindrop7 {
	position: absolute;
	top: 45%;
	left: 20%;
	width: 75%;
	height: 55%;
	-moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
	background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(255,255,255,1) 6%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 30%);
}

.raindrop8 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	-moz-box-shadow:inset rgba(191, 235, 255, 0.8) 0px 0px 12px;
}

Vejam agora o resultado final: Raindrop logo com CSS.

Raindrop Logo com CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

CSS Font Cheat Sheet

Pedro Rogério — Thu, 18 Mar 2010 12:23:59 +0000

Muitas pessoas que estão começando agora com CSS não sabem que existe uma forma “curta” de declarar os valores para a propriedade font das CSS, onde muitas vezes acabam escrevendo várias linhas de código que ao meu ver são desnecessárias. Para auxiliar essas pessoas, acabei encontrando um Cheat Sheet que nos auxilia a como escrever declarações curtas na propriedade font das CSS:

Caso eu fosse decalarar essas regras separadamente, a estrutura CSS seria a seguinte:

#foo {
	font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:34px;
	line-height:100px;
	font-family:"Times New Roman", Times, serif;
}

Mas de forma resumida, ela pode ser escrita da seguinte forma:

#foo {
	font: italic small-caps bold 34px/100px "Times New Roman", Times, serif;
}

Você pode efetuar o download desse Cheat Sheet em formato PDF para estudo caso tenha interesse aqui.

CSS Font Cheat Sheet

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Opera logo com CSS3

Pedro Rogério — Fri, 12 Mar 2010 12:10:00 +0000

A cada dia fico mais surpreendido com o que os desenvolvedores andam aprontando com CSS. E dessa vez um desenvolvedor chamado David Dessandro desenvolveu o logo do Opera totalmente com HTML e CSS3. O que fico impressionado é que a marcação HTML é muito simples:

Com isso podemos ver que a cada dia o CSS está mais poderoso:

#opera-logo {
    height: 512px;
    width: 512px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#opera-logo div { position: absolute; }

#opera-logo .outer-edge {
    width: 440px;
    height: 470px;
    background: #800;
    background: -moz-linear-gradient(-90deg, #F88, #800);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
    top: 20px;
    left: 36px;
    border-radius: 220px;
    -moz-border-radius: 220px/235px;
    -webkit-border-radius: 220px 235px;
    border-radius: 220px/235px;
}

#opera-logo .highlight {
    width: 436px;
    height: 466px;
    background: #d40009;
    background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
    top: 22px;
    left: 38px;
    -moz-border-radius: 218px/233px;
    -webkit-border-radius: 218px 233px;
    border-radius: 218px/233px;
}

#opera-logo .fill {
    width: 436px;
    height: 456px;
    background: #E71616;
    background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000) );
    top: 30px;
    left: 38px;
    -moz-border-radius: 218px/228px;
    -webkit-border-radius: 218px 228px;
    border-radius: 218px/228px;
}

#opera-logo .inner-edge {
    width: 198px;
    height: 396px;
    background: #d20000;
    background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
    left: 158px;
    top: 56px;
    -moz-border-radius: 99px/170px;
    -webkit-border-radius: 99px 170px;
    border-radius: 99px/170px;
}

#opera-logo .inside {
    width: 192px;
    height: 390px;
    background: #b80000;
    background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
    left: 161px;
    top: 59px;
    -moz-border-radius: 96px/170px;
    -webkit-border-radius: 96px 170px;
    border-radius: 96px/170px;
}

#opera-logo .counter {
    width: 164px;
    height: 368px;
    background: #FFF;
    left: 174px;
    top: 71px;
    -moz-border-radius: 82px/170px;
    -webkit-border-radius: 82px 170px;
    border-radius: 82px/170px;
}

#opera-logo .light-shadow {
    left: 106px;
    top: 344px;
    height: 50px;
    width: 304px;
    -moz-border-radius: 152px/25px;
    -webkit-border-radius: 152px 25px;
    border-radius: 152px/25px;
    -moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
    -webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
    box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
}

#opera-logo .dark-shadow {
    left: 146px;
    top: 325px;
    height: 70px;
    width: 220px;
    -moz-border-radius: 110px/35px;
    -webkit-border-radius: 110px 35px;
    border-radius: 110px/35px;
    -moz-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
    -webkit-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
    box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
}

Observe o resultado final e aproveite e compare com o logo em formato de imagem.

Opera logo com CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Centralizar imagem na vertical com JavaScript

Pedro Rogério — Mon, 08 Mar 2010 12:29:34 +0000

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

Agora vamos ao JavaScript, também muito simples e o código está comentado facilitando a compreensão:

$(window).load(function(){
	//Pega a altura do seu pai e armazena em uma variável
	var parent_height = $('.centralized').parent().height();

	//Pega a altura da imagem e armazena em uma variável
	var image_height = $('.centralized').height();

	//Calcula a altura do pai menos a altura da imagem e divide por 2
	//É onde obtemos a distancia que a imagem deve ficar do topo e a armazenamos em uma variável
	var top_margin = (parent_height - image_height)/2;

	//Aqui é onde aplicamos a margem do topo a imagem
	$('.centralized').css( 'margin-top' , top_margin);
});

Observem agora o exemplo.

Centralizar imagem na vertical com JavaScript

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?