Pinceladas da Web » CSS

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?

Experimento: HTML5 + CSS3

Pedro Rogério — Mon, 31 Aug 2009 11:58:03 +0000

Após 1 anos e meio com um layout que não me agradava muito, resolvi abrir o Photoshop e botar o lado criativo em prática, que aliás anda enferrujado.

Sim, isso mesmo, desenvolvi um layout para meu site pessoal em HTML5 + CSS3, ou vocês acham que é só o Tableless que pode fazer isso?

O layout é bem simples, sem muita frescura mas eu acho que ficou elegante. A primeira fase foi feita, agora a minha inteção é de implementar esse memso layout também para o blog, sim, logo esse blog também será em HTML5 e CSS3. Com certeza vocês devem estar nesse momento abrindo o Internet Explorer para ver se o site funciona nele não? Sim, ele funciona, a única coisa que me preocupei para que o site funcionasse no IE foi a de adicionar um JavaScript para que ele crie as tags no DOM. Referente ao CSS não sei como está e também não tenho interesse em ver, pois até agora não testei esse site no IE7 e IE6, e nem quero testar, só abri no IE8, dei uma rápida olhada e nada mais.

Quanto aos usuários que ainda utilizam o IE6 para visitar esse site, estou pensando em uma forma de incentivá-los a deixar de utilizar esse browser, o que vocês me sugerem?

Experimento: HTML5 + 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?

Os 36+ piores sites do mundo

Pedro Rogério — Thu, 20 Aug 2009 12:09:12 +0000

Se você sofre de Epilepsia fotosensitiva, tem algum tipo de repulsa ao visitar sites com vários gifs animados, por favor, não continue a ler esse post, pois ele tem a intenção de mostrar os piores sites do mundo na questão design, programação, usabilidade e o que mais couber. Agora, se você é do tempo do design do Guaraná com rolha, vai se deliciar.

E para iniciar a série, um clássico que para quem me segue no Twitter já conhece:

Are you ready to get pumped?

Lalalalalalalalalalalalalalalalalala

Culture Park

Brigadeiros do Ronaldo

Desentupidora Rola Bosta

S4CM

Se você é dono de algum desses sites, por favor leve na brincadeira. E se seu site não foi listado aqui, deixe o endereço do mesmo nos comentários. Aconselho você também inserir o selo “Que página Boçal” no seu site que ilustra a má utilização dos recursos na web.

Os 36+ piores sites do mundo

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?

Firebug e CSS

Pedro Rogério — Tue, 11 Aug 2009 12:29:54 +0000

O Firebug é uma extensão para o Firefox que auxilia no desenvolvimento web na edição do CSS, HTML, DOM, JavaScript, Ele foi desenvolvido por Joe Hewitt, um dos criadores do Firefox e em conjunto com outros plugins, como o YSlow você tem uma completa suíte de desenvolvimento e análise de performance de websites.

Aqueles que utilizam o Firebug a primeira vez com certeza não conseguem largá-lo mais, aliás, hoje em dia não existe mais desenvolvimento web sem o uso do Firebug. Caso você nunca tenho ouvido falar do Firebug, vou deixar aqui um vídeo criado por Kristarella mostrando os primeiros passos com Firebug na edição do CSS:

Via: CSSBlog.es

Firebug e 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?