19 tips y trucos para CSS

El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños.

Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web.

Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

Demostración

Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:

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

Demostración

Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:

h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}

Demostración

Rotar una imagen

Este Código CSS te permite rotar una imagen los grados que gustes:

img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}

Demostración

Mover 1px el enlace al hacer clic

Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:

a:active {
position: relative;
top: 1px;
}

Demostración

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):

/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Hacer que el cursor se vuelva un apuntador de enlace

Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}

Quitar la linea de color que rodea los elementos input

Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Crear un efecto giratorio y de zoom en las imágenes

Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Demostración

Hacks de CSS dependiendo del navegador

Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:

/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }

Animar una lista de enlaces

Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:

#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
padding-left: 10px;
}

Demostración

Transparencia / Opacidad en todos los navegadores

Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Demostración

Estilo del enlace dependiendo de una palabra predefinida

Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:

a[href*="trazos"] {
color: #39486c;
}

Demostración

Estilo del enlace dependiendo de extensión del archivo enlazado

Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:

a[href$=".jpg"] {
color: red;
}

Demostración

Utilizar fuentes de Google

Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:

Debes agregar el código que te genera la página de Webfonts entre las etiquetas <head> y </head>:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>

y luego este en el archivo de tus estilos CSS:

h1 {
font-family: 'Ubuntu', sans-serif;
}

Demostración

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve:

body {
background: #222222;
color: #131313;
font-size: 100px;
}

p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;

}

Demostración

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Solo debes poner esto en donde quieras que aparezcan los tabs:

<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>

<div class="content">
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>

<div class="content">
<p>Aquí va algún contenido para el tab 2</p>

<img src="http://lorempixum.com/200/100/technics/">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>

<div class="content">
<p>Aquí va algún contenido para el tab 3</p>

<img src="http://lorempixum.com/200/100/nightlife/">
</div>
</div>

</div>

y luego poner esto en el archivo de estilos CSS:

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Demostración

Infografía

• BlueFaqs.
• David Walsh.
• Six Revisions.
• Design Shack.
• Nettuts+.
• Design your Way.
• 1st Web Designer.
• Web Expedition 18.
• CSS-Tricks.