25 trechos de CSS incrivelmente úteis

CSS é sem dúvida uma das mais importantes linguagens que nós usamos. Enquanto html fornece a estrutura que pode ser inconsistente e imprevisível entre browsers diferentes ou antigos. CSS funciona para resolver essas diferenças , e muitas vezes temos que ser criativos para resolver essas inconsistências. Abaixo está uma lista fantástica com 25 trechos de CSS que eu tenho certeza que serão extremamente úteis. Sendo você um desenvolvedor de web veterano ou se ainda está dando os primeiros passos no CSS.

Esconda textos com text indent

Isso é extremamente útil para utilizar em logotipos. Muitas vezes são imagens, mas você vai querer utilizar a tag h1 para a marcação para colaborar com o SEO. Aqui está a melhor maneira de faze-lo. O que nós fazemos basicamente é posicionar o texto bem longe da tela, e aplicamos uma imagem como background.

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

Estilize links de acordo com o formato do arquivo

Esse trecho é destinado a experiência do usuário. Muitras vezes na internet nós nos vemos clicando em links sem ter noção de aonde vamos chegar. Esse trecho pode ser usado para mostrar pequenos icones ao lado dos links mostrando aos usuários que aquele é um link externo, e-mail, pdf, imagem, e muito mais.

/* external links */

a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

Remova o barra de rolagem de textarea do IE

Internet Explorer tem o péssimo hábito de adicionar barras de rolagem em seus textareas mesmo quando não há necessidade. Você pode corrigir essa falha de maneira simples utilizando esse trecho.

textarea{

	overflow:auto;
}

Capitulação

É muito comum hoje em dia vermos em blogs e websites novos o uso de capituação (aquela letra maior no inicio do texto). Você vai ficar surpreso de como é fácil implementar isso.

p:first-letter{

	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:60px;
	font-family:Georgia;
}

Transparência com Css

Transparência  é algo que não é feito da mesma maneira em diferentes browsers o que pode ser irritante. Eis uma forma de fazer transparência em múltiplos browsers.

.transparent {

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Css Reset por Eric Meyer

Eric Meyer’s css reset tem se tornado padrão hoje em dia para começar sua folha de estilo. Sendo adotada pelos designers mais influentes, você pode ter certeza de sua qualidade.

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Preloader de imagens

Algumas vezes é útil fazer um carregamento antecipado de suas imagens para quando certos elementos precisarem delas, elas já estejam carregadas evitando qualquer espera desagradável principalmente quando utilizamos css sprites, comuns em menus.

div.loader{

	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}

Botões básicos com sprite

Ter um botão ou link com uma imagem de background é algo bem comum, e hoje em dia precisamos adicionar alguns efeitos para melhorar a experiência do usuário. Indicando que ele está passando o mouse por cima de uma área interativa ou clicável. Usando a técnica de sprite, nós podemos criar esse efeito alterando a posição da imagem do background para cima ou para baixo. uma maneira simples de faze-lo:

a {

display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}

a:hover {
	background-position: 0 -30px;
}

Google Font API

O Google recentemente liberou uma ferramenta fantástica para webdesigners que permite você carregar as fontes do Google e utilizar em seus websites. Nós podemos até carregar variantes das fontes como bold, ou itálico entre outras. mesmo a biblioteca do Google sendo limitada, ainda existem muitas fontes a serem utilizadas. Para utilizar a ferramenta primeiro inclua no seu html o código criado dinamicamente através da API depois inclua no nome das fontes como você faria normalmente no CSS para mais informações leia Google Font API. (em inglês)

<head>

	Inconsolata:italic|Droid+Sans">
</head>
body {
	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
}

Hacks específicos

Algumas vezes é necessário especificar um determinado browser para corrigir inconsistencias e comentários condicionais podem não ser a melhor maneira de faze-lo. Essa lista de hacks escrita por Chris Coyier é uma boa forma de especificar determinados browsers.

/* IE 6 */

* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}

Rodapé Fixo

Você pode pensar que criar um rodapé que fique fixo ao final da tela não seja difícil, mas é surpreendente como isso pode dar dor de cabeça. principalmente no IE. Abaixo segue o trecho para fixar o rodapé mais o hack para o IE6. agora ficou fácil!

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}

/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Rotacionar uma imagem

Rotacionar uma imagem utilizando css ao invés de carregar outra imagem pode ser bem útil. Digamos que você vai utilizar a imagem de uma flecha mas ela aponta para diferentes direções em determinados locais. Aqui está a solução para o seu problema.

img.flip {

	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

Clearfix

A um tempo atrás, alguém decidiu que estava na hora de aplicar “clear” a elementos da página sem adicionar nenhum código de marcação ao documento. Eles fizeram isso criando uma classe que pode ser aplicada a “containers” de maneira a integrar suas divs internas. Uma maneira fantástica de fazer isso, e nos dias de hoje muito utilizada.

.clearfix:after {

	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Cantos arredondados com CSS

Com a lenta introdução do CSS3, agora ficou fácil criar cantos arredondados em browsers modernos. Infelizmente não existe suporte para css3 no IE, mas isso vai mudar com o IE9 quando for lançado.

.round{

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Estilo rescrito

É surpreendente como algumas pessoas ainda não conhecem o !important do css, por ser uma ferramenta tão poderosa. Basicamente, o que ele faz, é que qualquer regra com !important no final, irá rescrever qualquer outra regra que esteja dando uma ordem diferente a um determinado elemento.

p{

	font-size:20px !important;
}

Font face

Font-face não ficou realmente popular até ano passado, mas está por ai desde que o IE6 ainda era um browser moderno! Ele tem melhorado o seu suporte e muito, e oferece uma boa maneira de utilizar fontes que não são seguras na web. Enquanto utiliza esse trecho de código, aproveite para economizar algum tempo utilizando o gerador de font-face: Font Squirrel Font Face Generator.

@font-face {
	font-family: 'Graublau Web';
	src: url('GraublauWeb.eot');
	src: local('☺'),
		url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Centralizar o website

Uma coisa muito comum nos layouts de hoje em dia é ter um website centralizado horizontalmente. isso pode ser facilmente alcançado.

.wrapper {

	width:960px;
	margin:0 auto;
}

Min-height no IE

Esse trecho vem para corrigir um simples, mas muito irritante bug do IE, a incompetência em implementar o min-height. O que acontece é que o IE interprete height como min-height, então como o IE não irá implementa-lo esse trecho vem para corrigir isso.

.box {

	min-height:500px;
	height:auto !important;
	height:500px;
}

Carregamento de imagem

Esse pre-loader de imagem imita um pre-loader em ajax, um circulo é mostrado enquanto o conteúdo carrega. Isso funciona muito bem em imagens grandes que demoram a ser carregadas, e é feito em css somente!

img {

	background: url(loader.gif) no−repeat 50% 50%;
}

Centralizado Verticalmente

Esse pequeno trecho permite você alinhar verticalmente o seu conteúdo sem adicionar nenhuma marcação, simplesmente atribuindo a propriedade display como table cell o que permite que você utiliza o atributo vertical-align

.container {

	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

Crie pullquotes

Primeiro, o que é pullquote? Em websites de notícias e websites com estilo de revista, você irá ver pequenos boxes de quotes adicionados aos artigos, não como blockquotes completos, mas como pequenos quotes que ficam na lateral do artigo, algumas vezes indicando opniões de pessoas ou pequenas citações. Eles são extremamente fáceis de criar você vai ficar feliz em saber, e quando usados de maneira apropriada, pode melhorar e muito a experiência do usuário

.pullquote {

	width: 300px;
	float: right;
	margin: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font: italic bold #ff0000 ;
}

Seleção do texto

Muitas pessoas não sabem mas é possível mudar a cor do texto selecionado no seu browser. É muito fácil de  fazer usando dois seletores; só tenha cuidado pra não arruinar o seu website com isso.

::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}

Imprimir page breaks

Isso aumenta também a experiência do usuário. Por exemplo, digamos que ele queira imprimir um artigo, é útil que os comentários estejam em uma página separada do artigo. Adicionando esse trecho de código na sua área de comentários, ela será impressa em uma nova página. pode ser utilizada em qualquer outra área do seu website obviamente.

.page-break{
	page-break-before:always;
}

Pensamentos e discussões

Eu tenho certeza que não consegui cobrir todos os trechos úteis de css que existem por ai, mas coloquei aqueles que acho ser os que mais beneficiam. Se você conhece outros trechos úteis de css comente aqui e traga para a mesa de discussão.

Esse artigo foi originalmente postado em 1stwebdesigner e traduzido e adaptado por Daniel Leal Freitas Veja o post original