Howto: Efeitos interessantes em CSS

Voltando a série HowTo, gostaria de dedicar este post ao ótimo artigo que li no excelente site StylizedWeb. Com certeza uma visita mais que recomendada para todos que trabalham com desenvolvimento web, ainda mais se você for a pessoa responsável pelo “FrontEnd – essa é velha” da aplicação.

01. Bordas arredondadas sem imagens

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>

<!– aqui vai o conteúdo –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

02. Lista ordenada estilizada

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

03. Formulários sem tabelas

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

04. Citação dupla

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

05. Texto com efeito gradient

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

06. Centralizar verticalmente usando line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

07. Bordas arredondadas com imagens

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>

TEXTO

<div class=”roundbottom”>
<img src=”bl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

08. Múltiplas classes para um elemento

<img src=”image.gif” class=”class1 class2″ alt=”” />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

09. Centralizar horizontalmente

<div id=”container”></div>

#container {
margin:0px auto;
}

10. Letras capitulares

<p class=”introduction”> Este parágrafo tem a classe “introduction”. Se o seu navegador suporta a pseudo-classe “first-letter”, a primeira letra estará em estilo capitular. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Prevenir quebras de linha em links

a{
white-space:nowrap;
}

12. Mostrar barras de rolagem do Firefox, removê-las de áreas de texto no IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

13. Div Centralizada

Para posicionar uma div no centro da tela basta usar este código:

#centro {
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
}

Referência:Most used CSS tricks.