Trucos CSS (Parte 3)

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

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

Un truco muy común entre diseñadores es el de utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, para 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 */
}

Eliminar la linea de color que rodea los elementos input

Los navegadores WebKit (Safari, Chrome) tienen por defecto que los elementos input de un formulario cambien de color en el borde cuando se situa el ratón sobre el elemento. Para evitar esto copia y pega el siguiente código CSS:

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

Animar una lista de enlaces

Hay ocasiones en las que no es posible utilizar jQuery en nuesto proyecto, limitando mucho los “efectos” de nuestra página. Con el siguiente código, conseguirás que al pasar el cursor por encima de cada enlace de una lista, cada uno de ellos se mueve un poco a la derecha: (demostración)

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

#listaanimada li a:hover {
 padding-left: 20px;
}

Hacks CSS dependiendo del navegador

Para hacer que los estilos se vena correctamente en todos los navegadores, 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: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

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

Estilo del enlace dependiendo de extensión del archivo enlazado

Con el siguiente código puedes poner diferentes estilos cuando enlazas los archivos a los que previamente le apliques los estilos: .jpg, .pdf, .zip, etc. (demostración)

a[href$=".jpg"] { 
 color: red; 
} 
a[href$=".pdf"] { 
 color: grey; 
} 
a[href$=".zip"] { 
 color: green; 
}

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.