Mateus Souza

Conversas sobre desenvolvimento web

Categorias »

CSS

Categoria | 14 posts usam esta categoria.

Dicas, hacks e técnicas de CSS...

Tuild – Um Construtor / Compressor de Peso!

6

Depois de muito tempo sem postar nada no blog, hoje venho trazer uma ferramenta que criei usando NodeJS. Nada mais, nada menos do que o “Tuild” – uma junção das palavras “this & build”.

O Tuild é um construtor/compressor (em inglês: build/minifier) para CSS, HTML e JS. Se ainda não caiu a ficha, o Tuild é uma alternativa – elegante – para:

Enfim, o Tuild é um “tudo em um”, com mais opções (suporte a HTML por exemplo). O motivo da criação do Tuild é exatamente esta: ter um construtor e compressor simples, porém avançado e central, atendendo as principais necessidades de qualquer projeto web.

Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3

2

Hoje, vamos dar continuidade as propriedades de interface para CSS3. No post anterior falamos sobre box-sizing e resize, agora iremos ver as propriedades para múltiplas colunas ( columns, column-count, column-widht, column-gap, …). Depois de ler este artigo você deverá no mínimo, saber tudo sobre múltiplas colunas em CSS3!

Múltiplas Colunas com CSS3

Até o CSS2, dividir um layout em colunas era um pouco complicado, tendo de recorrer, como melhor opção, ao uso de grids (Grid 960 e etc…). Com CSS3 essa história já muda!

Basicamente, a diferença entre um Grid CSS – por favor pesquise sobre o assunto se ainda não tem conhecimento -, e o módulo para múltiplas colunas em CSS3 é: com CSS3 as colunas são mais flexiveis, tornando mais fácil a manipulação, o HTML irá “fica de lado”, sem deixar de ter o mesmo resultado de um Grid CSS, com algumas melhorias é claro… Vejamos como manipular múltiplas colunas em CSS3:

Desenvolvendo CSS3 – Propriedades de Interface

3

Novamente falando sobre CSS3, hoje vamos abordar sobre as propriedades para interface, o que irá nos ajudar e muito no desenvolvimento de layouts. Acredito que a partir de agora você realmente observará o que CSS3 trouxe de diferente. Estilizar um elemento com sombras, multiplos backgrounds e outras coisas mais é bem legal, mas CSS3 vai muito além disso… Então “vamo que vamo”, que ainda temos muito a falar antes de terminar esta série.


Você pode conhecer Interface como sendo UI (user interface/interface do usuário), que é o mesmo conceito. Em minha visão, UI ou Interface, nada mais é do que uma disposição “padrão” que visa a facilidade de uso, mesclada com a experiência que o usuário teve em outros locais, a chamada usuabilidade. Interface é um assunto muito amplo, então sem mais delongas, puxando para o nosso assunto (CSS3), interface aqui tem como objetivo, trazer um padrão comum e mais rápido à disposição do layout. Sendo um pouco mais complexo, interface é o elo de ligação – automático – entre duas necessidades: menos CSS/HTML e melhores layouts.

Temos como exemplo, que se encaixa perfeitamente no que estamos falando, a necessidade de dividir um determinado layout em partes… Fazer isto na mão envolver muito código – como acontece com grids CSS – e é cansativo. Já usando as propriedades de Interface do CSS/CSS3 você consegue o mesmo resultado, de forma rápida e simples. É justamente ai que se encaixa a interface do CSS…

Aprendendo CSS3 – Trabalhando com Textos

5

Novamente falando sobre CSS3, em sua série, hoje iremos ver um pouco as propriedades de texto disponíveis no CSS3. São elas:

  • text-shadow
  • text-overflow
  • Ruptura de palavras longas (word-wrap)

Text-shadow

É o box-shadow dos textos… Isto mesmo, o conceito é o mesmo, apenas a aplicação é “fechada” aos textos. Já falei sobre o box-shadow aqui, recomendo que visualize este artigo também para compreender melhor o text-shadow.

Usar text-shadow traz um número muito grande de vantagens, tanto para a interface/design do website, quanto pela facilidade de aplicação, uma vez que dispensa o uso de imagens ou Javascripts para reproduzir o mesmo efeito. Além do mais que é uma propriedade bem completa, em relação as técnicas anteriores.

Avançando com CSS3 – Entendendo as Cores

3

Em mais um post sobre CSS3, hoje vamos nos prender especificamente nas cores em CSS3, mas vamos nos prender mesmo… O objetivo de hoje é fazer com que tenhamos (e eu também estou incluso) pleno conhecimento das características e diferenças que há em cada “modo” nas cores. Vamos lá:

No CSS2 a cor mais usada é no formato hexadecimal (#000000), logo depois, neste rank vem a definição da cor de acordo com o seu nome (black), chamada de color-name – não entrarei em mais detalhes. De fato estes dois modos (principalmente o primeiro), são mais que suficiente para se trabalhar com cores em CSS. Sendo assim, antes de entrar nas cores em CSS3, vamos dissecar o formato hexadecimal, que é onde encontraremos nossa “inspiração” para entender as cores em CSS3.

Todas as Categorias