Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Tutorial, CSS, HTML

 



                                El contenedor consta
                                   de atributos:

 

                   "div style" – elemento estilo

        "box shadow" – efecto sombra (rojo, azul...según su

                gusto y antojo)

       "border" – efecto borde: inset - color de efecto (negro...)

       "border-radius" – las esquinas

Radio de la esquina se puede especificar como un valor

 (para toda la captura)

Dos valores (2 esquinas diagonales) y cuatro esquinas (para cada esquina)

"padding" - relleno en el elemento

"background-image" - imagen de fondo (background dirección

de la imagen)

"width" - ancho del marco (se puede expresar en% o en píxeles)

 

Otros atributos:

"-Webkit-box-shadow" - para mostrar en las versiones anteriores del navegador Chrome

"-moz-box-shadow" - para mostrar en las versiones anteriores del navegador Mozilla Firefox,

"box-shadow" - que se mostrará en todos los demás navegadores.

 

http://www.03www.su/2010/2010-397.html

 

#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 bordes redondeados - border radius

Con el siguiente snippet podrás redondear los bordes de distintos elementos.

 

.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.

 

#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.

 

                 background: -webkit-gradient(linear, left top, left bottom,                        from(#74b8d7), to(#437fbc));

                   background: -moz-linear-gradient(top, #74b8d7,
                        #437fbc);

                                      Atención

                              Los códigos tiene link. 



Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article