Juan Manuel 22 de mayo de 2008 a las 12.35
   Imprimir artículo
elWebmaster.com

Los 12 trucos de CSS más usados… y necesarios


Los 12 trucos de CSS más usados… y necesariosAhora todo se maqueta y/o diseña con CSS. Los potentes estilos reducen el peso de la página, permiten que el HTML se centre en un sentido “semántico” y se posicione mejor en los buscadores, asĂ­ como tambiĂ©n nos permiten rediseñar un sitio entero en dos patadas.

Por eso son tan útiles esos pequeños trucos de bolsillo que uno suele ir recolectando por ahí, para echar mano en un momento de necesidad. Con gusto te dejo esta lista de 12 trucos de CSS que a mi modo de ver son muy usados y también muy necesitados.

12 trucos de CSS para el diseño de tu sitio web

1. Esquinas redondeadas (sin usar imágenes, obvio):

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
</b>
<!–content goes here –>
<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}

Los 12 trucos de CSS más usados… y necesarios

2. Estilos para una lista ordenada:


<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;}

Los 12 trucos de CSS más usados… y necesarios

3. Crear formularios (sin usar tablas):

<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;
}

Los 12 trucos de CSS más usados… y necesarios

4. Citas dobles (double blockquote):

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;
}

Los 12 trucos de CSS más usados… y necesarios

5. Efecto de texto con gradiente:

<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]–>

Los 12 trucos de CSS más usados… y necesarios

6. Centrado vertical con line-height:

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

<p>Content here</p>

Los 12 trucos de CSS más usados… y necesarios

7. Esquinas redondeadas (con imágenes):

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

CONTENT

<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;
}

Los 12 trucos de CSS más usados… y necesarios

8. Nombre de clase mĂşltiple:

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

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

9. Centrado horizontal:

Los 12 trucos de CSS más usados… y necesarios

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

#container {
margin:0px auto;
}

10. Letras capitales:

<p class=”introduction”> This paragraph has the class “introduction”.
If your browser supports the pseudo-class “first-letter”,
the first letter will be a drop-cap. </p>

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

Los 12 trucos de CSS más usados… y necesarios

11. Evitar saltos de lĂ­nea en links y que el contenido extenso rompa el sitio:

a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12. Mostrar la barra de scroll en Firefox/ Eliminar la de IE en el textarea:

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

textarea{
overflow:auto;
}

Espero que te sean de utilidad ¡No salgas de casa sin ellos! ^_^

Fuente: StylizedWeb


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (19)

  1. Linkmk dice:

    WOW perfectos, auqnue no se implementarlos muy bien, sera cosa de investigar un poquito mas,

  2. BrianPr dice:

    Demasiados Ăştiles, me encantĂł la del formulario y clase mĂşltiple, gracias ^^
    Estrellita en gReader :P.

  3. Hugo Ruiz dice:

    De hecho, son y serán de mucha utilidad. Gracias

  4. Roylan Suarez dice:

    Waouuuuuu

    me encanto lo de las esquinas redondeadas sin imagenes, nunca pense que fuera posible

    salu2

  5. Ricardo0o dice:

    perfectos.!!

    justo lo que buscaba

    :D

  6. Pedro Lumbre Farroñay dice:

    Muy buenos… gracias se pasaron!!!!

  7. amilcar dice:

    me gusto los avances sigan asi me gustaria aprender mas sobre los avances tecnologiscos

  8. Angellie dice:

    Muy bueno, reputable…

  9. ROGER TORRES REATEGUI dice:

    De bastante ayuda y resulta muy interesante conocer tantas cosas a través de ustedes. Gracias por pensar en todos.

  10. karen waldropp dice:

    Magnifico!!! realmente en la uni los estoy necesitando mucho, gracias por ese aporte!

  11. Fernando dice:

    Muchas gracias

  12. Leandro Javier Aude dice:

    Como siempre,la revista otorga informacion util e interesante,y este articulo no es la excepcion.Gracias a Juan Manuel ahora puedo venderle esta informacion a los interesados en aprender diseño web (que no lean la revista,por supuesto…)

  13. Juan Alzate dice:

    Muy bien, me ayuda mucho con mis plantillas del CMS, gracias.

  14. Carmen Mendoza dice:

    Muy bien, es una informaciĂłn muy interesante y valiosa

  15. Silvia Martinez dice:

    La verdad, CSS me sorprende cada vez mas.
    Me fascina!!!

  16. erick dice:

    que belleza esta bueno ok

  17. Jorge dice:

    Muy bien, me gustaron los primeros, gracias por compartir amigo xD

  18. williams perera dice:

    esta muy bien amigo me fue muy util gracias

  19. andres dice:

    buena info

  20. Ignacio dice:

    Cuanto tiempo llevaba buscando esta informacion, gracias por el post.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder