Pinceladas da Web » CSS

CSS Cookbook

Pedro Rogério — Thu, 19 Aug 2010 13:51:59 +0000

Atualizado para Firefox 3, IE 8, e Google Chrome, com a utilização do livro CSS Cookbook você vai aprender a resolver os diversos problemas reais encontrados no dia-a-dia no desenvolvimento web. Este livro de receitas oferece centenas de exemplos práticos para a utilização de CSS na formatação de suas páginas web e inclui exemplos de código que podem ser utilizados imediatamente. Você encontrará exatamente aquilo o que precisa.

Cada receita explica como customizar uma solução que satisfaça as suas necessidades, e cada capítulo apresenta um modelo de design que exibe os tópicos discutidos. Você aprenderá sobre o comportamento dos navegadores mais recentes – incluindo o IE 8, Firefox 3, Safari 4 e o Google Chrome – e como conciliar as diferenças no modo em que esses navegadores exibem suas páginas web.

Organizada em um formato conveniente, de fácil utilização como referência, esta edição é uma companheira valiosa para qualquer pessoa que esteja trabalhando com CSS. Aprenda o básico, incluindo a estrutura de regras CSS:

Trabalhe com a tipografia e o layout de suas páginas.
Crie efeitos para imagens e outros elementos de páginas.
Aprenda técnicas para a configuração de listas, formulários e tabelas.
Projete uma navegação web efetiva e crie links personalizados.
Use sua criatividade combinando CSS com JavaScript.
Aprenda técnicas úteis de solução de problemas.
Explore atributos do HTML5 e CSS3.
É recomendado que se tenha familiaridade com HTML e interfaces web.

Se interessou pelo livro? Consegui um desconto para os leitores aqui do blog de 20%, basta utilizar o código: PINCELADASDAWEB. Não fique desesperado que esse código não vai expirar até o final da semana, ele é válido até o dia 31/12/10.

CSS Cookbook

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

CSS3 Selectors & JavaScript ‘this’

Pedro Rogério — Wed, 31 Mar 2010 12:14:29 +0000

Em mais um vídeo do site Doctype.tv, eles dessa vez irão nos ensinar a trabalhar com seletores CSS3 e nos mostrar o significado da variável “this” do JavaScript:

CSS3 Selectors & JavaScript ‘this’

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

IE7 Float Bug

Pedro Rogério — Mon, 29 Mar 2010 12:44:28 +0000

Quem é desenvolvedor Front-end sabe do famoso bug da margem dupla no IE6, mas se você nem sabia que isso existia, vamos aos fatos. No IE6, se você aplicar float a um elemento, e depois aplicar margin para o mesmo lado que foi aplicado o float, essa mesma margem fica com o valor dobrado. Exemplo, apliquei float:left a um botão e depois defini que ele terá um margin-left:100px, em qualquer browser isso será 100px, mas no IE6, isso virá 200px. Para corrigir isso basta aplicar um display:inline ao elemento que ocorre o bug e tudo fica OK.

Esse comportamento foi corrigido em versões posteriores do browser, ou quase, pois um bug semelhante ocorre no IE7, só que agora com a margem em outra direção. Vou explicar detalhadamente o bug para que vocês possam entender, e para isso, observem a marcação HTML abaixo:


      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu nunc vel ipsum viverra blandit eu vitae risus. Nulla iaculis ante nec risus gravida adipiscing. Integer pretium nibh vitae odio feugiat volutpat. Quisque sodales pellentesque nulla ut lacinia. Quisque in neque non magna pulvinar convallis eu in mi. Ut quis pretium enim. Sed non pulvinar turpis. Aliquam vehicula odio sed turpis eleifend semper nec eu dolor.
       Eu sou um link

Até então, nada demais com essa marcação HTML, tudo muito simples, mas se por exemplo, eu aplicar float ao link, e definir um margin-bottom para o meu parágrafo, o link herda a margin do parágrafo. Portanto, a lógica é a seguinte, se eu tenho um elemento com float, e seu irmão (elemento antecessor no código) possui margin-bottom, o elemento com float herda o margin-bottom. Querem ver o que acontece, vejam o exemplo criado, funciona OK em qualquer browser, menos no IE7. Se você está com preguiça de abrir o IE7, veja só o que acontece na imagem abaixo:

Como podem ver, definir que meu parágrafo teria um margin-bottom:100px, ao aplicar float no link, ele também ficou com um margin-bottom de 100px. Possíveis soluções:

Trocar margin por padding
Remover o margin-bottom do parágrafo e aplicar margin-top ao link

No exemplo eu optei por remover a margem do parágrafo e aplicar ao link, portanto, vejam agora o exemplo sem bug. Jà havia passado por isso várias vezes e nunca havia encontrado solução, consertava isso através de “gambiarras”, mas através de um reply do Rafael Pazio no Twitter, encontrei a solução para o problema. Agora seu chefe vai ficar feliz quando você mostrar a ele que encontrou a solução para os problemas.

IE7 Float Bug

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

CSS3 Columns & jQuery Plugins

Pedro Rogério — Thu, 18 Mar 2010 12:02:22 +0000

Nesse tutorial você irá aprender a trabalhar com o módulo column das CSS3 e a como desenvolver plugins para jQuery:

CSS3 Columns & jQuery Plugins

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

CSS3 Borders & HTML5 Sections

Pedro Rogério — Thu, 11 Mar 2010 12:26:35 +0000

Em mais um episódio do site Doctype.tv, Jim e Nick estão de volta ao estúdio, explorando as novas propriedades do CSS3 e as novas tags do HTML5, começando com as tags section, article, aside, header, e footer.

CSS3 Borders & HTML5 Sections

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Novo CSS no Lanche

Pedro Rogério — Fri, 05 Mar 2010 12:08:50 +0000

Sim, é com muito prazer que anuncio que mudei o layout do meu outro blog, o CSS no Lanche. Aquele layout e logo antigo que você conhecia já estava no ar desde 2008, então, já estava mais do que na hora do site ter uma identidade visual própria.

Mas aí você me pergunta, você utilizou o mesmo layout do Pinceladas da Web? Sim, queria fazer algo que ao alguém visitar este site lembre-se quem é o dono dele. Um bom exemplo disso são os blogs da Envato, pois ao acessar os sites deles você vê que os layouts são os mesmos, a única mudança que ocorre é no logotipo. Quem acessa qualquer site deles já se lembra na hora a quem eles pertencem.

Mas agora voltando ao assunto do novo layout, essa textura no topo tem a função de simular uma toalha e o logotipo é um prato com um hambúrguer e um guardanapo ao lado, e o inventor de tudo disso foi meu amigo Thiago Dutra. Críticas e sugestões são sempre bem vindas.

Pra quem não viu o layout antigo, agora só através de screenshot:

Novo CSS no Lanche

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Radial Gradients & Web SQL Databases

Pedro Rogério — Thu, 25 Feb 2010 12:24:24 +0000

Em mais um vídeo disponibilizado pelo site Doctype.tv, Nick Pettit e Jim Hoskins continuam a explorar as novas possibilidades proporcionadas pelo CSS3 e HTML5, como a utilização de gradientes e o uso de banco de dados do lado cliente:

Radial Gradients & Web SQL Databases

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

CSS3 Gradients & HTML5 Databases

Pedro Rogério — Tue, 02 Feb 2010 13:33:37 +0000

Com CSS3 agora será posível de uma forma muito simples criar gradientes sem a utilização de imagens. No atual momento somente Firefox e browsers baseados no motor de renderização WebKit possuem suporte a tal feature. Já com a utilização de HTML5 Databases será possível a criação de aplicações complexas que necessitam armazenar dados em bancos locais. Veja no vídeo abaixo a explicação e exemplos de utilização:

Via: Doctype.tv

CSS3 Gradients & HTML5 Databases

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

eCSStender: Assuma o controle do seu CSS

Walter Vieira — Wed, 30 Dec 2009 12:55:29 +0000

Diga adeus aos códigos CSS cheios de hacks que em alguns casos acabam mais atrapalhando do que ajudando e projete seus códigos muito mais enxutos.
Estou falando do eCSStender, com ele você pode usar seletores CSS avançados como border-radius e ter a certeza de que vai funcionar até no IE6.

Acesse o site e descubra como esse framework maravilhoso pode facilitar sua vida.

Link direto: http://ecsstender.org

eCSStender: Assuma o controle do seu CSS

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Zen Coding: Como escrever HTML/CSS mais rápido

Pedro Rogério — Mon, 07 Dec 2009 11:14:53 +0000

Zen Coding é um plugin, criado por Sergey Chikuyonok para Aptana, TextMate, Coda e Espresso, baseado em JavaScript (para o Aptana) ou Python (restante dos Scripts) que utiliza uma lógica avançada para a construção do HTML e CSS.

A idéia deste projeto é usar a lógica da sintaxe do CSS para escrever gandes blocos de código:

div#content.wide.column>h1+ul#nav>li.item$*5>a

O resultado da declaração acima você vê abaixo:

Para criar um novo documento XHTML Strict, basta digitar o seguinte código:

html:xs

Ele irá gerar o seguinte código:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Basta conferir a lista de elementos Zen dedicados a HTML, e também a lista Zen de seletores HTML.

Download

Aptana
Coda, via TEA for Coda
Espresso, via TEA for Espresso

Zen Coding: Como escrever HTML/CSS mais rápido

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Uma dose de inspiração

