Tu vida mas feliz con css

Agregar sombra al texto: .text-shadow
Puede ser interesante para que un texto destaque sobre el resto.

1
2
3
.text-shadow {
text-shadow: 2px 2px 4px #666;
}

 

Añadir un borde basado en una imagen – border-image
Puedes crear cualquier tipo de borde para cualquier objeto u objetos de tu sitio web usando el siguiente fragmento de código. Tan sólo debes proporcionar tu propia imagen de “border.png” y personalizar el uso de la propiedad border-image.

1
2
3
4
5
6
#border-image-style {
border-width:15px;
/* Existen 3 tipos de bordes: repetido, redondeado o estirado (repeat / round / stretch) */
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image:url(border.png) 30 30 stretch;
}

Añadir sombras a imágenes – box-shadow
Ayuda a que tus bordes e imágenes destaquen más respecto al fondo.

1
2
3
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

Añadir bordes redondeados – border radius
Con el siguiente snippet podrás redondear los bordes de distintos elementos.
1
2
3
4
5
6
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Adición de esquinas redondeadas de forma individual – border-radius
Puedes elegir también cuál de las 4 esquinas se redondeará o tener una plantilla para redondear cada esquina.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Bottom_Left {
height: 65px;
width:160px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
}
#Top_Right {
height: 65px;
width:160px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
}
#Top_Left {
height: 65px;
width:160px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
}
?>

Añadir un gradiente – linear-gradient
Con CSS3, ya no se necesita utilizar imágenes para crear gradientes. Puedes usar CSS para añadir un gradiente al fondo de un elemento. Cambia los valores de color hexadecimal (“74b8d7″ y “437fbc”) por los colores del gradiente que quieres.
1
2
3
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top, #74b8d7, #437fbc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

Centrar horizontalmente tu sitio web
En los días de pantallas panorámicas de alta resolución, es molesto visitar sitios web que están alineados a la izquierda.
1
2
3
4
.wrapper {
width:960px;
margin:auto;
}

Centrar verticalmente determinados contenidos
El siguiente fragmento de código centra verticalmente el contenido que se encuentre dentro del elemento con esta clase.
1
2
3
4
5
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

An error has occurred. Please try again later.

1
-- ¿Sabes algun otro? Compartelo con nosotros

An error has occurred. Please try again later.


¿ Te Gusto ? Comenta y compartelo!