Para agilizar o desenvolvimento do frontend

Uso o Chrome como browser padrão em minha máquina e algumas extensões interessantes para desenvolvedores.

 

Personalizando o scrollbar com WebKit

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.
Read more

 

CSS para alinhamento vertical

O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura.

Pensamos em uma POG de usar imagemagick no ruby para dar um resize na imagem e fixar a altura no tamanho da div. Mas não foi preciso nada disso. Via CSS:

.product1 {display: table; height: 120px; width:120px; #position: relative; overflow: hidden; background-color:#fff;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}

  

<div class="product1">
    <div class="product2">
        <div class="product3">
            <img src="imagem.jpg"/>
        </div>
    </div>
</div>

Fonte

 

Pseudo-seletores são legais

Todo mundo lembra do pseudo-seletor :hover, quando quer fazer um simples efeito rollover em um link. Well, o que pouco sabe é que existe outros dois seletores muito bacanas: o :after e o :before.

Veja o exemplos:

input:before { content:"&nbsp;";}
a:before { content:">";}
a:after { content: " (link externo) "; }
a:after { content: " (" attr(href) ")";  }

O primeiro exemplo coloca um espaço (entidade  ) antes do conteúdo do botão. O segundo exemplo, coloca um marcador para cada link. Já o terceiro exemplo adiciona o texto “link externo” a todo link da página. Bem, e a última linha? Note o uso do attr(href). O que ele faz é simplesmente retornar o valor href do tag a. Ao invés do attr(href), você também pode usar outros atributos. Veja esse exemplo:

img:before { content: "Descrição da imagem: " attr(alt) }

Toda imagem será antecidida de: Descrição da imagem: (valor do atributo da imagem)

 

CSS para preloader de imagem

Pescado do digg:

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
       background-image: url();
}

Depois de configurar o CSS, basta chamar uma div, com seu respectivo id.

 

CSS: Transparências cross-browser

Existem formas distintas para fazer efeitos de transparência, via CSS. Cada browser reconhece um atributo nas folhas de estilo. Vamos lá então:

filter:alpha(opacity=25)

Para o flamigerado IE.

-moz-opacity:.25

Usado no browser Mozilla

opacity:.25

Usado no Opera

-khtml-opacity:.25

Usado em navegadores com engine KHTML (Safari e Konqueror)

Para o Internet Explorer, os valores variam entre 0 a 100. Para os outros browsers, variam entre 0 e 1.
[update] O Opera, não sei porque cargas d’água, não suporta transparência;

 

O que esperar com o CSS3

Bem, um dia desses, a versão 3 do CSS deve sair. Mesmo ainda que vários browsers não suportam sequer a versão 2, o W3C soltou uma lista de features. O que deveremos ter:

Border: cantos arredondados; sombras; bordas complexas feitas de várias imagens ladrilhadas;
Comportamento CSS: adição de comportamentos aos estilos, ou seja mudanças dinâmicas ao estilo ou ao documento em resposta a cliques e/ou teclas pressionadas;
Layout multi-colunas: novas propriedades para criar layouts de colunas mais flexíveis;
Perfil móvel 1.0: inclui um subgrupo de propriedades CSS1 e CSS2 apropriadas para dispositivos portáveis;
Fontes: propriedades para “decoração” e efeitos, como contorno e AA (anti-aliasing = anti-serrilhado);
Audio: possibilidade de prender sons de fundo a elementos e transições de elementos, como ativação de links ou flutuar (hover) o cursor sobre um elemento.