Ver Demo – Descargar Demo – Mais Informação  Pimp Your Tables with CSS3
Fonte: Tablas con CSS3

Como editar CSS com o Firebug

Com o Firebug, dá pra editar CSS sem ser clicando nas propriedades.

É possível editá-lo como o HTML.

Vá na aba CSS, escolha o arquivo e clique em editar.

Vivendo e aprendendo.

PS: a WebDeveloper Toolbar faz a mesma coisa, aperte Ctrl+Shift+E.

PPS: Depois de editar, copie o código e cole no arquivo.

via pedromenezes.com

Ver Demo – Baixar – Mas Info CSS Hover Effect

Link  8 Javascript solutions to common CSS problems

Características interessantes de ColorBox:

• Suporta a utilização de fotos de forma individual ou em grupos, Suporta ajax em linha, e conteúdo iframe.
• Diversos Estilos. Aparência completamente controlada através de CSS, para que os usuários possam dar novos estilos à caixa.
• O comportamento dos ajustes pode ser sobre-escrito, sem alterar o arquivo de Javascript ColorBox.
• HTML Totalmente discreto, não requer mudanças nos existentes HTML
• Efeito atraente, com discreto degradado.
• Precarga de imagens de fundo para evitar a inflamação de unstyled
• Leve: só 12kbs de Javascript – só 2kbs gzip e minified!
• Escrito em jQuery .
• Gera XHTML e CS S válido

Ver Demos: 1 – 2 – 3 – 4 -  Via Xyberneticos – Mas info e download ColorBox lightbox

Tooltips

Aqui estão 11 excelente soluções para criar tooltips utilizando várias soluções, tais como jQuery, MooTools, ou apenas CSS.

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

CSS Bubble Tooltips

Easy CSS Tooltip

CoolTips

ToolTip_MooTools

Via: Web Design Ledger

Para realizar nosso teste, vamos utilizar a folha de estilo de Kabytes que atualmente tem um peso de 8.256KB

• Clean CSS : Muito fácil de utilizar simplesmente colamos o código ou lhe damos a url do mesmo.
• CSS Teak : Similar ao anterior, com uma utilidade de que podemos baixar um widgets para OSX. É muito prático já que uma vez que subimos o arquivo para otimizar o site  nos devolve o css otimizado pronto para baixar.
• flumpCakes : Mesma metodologia, não é tão pratico, quando gera o código otimizado temos que o copiar e colar no novo css de forma manual.
• Icey CSS Compressor : Extremamente rápido, tem o mesmo “problema” do anterior que não gera o arquivo, você tem que o copiar diretamente do html que o site gera.

Resultados:

Desenvolvimento:

• WordPress
• Válido HTML5
• CSS
• jQuery
• Suporte para os navegadores (IE, Firefox, Opera, Safari, Chrome)
• Newsletter
• Suporte a Mult-Idiomas

Demo: www.dss-card.com

$fx()

$fx() ver 0.1 é um pequeno e realmente muito flexível Javascript para animar elementos HTML. Permite alterar qualquer propriedade CSS, combinar efeitos em corrente ou em paralelo, também tem capacidade para estabelecer diferentes chamadas que lhe dá ainda mais flexibilidade.

Os exemplos e as idéias de como implementar me deixou fascinado, asim que dediquem um pouco de tempo para ver de que se trata.

Link  $fx() ver 0.1 -Exemplos e Manual de uso – Baixar

Start/Stop Slider outra atraente proposta feita por Chris Coyier para gerar Conteúdo Deslizante (Slider) no seus projetos online. Requer  jquery e é completamente personalizavel desde do seu arquivo startstop-slider.js, basta ter um pouco de conhecimento ou tempo e curiosidade. Start/Stop Slider possui uma característica que é fácil deduzir já com o nome do projeto, permitindo mediante um botão parar a animação de nosso slider quando desejemos, uma boa forma de permitir a nossos usuários ler com tranqüilidade as coisas que desejemos mostrar neles.

Ver Demo - Download - Mas Info Start/Stop Slider by: Chris Coyier

Uso:
Realizar o link  correspondente a nossos script no encabeçado de nosso site o theme < head >…

<script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/startstop-slider.js" type="text/javascript"></script>

Adicionar estilo na nossa folha de Style.css

#slider		  { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
position: relative; margin: 50px 0; }
#mover		   { width: 2880px; position: relative; }
.slide		   { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1		{ font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
color: #ac0000; }
.slide p		 { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img	   { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

Conteúdo

<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Garden Rack</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a></div>
<div class="slide">
<h1>Tulip Bulbs</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a></div>
<div class="slide">
<h1>Garden Gloves</h1>
Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

<a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a></div>
</div>
</div>

Bom e isso é tudo, qualquer problema, você pode deixar um comentário.