Walter Vieira — Fri, 04 Dec 2009 14:36:42 +0000

Tenho a plena certeza de que cada um de nós, meros mortais, profissionais de criação já passou pela ingrata “Falta de Inspiração”. Tem dias em que acordamos sem a mínima inspiração para desenvolver aquele trabalho no qual o cliente no briefing fez questão de dizer que espera algo novo e criativo.

Mas para alegria geral da nação, existe um site muito bacana que tem uma verdadeira fonte de inspiração em CSS, estou falando do weloveCSS.

O site disponibiliza uma galeria de sites desenvolvidos totalmente em CSS e (X)HTML válidos, divididos em diversas categorias, que são um verdadeiro colírio para os olhos.

Uma dose de inspiração

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

xCSS Framework – Orientação a Objetos em CSS

Pedro Rogério — Thu, 26 Nov 2009 12:13:18 +0000

Você não sabe o que é Orientação a Objetos? Vamos lá, vou transcrever aqui o que já foi dito em um outro post sobre Orientação a Objetos em CSS:

A orientação a objetos, também conhecida como Programação Orientada a Objetos (POO) ou ainda em inglês Object-Oriented Programming (OOP) é um paradigma de análise, projeto e programação de sistemas de software baseado na composição e interação entre diversas unidades de software chamadas de objetos. Em alguns contextos, prefere-se usar modelagem orientada ao objeto, em vez de programação.

Basicamente programação orientada a objetos têm como meta identificar o melhor conjunto de objetos para descrever um sistema de software. O funcionamento deste sistema se dá através do relacionamento e troca de mensagens entre estes objetos. C++, C#, Java, Object Pascal, Objective-C, Python, Ruby são exemplos de linguagens de programação orientadas a objetos, mas e o CSS? Ela não é server-side, como então posso escrever CSS orientado a objetos?

Já apresentei uma forma em meu outro blog, através de jQuery, mas pode ser falho pois você depende que o user-agent tenha suporte a JavaScript para que a aplicação fucnione corretamente, e a outra forma que acabei descobrindo foi o xCSS Framework.

O que é o xCSS Framework?

xCSS Framework é um framework css desenvolvido em PHP para os profissionais de desenvolvimento front-end que visa minimizar o tempo de desenvolvimento proporcionando um fluxo de trabalho extremamente simples, onde além de tudo você possui uma visão intuitiva da estrutura global do seu CSS, utilizando variáveis e reutilizando o código constantemente. Ele é extremamente leve e integra-se perfeitamente a qualquer fluxo de trabalho e o melhor de tudo é que você, mesmo utilizando um Framework CSS conseguirá manter seu código semântico, o mesmo não acontece com outros frameworks css onde você deve utilizar classes pré-definidas.

Features

O xCSS Framework ainda é jovem, mas já possui várias features como: extender uma classe a outra classe, suporte a variáveis, Operações matemáticas entre outras features. A declaração de variáveis é semelhante ao PHP:

vars {
    $path = ../img/tmpl1/png;
    $color1 = #FF00FF;
    $border = border-top: 1px solid $color1;
}

Após a declaração das variáveis, basta efetuar as chamadas nas declarações CSS:

.seletor {
    background-image: url($path/head_bg.png);
    background-color: $color1;
    $border;
}

Seletores aninhados:

.seletor {
    a {
        display: block;
    }
    strong {
        color: blue;
    }
}

O resultado desse código após ele ser processado será o seguinte:

.selector a {
    display: block;
}
.selector strong {
    color: blue;
}

Mais um exemplo, agora utilizando self:

.selector {
    self {
        margin: 20px;
    }
    a {
        display: block;
    }
    strong {
        color: blue;
    }
}

A saída desse código é a seguinte:

.selector {
    margin: 20px;
}
.selector a {
    display: block;
}
.selector strong {
    color: blue;
}

Instalação

Sua instalação é extremamente simples e não demanda configurações no servidor, basta seguir a explicação do desenvolvedor do xCSS no site. Você deve criar uma estrutura semelhante a mostrada na imagem abaixo:

Em contrapartida desenvolvi uma página de exemplo com o xCSS para estudo. Aconselho também a efetuar o download dos arquivos para futuras consultas.

xCSS Framework – Orientação a Objetos em CSS

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Ferramentas que utilizo para desenvolvimento web

Pedro Rogério — Wed, 04 Nov 2009 10:41:02 +0000

Recentemente recebi um e-mail de um leitor aqui do blog me perguntando quais ferramentas eu utilizo no dia a dia referentes ao desenvolvimento web, com isso, resolvi escrever esse post para mostrar um pouco do que eu utilizo no meu dia de trabalho.

Dreamweaver

