CSS no Lanche » CSS

Sorteio – Livro CSS3

Pedro Rogério — Mon, 05 Dec 2011 13:44:21 +0000

O Maujor, no dia 13 de dezembro, irá lançar seu mais novo livro, dessa vez sobre CSS3. Quer conhecer mais sobre o livro, leia a resenha abaixo:

CSS3 ultrapassou o status de proposta de uma tecnologia que prometia revolucionar a forma como estilizamos documentos para a web e deve obrigatoriamente fazer parte do dia a dia dos designers e desenvolvedores web.

Muitas das funcionalidades das CSS3 estão desenvolvidas o bastante para ser empregadas em fase de produção, quer com suporte nativo, quer com uso de prefixos proprietários. Outras tantas estão sendo implementadas em navegadores modernos, possibilitando o seu estudo e o desenvolvimento de suítes para estudos. Saber o que se pode e o que não se pode, o que se deve e o que não se deve usar das CSS3 é um conhecimento indispensável.

Este livro tem os seguintes objetivos:

- Fornecer uma visão detalhada das CSS, possibilitando aos iniciantes conhecer os mecanismos da aplicação de estilos, sua sintaxe, suas propriedades básicas e os esquemas de posicionamento CSS, bem como estudar e exemplificar valores e unidades CSS.
- Apresentar e exemplificar os novos seletores CSS3.
- Demonstrar as propriedades avançadas para aplicação de fundos com uso das funcionalidades para background.
- Estudar as funcionalidades para aplicação de bordas, sombras, cores e opacidade.
- Apresentar e demonstrar os novos contextos para construção de layout com emprego das funcionalidades previstas nos Módulos Multicolunas, Template Layout e Boxes Flexíveis.
- Estudar o modo de servir folhas de estilos para diferentes tipos de mídia com uso das funcionalidades do Módulo Media Queries.
- Aplicar gradientes, transformações 2D e 3D, transições e animações com uso de CSS3.

Maujor aborda as novas funcionalidades das CSS3 de forma clara, em linguagem didática, mostrando vários exemplos práticos no site do livro (http://livrocss3.com.br).

E como os leitores aqui não poderiam ficar de fora, vou sortear um exemplo no blog. E para participar é fácil, não precisar tweetar esse post para 200 pessoas ou algo do tipo, basta deixar um comentário aqui com um e-mail válido, para que eu possa entrar em contato depois, caso você seja o ganhador. O formulário de comentários ficará aberto por 1 semana, ou seja, até o dia 13 de dezembro, quando será a data de lançamento do livro e também o dia do sorteio.

A ferramenta utilizada para o sorteio será o Random.org. Boa sorte a todos os participantes.

Update: O ganhador do livro foi o Cleyton, meus parabéns.

Sorteio – Livro CSS3

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

‘do a barrel roll’ com CSS3

Pedro Rogério — Tue, 08 Nov 2011 13:17:55 +0000

Você já experimentou procurar no Google por do a barrel roll? Ainda não? Então procure e veja o que acontece, mas pelo menos faça isso com um browser descente né, nesse seu Internet Explorer 6 não será possível ver o efeito.

Traduzindo ao pé da letra, ‘do a barrel roll’ é um termo que significa algo como “Dê uma cambalhota”. A expressão é uma manobra aérea que existe desde os primeiros combates entre aviões na Primeira Guerra Mundial, mas o termo só se tornou popular a partir do jogo Star Fox, do Nintendo 64. A manobra era obtida com um clique duplo nos botões “Z” e “R”. Já o Google querendo prestar então uma homenagem, implementou esse efeito em sua busca. Abaixo você pode ver o CSS responsável por fazer isso:

@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes roll { 100% { -o-transform: rotate(360deg); } }
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }

body.barrel-roll {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}

E com um pouco de JavaScript, nós podemos fazer o negócio funcionar facilmente:

if(location.href.match('do-a-barrel-roll')){ //Checa se a URL contém o texto do a barrel roll
    setTimeout("document.getElementsByTagName('body')[0].className='barrel-roll';", 3000);
}

Vi aqui e aqui.

‘do a barrel roll’ com CSS3

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

Fancy Image Carousel

Pedro Rogério — Sat, 22 Oct 2011 15:26:05 +0000

Baseado no PSD que acabei encontrando aqui e no tutorial sobre aplicar estilos em imagens com CSS3 do site Web Designer Wall, criei um carousel para ilustrar um pouco essas técnicas.

Mas atenção, devido a utilização de código de última geração, esse carousel pode não funcionar corretamente em browsers obsoletos como o Internet Explorer.

Fancy Image Carousel

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

Animated Login Form

Pedro Rogério — Mon, 03 Oct 2011 13:16:38 +0000

Quer implementar um formulário de login animado no seu site? Deixo aqui um exemplo que vi no site Forrst. Não preciso nem dizer para testar em browsers modernos né?

Animated Login Form

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

CSS3 Polaroid Gallery

