Propiedades de estilo de box, layout, efectos gráficos

1. Propiedades de estilo HTML box
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 Aplicando estilos para alterar atributos de
apariencia
 Aplicando estilos para alterar efectos
gráficos
 Aplicando estilos para establecer cambios
de posición
 Usando un modelo flexible
 Usando layout de múltiples columnas

3. Aplicando estilos para alterar
atributos de apariencia
Bordes
 border-radius
 box-shadow
 border-image

4. Aplicando estilos para alterar
atributos de apariencia
border-radius
 Esquinas redondeadas
div {
border: 2px solid;
border-radius: 25px;
}

5. Aplicando estilos para alterar
atributos de apariencia
border-radius
 Diferentes valores para cada esquina:
border-radius: 10px 90px 90px 90px;
div {
width: 100px;
height: 100px;
padding: 20px;
background-color: forestgreen;
border-top-left-radius: 10px;
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
border-bottom-left-radius: 90px;
}

6. Aplicando estilos para alterar
atributos de apariencia
box-shadow
Sombras en los bordes
Los valores representan :
 Offset horizontal y Offset vertical
 El difunimado de la sombra
 El color
 inset para poner la sombra dentro los bordes
div {
box-shadow: 10px 10px 5px lightseagreen;
}
div {
box-shadow: 1px 1px 7px lightseagreen inset;
}

7. Aplicando estilos para alterar
atributos de apariencia
border-image
Usa una imágen como borde
div {
border-width: 70px 149px 55px 147px;
border-image: url('/Images/red-bird-border.png')
70 149 55 147 repeat;
}
div {
height: 200px;
padding-top: 100px;
text-align: center;
border-width: 10px 154px 12px 154px;
border-image: url(/Images/ivy-border.png)
10 154 12 154 stretch;
}

8. Aplicando estilos para alterar efectos
gráficos
background
 background-clip
 background-origin
 background-size
body {
background: url(/Images/miImagen.png);
background-size: 80px 60px;
background-repeat: no-repeat;
}

9. Aplicando estilos para alterar efectos
gráficos
opacity
img {
opacity: 0.4;
filter: alpha(opacity=40); /* IE8 y anteriores */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* IE8 y anteriores */
}

10. Aplicando estilos para alterar efectos
gráficos
Efectos de Texto
text-shadow
word-wrap
h1 {
text-shadow: 5px 5px 5px #0066ff;
}
p {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}

11. Aplicando estilos para alterar efectos
gráficos
linear-gradient
Orientación vertical:
Orientación diagonal:
Orientación horizontal:
.vertical {
background: -webkit-linear-gradient(top, white, blue);
}
.diagonal {
background: -webkit-linear-gradient(top left, yellow, red, blue);
}
.horizontal{
background: -webkit-linear-gradient(left, green, yellow, blue);
}

12. Aplicando estilos para alterar efectos
gráficos
linear-gradient
Especificando puntos de color:
.conPuntosDeColor {
background: -webkit-linear-gradient(top, red 0%,
orange 20%, yellow 80%, violet 100%);
}

13. Aplicando estilos para alterar efectos
gráficos
radial-gradient
Prefijos en cualquier estilo:
 -moz- Mozilla Firefox
 -ms- Microsoft Internet Explorer
 -webkit- Google Chrome, Safari
 -o- Opera
.radial {
background: -webkit-radial-gradient(circle, white, darkblue);
}

14. Aplicando estilos para establecer
cambios de posición
 position: static;
 position:fixed;
 position:relative;
 position:absolute;
 z-index:-1;
 El de mayor valor estará sobre el de menor
valor

15. Usando un modelo flexible
display: box;
display: -ms-flexbox;
Acomodará a los hijos en un estilo tipo float.
box-flex:1.0;
box-flex:2.0;
Repartirá los hijos en el ancho total del padre.
En este caso el segundo hijo sera dos veces lo
que el primero.

16. Usando layout de múltiples columnas
Se pueden crear multiples columnas como en
los periódicos.
 column-count
 column-gap
 column-rule
.columnas {
text-align: justify;
column-count: 3;
column-gap: 40px;
column-rule: 4px outset #336699;
}