Odiado por muitos, adorado por poucos, é com ele que escrevo CSS e HTML, desde quando comecei a desenvolver para a web utilizo o Dreamweaver, se utilizado da forma correta é uma ótima ferramenta. Digo da forma correta pois ainda existem muitas pessoas que o utilizam no modo visual, onde você vai criando as divs (vulgo layers), somente as arrastando pela página. Também já utilizei bloco de notas, Notepad++, TopStyle, Aptana e vários outros editores desconhecidos.

Photoshop

É através dele que faço o recorte de imagens para aplicar nos layouts que desenvolvo o HTML. Dispensa explicações.

Internet Explorer 6, 7 e 8

Sim, parece muito mais ainda tenho esses 3 browsers instalados aqui no meu PC, rodo o IE6 através de uma máquina virtual, mas ultimamente dá pra contar no dedo as vezes que ando abrindo a mesma, graças a deus. E o IE 7 eu utilizo através do IE8. Se você possui o IE8 instalado no PC basta apertar F12 para abrir as ferramentas de desenvolvimento e escolher como modo do navegador o IE7.

Fora esses browsers também tenho instalados aqui os seguintes browsers: Google Chrome, Safari e Opera. Todos esses em sua última versão.

Firefox

Esse não poderia faltar. Juntamente com o Firefox, tenho várias extensões instaladas, que são as seguintes: Firebug, Web Developer Toolbar, YSlow, HTML Validator, Screengrab, SenSEO, Weave. A extensão Weave serve para sincronizar meus favoritos, abas, aliás, tudo o que estiver salvo aqui no Firefox com outros computadores que utilizo, é uma mão na roda.

Google

E com certeza uma ferramenta que não pode faltar, as consultas ao Google. Se você um dia quer se dar bem no desenvolvimento web acostume-se a pesquisar, não tenha preguiça de fazer o mesmo. Procure também ler bastante, compre alguns livros, pegue emprestado, mas não deixe de ler sobre o assunto. Aliás, já viram minha coleção de livros?

Não deixe também de visitar blogs, pois os caras são antenados e você sempre vai ver conteúdo fresco rolando. Siga-me também no Twitter, onde posto várias novidades que encontro por aí na web.

E você, quais ferramentas você utiliza no seu dia a dia que nos aconselha a utilizar?

Ferramentas que utilizo para desenvolvimento web

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Experimento HTML5 + CSS3 Fase 2

Pedro Rogério — Fri, 25 Sep 2009 14:16:27 +0000

É com grande prazer que venho anunciar, como vocês mesmos podem ver, que alterei o layout aqui do blog. Mas essa versão é especial pois foi desenvolvida em HTML5 e CSS3. Como em casa de ferreiro o espeto é de pau eu nunca havia desenvolvido o meu próprio layout para esse blog, sempre utilizei de temas prontos. Não que eu não tivesse conhecimento para desenvolver um tema do zero, mas queria desenvolver algo especial e creio que essa hora chegou.

Gostaria do feedback de vocês quanto as funcionalidades do blog, pois como ainda está em fase beta podem ocorrer erros. Portanto, encontrou algum problema me avise aqui nos comentários, agora, só não me venha dizer que não funciona no IE pois nesse browser para vocês terem idéia eu não testei o site até agora e também não estou com a mínima vontade de testar.

E em relação ao layout antigo, o que acham? Ficou bem melhor?

Experimento HTML5 + CSS3 Fase 2

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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

Livros sobre HTML5 e CSS3

Pedro Rogério — Fri, 11 Sep 2009 12:00:15 +0000

Recentemente tenho recebido uma enchorrada de e-mails e mensagens no Twitter pedindo a indicação de livros sobre HTML5 e CSS3. Com base nisso resolvi escrever esse post para deixar claro para as pessoas que “ainda” não existem livros sobre o assunto, mas por que?

Quem acompanha o CSS no Lanche provavelmente já deve ter lido um post sobre a história do HTML, e lá eu relato que em Janeiro de 2008 o W3C havia publicado que estaria iniciando seus trabalhos encima do HTML5. Existem relatos de que a especificação do HTML5 estaria finalizada somente em 2022, portanto seria uma atitude muito precoce alguém lançar um livro sobre o assunto no atual momento, pois amanhã ou depois podem ocorrer mudanças nas especificações que estão sendo desenvolvidas no atual momento.

Mas de que forma então eu posso me atualizar e aprender HTML5? Hora, a internet está aí pra isso, comece dando uma lida na especificação do HTML5 que listei aqui, dê uma olhada nos sites de quem já usa HTML5 no Brasil, veja o que já foi feito no site do W3C, ou veja o que o WHATWG está fazendo sobre o assunto.

Mas se você ainda não se contenta com tudo isso, então amigo, sinto muito, se contente por enquanto com esse Pocket Book sobre HTML5.

Livros sobre HTML5 e CSS3

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

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