Ir para conteúdo / Skip to content

Posts da categoria: ‘ CSS ’

Bullets e Arrows para Download

Postado em: 3 de junho de 2008 por Pedro Rogério
Bullets and Arrows

No site Web Site Bullets você pode encontrar bullets (marcadores) e Arrows (setas) para utilizar em seu site/blog. Todas as imagens são em formato gif e com o fundo transparente.

Bullets and Arrows

Via: Utilidades para Webmasters.

40 Formas de listar Planos de Pagamento

Postado em: 2 de junho de 2008 por Pedro Rogério
Pricing Design

O que eu vejo no dia-a-dia é muito designer ainda ter aquela dificuldade de desenvolver um layout atrativo para listar planos de pagamento. Com certeza, criar um layout chamativo e ao mesmo tempo objetivo é complicado, mas no site designwalker você pode ver 40 exemplos que podem ajudar o designer da sua empresa e levar o seu negócio ao sucesso.

Pricing Design

Milky Icons

Postado em: 29 de maio de 2008 por Pedro Rogério
Milky Icons

Está precisando de alguns ícones para melhorar suas aplicações? Esntão seria legal você dar uma olhada nesse set de ícones (composto de 15 ícones), nas resoluções 48×48 e 64×64.

Galeria de Efeitos Parallax

Postado em: 27 de maio de 2008 por Pedro Rogério
Exemplo de efeito Parallax

Efeitos Parallax são aqueles efeitos utilizados para criar uma ilusão de profundidade tridimensional em ambientes 2D, muito utilizada em jogos do tipo Arcade, como o Moon Patrol e Sonic Hedgehog. Como os nossos sitemas operacionais em sua maioria são todos 2D, é possível simular essa técnica no browser para simular um ambiente 3D.

Originalmente essa técnica foi descoberta por Alex Walker e Paul Annett, onde são utilizadas várias imagens em CSS sobrepostas para simular um ambiente 3D:

Exemplo de efeito Parallax

Quer saber mais sobre o assunto? Matthias Kretschmann fez em seu site uma galeria listando 12 belos efeitos utilizando a técnica Parallax.

<update>O site CSSLab.cl fez um post interessante sobre o assunto também.</update>

O que são Tag Clouds?

Postado em: 15 de maio de 2008 por Pedro Rogério

Tag Clouds, ou Nuvem de Tags são listas hierarquizadas visualmente, ou seja, uma forma de apresentar os itens de um website. Mas o que são essas tags?

Tags são rótulos ou legendas onde as pessoas podem categorizar conteúdo de uma forma muito simples, utilizando qualquer palavra que faça sentido. O uso de Tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.

Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Fonte: Wikipédia.

CSS Shorthand Cheat Sheet

Postado em: 25 de abril de 2008 por Pedro Rogério

Nesse Cheat Sheet desenvolvido por Michael Leigeber você vai aprender a economizar algumas boas linhas de código em suas declarações CSS:

Download

Internet Explorer e a propriedade Clip

Postado em: 15 de abril de 2008 por Pedro Rogério

A proriedade clip do CSS é utilizada para recortar imagens. Seu uso consiste no seguinte:


clip: rect(10px, 250px, 5px, 5px)

Só que é uma prorpiedade não muito utilizada por causar problemas no Internet Explorer, pois o mesmo não admite o uso de vírgulas nas sentenças. Para solucionarmso esse problema, basta eliminarmos as vírgulas, deixando da seguinte forma:


clip: rect(10px, 250px, 5px, 5px)
clip: rect(10px 250px 5px 5px)

A primeira declaração é para browsers Standard Compliance, onde o IE não entende, e a segunda é para o dito cujo.

Via: Gran Impetu - Internet Explorer y la propiedad clip

Barras de progresso animadas somente com CSS

Postado em: 9 de abril de 2008 por Pedro Rogério
Barra de progresso animada com CSS

No site CSS Globe você pode encontrar um tutorial onde é possível fazer barras de progresso animadas somente com CSS, sem uso qualquer de JavaScript ou alguma linguagem de programação. Para quem achava que isso não era possível, fica aí a dica.

Os 12 Melhores Frameworks CSS

Postado em: 8 de abril de 2008 por Pedro Rogério

Utilizar ou não utilizar algum Framework? Essa é uma pergunta que se passa na cabeça de todo desenvolvedor. Eu, aprticularmente, não gosto muito deles, queria até desenvolver um Framework CSS, mas vi que não ia ter tempo para me dedicar a isso, e larguei mão desse projeto. Mas uma coisa é válida, se você puder estudá-los a fundo, é muito bom para conhecer novas técnicas, deixar vícios de lado, e quem não tem seus vícios não é? E visitando o site Kabytes descobri uma lista com os 12 melhores Frameworks em CSS:

Update: 23 Frameworks CSS

Renderização mais rápida das Tabelas com CSS

Postado em: 28 de março de 2008 por Pedro Rogério

Caso você tenha que utilizar tabelas em seu site, quando se trata realmente de uma tabela, é conveniente ter em conta que existe uma propriedade no CSS não muito utilizada que pode melhorar e muito a renderização de nossas tabelas.

A propriedade se chama table-layout e nos permite indicar se queremos que a tabela tenha o seu fluxo com o tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo:


.fixed_table {
    table-layout: fixed;
}

.auto_table {
    table-layout: auto;
}

O valor fixed nos permite renderizar a tabela de uma forma mais rápida, já que o tamanho das celulas depende das colunas, e não do conteúdo, por isso a renderização é mais rápida. Ótimo para se utilizar em tabelas muito grandes e que possuem conteúdo muito parecido. Já o valor auto é dependente dos valores das células, por isso é necessário ler toda a tabela, se recomenda utilizar quando a tabela tem conteúdo muito variado.

Referências

Página 2 de 14«1234567»...Última Página »