Pedro Rogério — Sat, 03 Sep 2011 23:17:16 +0000

Se você quer uma forma interessante de mostrar seu portfolio, criei esse exemplo de uma galeria com efeito Polaroid usando CSS3, em conjunto com o plugin jQuery Masonry.

As imagens utilizadas nesse experimento foram retiradas do site FFFFOUND!

CSS3 Polaroid Gallery

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

Twitter Bootstrap – CSS Toolkit do Twitter

Pedro Rogério — Sat, 20 Aug 2011 19:21:59 +0000

O Twitter lançou recentemente o seu mais novo projeto chamado Twitter Bootstrap, que se trata de um set de códigos para lhe auxiliar no desenvolvimento de novos aplicativos para a web.

Ele é composto de códigos base para o auxílio na criação de formulários, botões, tabelas, grids, navegação e muitos outros itens. Mas antes de sair por aí usando, você deve saber que esse Bootstrap depende do LESS para funcionar.

Mas de qualquer forma, vale também como forma de estudo de novas técnicas no desenvolvimento front-end. UM outro Bootstrap que também vale a pena conhecer é o Bootstrap.less desenvolvido por Mark Otto.

Twitter Bootstrap – CSS Toolkit do Twitter

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

CSS3 3D Box Shadow

Pedro Rogério — Fri, 19 Aug 2011 15:08:59 +0000

Você quer dar um up na forma que mostra seu portifólio em seu site? Utilize CSS3 para isso. Utilizando box-shadow e as pseudo-classes :after e :before você pode conseguir um efeito tridimensional nas sombras que envolvem as imagens, e o resultado final é bem elegante, como você pode ver nesse exemplo.

CSS3 3D Box Shadow

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

CSS Ribbon Banner

Pedro Rogério — Wed, 17 Aug 2011 13:24:06 +0000

Com alguns truques de CSS pode-se criar várias coisas interessantes, e uma delas que irei mostrar aqui é de como criar um banner apenas com CSS sem a utilização de imagens.

O carro chefe dessa técnica é o border-with, aliado aos pseudo-elementos :after e :before conseguimos criar bordas sem a utilização de elementos extras no HTML. E por falar em HTML, ele é bem simples, só utilizei 2 elementos como pode ver abaixo:

CSS Ribbon Banner

E claro, depois o resto do trabalho fica todo a cargo do CSS:

.banner {
    position:relative;
    background:red;
    width:300px;
    height:50px;
    margin:auto;
    border:1px solid #CC1100;
}

.banner:before {
    content:" ";
    position:absolute;
    display:block;
    width:0px;
    height:0px;
    top:11px;
    left:-51px;
    border-color:red red red transparent;
    border-style:solid;
    border-width:25px;
}

.banner:after {
    content:"";
    position:absolute;
    display:block;
    border-color:#CC1100 #CC1100 red red;
    border-style:solid;
    border-width:5px 10px 5px 10px;
    top:51px;
    left:-1px;
}

h1 {
    text-align:center;
    line-height:50px;
}

h1:before {
    content:" ";
    position:absolute;
    display:block;
    width:0px;
    height:0px;
    top:11px;
    right:-51px;
    border-color:red transparent red red;
    border-style:solid;
    border-width:25px;
}

h1:after {
    content:"";
    position:absolute;
    display:block;
    border-color:#CC1100 red red#CC1100;
    border-style:solid;
    border-width:5px 10px 5px 10px;
    top:51px;
    right:-1px;
}

O resultado final pode ser visto nesse link.

CSS Ribbon Banner

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

Smooth Background Color

Pedro Rogério — Tue, 14 Jun 2011 16:57:31 +0000

Criar animações com CSS3 hoje em dia é extremamente simples, basta um pouco de criatividade e um browser descente. Nesse exemplo, você verá que é extremamente simples criar um efeito de smooth no background da página. O CSS responsável pelo efeito é o seguinte:

@-webkit-keyframes rainbow {
    0% { background-color: #4c88c7; }
    25% { background-color: #f44545; }
    50% { background-color: #c29fd1; }
    75% { background-color: #22b573; }
    100% { background-color: #4c88c7; }
}

body {
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: rainbow;
	-webkit-animation-timing-function: ease;
}

Se você é aficionado por otimização, a declaração na tag body acima, pode ser resumida da seguinte forma:

body {-webkit-animation: rainbow 5s ease infinite normal}

Um exemplo pode ser visto nesse link. Como podem ver, ocorre uma transição da cor do background, se você estiver usando um browser descente, claro (Safari/Chrome).

Smooth Background Color

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

Curso de HTML5 e CSS3 do W3C

Pedro Rogério — Tue, 24 May 2011 12:15:55 +0000

Durante essa semana está acontecendo no W3C Brasil o curso de HTML5 e CSS3, e se você não foi um dos escolhidos para participar do curso, não fique triste, todo o conteúdo que será utilizado está sendo distribuído de forma gratuita na web.

Downloads

Curso de HTML5 e CSS3 do W3C

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