Trucos CSS (Parte 1)

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

Utilizar fuentes de Google

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

Sólo hay que añadir 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 después agregar en la hoja de estilos CSS:

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

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve (demostración)

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

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

}

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 (demostración)

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

Hacer que el cursor se vuelva un apuntador de enlace

Si en algunos elementos con enlace, no aparece el puntero de enlace, es decir, el cursos que debería de aparecer cuando te situas encima de un enlace. Para hacer que aparezca en estos elementos solo debes añadir el siguiente código:

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

Rotar una imagen

El siguiente código CSS te permite rotar una imagen tantos grados como esribas en su función (demostración)

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

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.