CSS Avanzado

CSS Avanzado
Shortand
Propiedades shorthand
• Hay propiedades en CSS 2.1 que son
especiales.
– permiten asignarles varios valores
simultáneamente
• font
• margin
• padding
• border
• background
• list-style
• utilizando shortand podemos “abreviar”
nuestro código css
Layout y haslayout en IE
Layout
• Se conoce como layout la
distribución de los elementos en la
página.
• La labor del diseñador es crear el
layout correspondiente a su página
usando divs y css

• Podemos encontrarnos muchos
layouts ya creados
– http://layouts.ironmyers.com/
• nos permite seleccionar el layout
deseado y descargarnos el código
haslayout
• Internet Explorer (mucho la versión 6
y algo menos la 7 y 8) tiene
muchos errores al aplicar css

Solo para Explorer
• Internet Explorer para mostrar los
elementos de una página:
– Los elementos cuyo tamaño y
posición dependen de su elemento
contenedor.
• la mayoría de elementos.
• body determina su tamaño y posición
– Los elementos que establecen su
propio tamaño y posición.
• son los elementos que tienen su
propio layout
Elementos que layout para
IE
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>,
<textarea>, <fieldset>, <legend>

<iframe>, <embed>, <object>,
<applet>
<marquee>
• Para quitar el layout al elemento y que
se comporte por defecto
– debemos quitar las propiedades
alteradas en ese elemento por IE
• width: auto, height: auto
• max-width: auto, min-width: auto
• position: static
• float: none
• overflow: visible
• zoom: normal
• writing-mode: lr-tb
Trucos con IE
• Esta característica ha permitido desde
siempre crear trucos para “evitar”
errores de comportamiento en IE
– http://
www.communitymx.com/content/article.cfm
– http://
www.satzansatz.de/cssd/onhavinglayout.ht
– http://msdn.microsoft.com/en-us/library/bb2
).aspx

Limpiar floats
Qué es float
• La principal característica de los
elementos posicionados de forma
flotante mediante la propiedad float
es que desaparecen del flujo
normal del documento.
– algunos elementos se salen de su
elemento contenedor
Solución
• La solución desde siempre ha sido:
• añadir un elemento invisible después
de todos los elementos
posicionados de forma flotante
para forzar a que el elemento
contenedor tenga la altura
suficiente
• Los elementos invisibles más
utilizados son <div>, <br> y <p>.
Ejemplo de CSS
#contenedor {
border: thick solid #000;
}
#izquierda {
float: left;
width: 40%;
}
#derecha {
float: right;
width: 40%;
}
Ejemplo
<div id="contenedor">
<div id="izquierda">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

Duis
molestie turpis vitae ante.</div>
<div id="derecha">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

Nulla
bibendum mi non lacus.</div>
<div style="clear: both"></div>
</div>
• Esta solución es buena pero hay
otras posibilidades
– Utilizar la propiedad overflow de CSS
sobre el elemento contenedor.
– Se debe aplicar esta nueva regla
 #contenedor {
 border: thick solid #000;
 overflow: hidden;
 }
• El contenedor encierra
correctamente a los dos elementos
<div> interiores.
• NO es necesario añadir ningún
elemento adicional en el código
HTML.
• Podemos usar hidden o auto.
– funciona igual
Altura de elementos
• El diseño hace años se hacía con
tablas
– todas las columnas con la misma
altura
• Hoy se utilizan divs
– pero NO podemos poner la misma
altura a todas las cajas pq NO
sabemos qué contenido van a tener
• Hay varias soluciones para que dos
elementos tengan la misma altura
usando css
Solución 1 – engañar al
navegador
• Añadir un espacio de relleno inferior
(padding-bottom) muy grande a
todas las columnas y después
añadirles un margen inferior
negativo (margin-bottom) del
mismo tamaño.
#contenedor {
overflow: hidden;
}
#columna1, #columna2, #columna3 {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
Problemas de la solución 1
• Se pueden producir errores al
imprimir la página con el
navegador Internet Explorer.
• Si se utilizan enlaces de tipo ancla en
cualquier columna, al pulsar sobre
el enlace las columnas se
desplazan de forma ascendente y
desaparecen de la página.
Solución 2 – engañar al
usuario
• columns faux
• Establecer una imagen de fondo
repetida verticalmente en el
elemento contenedor.
• Como el contenedor es tan alto como
la columna más alta, su imagen de
fondo da la sensación de que todas
las columnas son de la misma
altura.
Problemas de solución 2
• Sólo se puede emplear cuando la
estructura de la página es de
anchura fija, es decir, cuando su
diseño no es líquido y no se adapta
a la anchura de la ventana del
navegador.
Solución 3 - correcta
• Uso avanzado de la propiedad
display de CSS
• Debemos añadir una caja más en
nuestro marcado

<div id="contenedor">
<div id="contenidos">
<div id="columna1"></div>
</div>
</div>
• Utilizamos la propiedad display de
css para mostrar los elementos
como si fueran una tabla de datos
#contenedor {
display: table;
}
#contenidos {
display: table-row;
}
#columna1, #columna2, #columna3 {
display: table-cell;
}
• La propiedad display
– permite que cualquier elemento se
comporte como una tabla, fila o
celda.
– los div que forman las columnas de la
página se comportan como tablas.
• el navegador entonces, las muestra
con la misma altura
Problema de solución 3
• IE 7 y anteriores NO soportan este
aspecto de la propiedad display
Sombras en CSS
• En CSS 2.1 NO se pueden aplicar
sombras a los elementos.
• En CSS 3 tenemos la propiedad blx-
shadow para crear las sombras de
tipo drop shadow.
• .elemento {
• box-shadow: 2px 2px 5px #999;
• }
•
• no todos los navegadores soportan este
estándar css 3
• Safari 3 incluye la propiedad con el nombre
-webkit-box-shadow
• Firefox 3.1 la incluye con el nombre -moz-
box-shadow.
• la sintaxis de box-shadow es compleja
– box-shadow: <medida> <medida> <medida>? <medida>? <color>
–
• primera medida es obligatoria:
– indica el desplazamiento horizontal de la sombra.
• Si el valor es positivo, la sombra se desplaza hacia la derecha
• si es negativo, se desplaza hacia la izquierda.
• segunda medida también es obligatoria:
– indica el desplazamiento vertical de la sombra.
• Si el valor es positivo, la sombra se desplaza hacia abajo
• si es negativo, se desplaza hacia arriba.
• tercera medida es opcional:
– indica el radio utilizado para difuminar la sombra.
• Cuanto más grande sea su valor, más borrosa aparece la sombra.
• Si se utiliza el valor 0, la sombra se muestra como un color sólido.
• cuarta medida también es opcional:
– indica el radio con el que se expande la sombra.
– Si se establece un valor positivo, la sombra se expande en todas
direcciones.
– Si se utiliza un valor negativo, la sombra se comprime.
• ▪ El color indicado es directamente el color de la sombra que se
• Internet Explorer dispone de su
propio mecanismo para crear
sombras.
• La solución se basa en el uso de los
filtros, un mecanismo que no forma
parte del estándar de CSS y que
permiten aplicar operaciones
complejas a los elementos de la
página.
• http://
.elemento {
-webkit-box-shadow: 2px 2px 5px
#999;
-moz-box-shadow: 2px 2px 5px #999;
filter: shadow(color=#999999,
direction=135, strength=2);
}
• Vemos que box-shadow NO se puede
aplicar hoy.
• Podemos resolverlo usando una
imagen que simule la sombra a
mostrar
Pasos para aplicar sombras con
imágenes
• Se crea una imagen del mismo tamaño que la
imagen original y cuyo aspecto sea el de la
sombra que se quiere mostrar.
• Se añade un espacio de relleno a la imagen
original en la posición en la que se quiere
mostrar la sombra.
– Si por ejemplo se quiere mostrar una sombra en
la esquina inferior derecha, se añade padding-
right y padding-bottom.
• Utilizando la propiedad background, se añade la
imagen de la sombra como imagen de fondo
de la imagen original.
• La imagen de fondo se coloca en la posición en
la que se quiere mostrar la sombra.
• En el caso de la sombra inferior derecha, la
posición de la imagen de fondo es bottom
img {
background: url("imagenes/sombra.png")
no-repeat bottom right;

padding-right: 10px;
padding-bottom: 10px;
}
Problemas
• demasiadas imágenes
• si la imagen de sombra es grande no
quedan los bordes bien definidos
• soluciones basadas en imágenes
funcionan en cualquier navegador
pero “complican” el marcado con el
diseño
Soluciones
• http://www.cssdesignpatterns.com/Chapter
%
20IMAGES/Shadowed%20Image/example
– usa tres imágenes para sombra
• http://
theshapeofdays.com/2005/11/29/my-con
– usa PhotoShop
Transparencias
• CSS 2.1 no incluye ninguna
propiedad para controlar la
opacidad de los elementos de la
página.
• CSS 3 incluye una propiedad llamada
opacity
– los navegadores que más se
esfuerzan en cumplir los estándares
(Firefox, Safari y Opera) ya incluyen
la propiedad opacity en sus últimas
versiones
• El valor de la propiedad opacity se
establece mediante un número
decimal comprendido entre 0.0 y
1.0.
– 0.0 es la máxima transparencia
• el elemento es invisible
– 1.0 se corresponde con la máxima
opacidad
• elemento es completamente visible
#segundo, #tercero {
opacity: 0.5;
}
#primero {
background-color: blue;
}
#segundo {
background-color: red;
}
#tercero {
background-color: green;
}
Filtros en IE
• En IE podemos aplicar sus filtros
– http://msdn.microsoft.com/en-us/library/m
–
• #segundo, #tercero {
• filter: alpha(opacity=50);
• }
Texto por imágenes
Tipografías en Web
• Las tipografías deben estar
instaladas en el sistema operativos
del cliente
– en Web estamos limitados porque NO
puedes incrustar tipografías usando
CSS
• Sistemas operativos tipo Windows:
Arial, Verdana, Tahoma, Courier New, Times New
Roman, Georgia
Solución
• uso de la directiva @font-face.
– disponible en css 2 y retirada.
– ahora está otra vez disponible en css
3
directiva @font-face
• Describe las fuentes que utiliza una
página web.
– se indica la dirección o URL desde la
que el navegador se puede
descargar la fuente utilizada si el
usuario no dispone de ella
@font-face {
font-family: "Fuente propia";
src:
url("http://www.ejemplo.com/fuentes/fuente_propia.
ttf");
}
y luego se aplica

• h1 {
• font-family: "Fuente propia", sans-serif;
• }
Solución FIR (Fahrner Image
Replacement)
• usar imágenes en lugar de texto
<h1><span>Lorem ipsum dolor sit
amet</span></h1>
h1 {
width: 450px;
height: 100px;
background: #FFF url("/imagenes/titular.png")
no-repeat top left;

}
h1 span {
display: none;
}
Problema
• es muy sencillo pero
– aumenta el peso por la imagen
• tampoco tanto
– el texto oculto mediante display no lo
leen correctamente los dispositivos
lectores de páginas que utilizan las
personas con discapacidades
visuales.
Solución 2
• La evolución de la técnica anterior
consiste en reemplazar la
propiedad display por text-indent

• Ponemos un valor negativo muy

grande en la propiedad text-indent
del elemento que se quiere
reemplazar
– el texto no se oculta pero se desplaza
fuera de la pantalla.
<h1>Lorem ipsum dolor sit
amet</h1>
h1 {
width: 450px;
height: 100px;
background: #FFF
url("/imagenes/titular.png") no-repeat
top left;
text-indent: -5000px;
}
Otras soluciones
• http://www.mezzoblue.com/tests/revised-im
• La solución definitiva de todos los
problemas de las soluciones basadas
en CSS es la técnica sIFR
(http://www.mikeindustries.com/blog/s
ifr/) (Scalable Inman Flash
Replacement), que combina CSS,
JavaScript y Flash para mostrar
correctamente cualquier texto con
cualquier tipografía deseada.
Esquinas redondeadas
• CSS 2.1 obliga a que todos los bordes
de los elementos sean
rectangulares.
• CSS 3 incluye varias propiedades
para definir bordes redondeados.
– border-radius
• establece la misma curvatura en todas
las esquinas
– border-top-right-radius, border-
bottom-right-radius, border-bottom-
left-radius, border-top-left-radius
• permite establecer la curvatura de
div {
-webkit-border-radius: 5px 10px; /*
Safari */
-moz-border-radius: 5px 10px; /*
Firefox */
}
Soluciones
• Soluciones basadas en CSS y que no
utilizan imágenes.
– añadir varios elementos cuya longitud
disminuye progresivamente para
crear un perfil curvo
– se engaña al usuario con la
“sensación” de curvo
• Soluciones basadas en CSS y que
utilizan imágenes.
• Soluciones basadas en JavaScript.
• http://www.roundedcornr.com/
– permite generar código para esquinas
redondeadas
• Podemos usar esquinas redondeadas
complejas a partir de imágenes
– CSS 3 dispone de la propiedad border-
image
• permite utilizar cualquier imagen
como borde de un elemento.
Soluciones basadas en JS
• http://methvin.com/jquery/jq-corner.html
• http://www.atblabs.com/jquery.corners.ht
• http://www.smileycat.com/miaow/archive
•
Rollovers y sprites
Tiempo de carga de la
página
• Generación dinámica (20%)
• descarga de imágenes, estilos, js…
(80%)

Ahorrar tiempo en descarga
imágenes
• En una página tienes 20 imágenes.
– crear una imagen grande con las 20
fotos individuales
– usar propiedades CSS de las
imágenes de fondo para mostrar
cada imagen
–
– http://www.alistapart.com/articles/sprites

• si tenemos una página con 5 fotos, el
navegador debe pedir 5 veces las
fotos
– ineficiente

• Usamos la técnica de sprites css
– una sola petición al servidor
– usamos las propiedades css
• background-image
• background-position
<h3>Previsiones
meteorológicas</h3>
<p id="localidad1">Localidad 1:
soleado, máx: 35º, mín: 23º</p>

nublado, máx: 25º, mín: 13º</p>

<p id="localidad3">Localidad 3: muy
nublado, máx: 22º, mín: 10º</p>

tormentas, máx: 23º, mín: 11º</p>

#localidad1, #localidad2, #localidad3, #localidad4 {
padding-left: 38px;
height: 32px;
line-height: 32px;
background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
}
#localidad1 {
background-position: 0 0;
}
#localidad2 {
background-position: 0 -32px;
}
#localidad3 {
• Y si las imágenes son laterales?

– se añade una imagen transparente de

1px x 1px a todos los elementos
mediante una etiqueta <img>.
– con CSS se establece una imagen de
fondo a cada elemento <img> y se
limita su tamaño para que no deje
ver las imágenes que se encuentran
cerca
Problema – imágenes
laterales
<h3>Previsiones meteorológicas</h3>
<p id="localidad1"><img src="imagenes/pixel.gif" />
Localidad 1: soleado, máx: 35º,
mín: 23º</p>

Localidad 2: nublado, máx: 25º,
mín: 13º</p>

Localidad 3: muy nublado, máx: 22º,
mín: 10º</p>

Localidad 4: tormentas, máx: 23º,
mín: 11º</p>
#localidad1 img, #localidad2 img, #localidad3 img, #localidad4 img
{
height: 32px;
width: 32px;
background-image: url("imagenes/sprite2.png");
background-repeat: no-repeat;
vertical-align: middle;
}
#localidad1 img {
background-position: 0 0;
}
background-position: -32px 0;
}
}
• http://tango.freedesktop.org/
– muestra en una sola imagen todos los
iconos
• 241 iconos y pesa todo 42 kb
Texto - Tamaño
• uso de em, ex y % para actualizar el
tamaño del texto a toda la página
Texto con sombra
h1 {
color: #000;
text-shadow: #555 2px 2px 3px;
}
 *usando CSS3

CSS Avanzado

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Avanzado

Cargado por

Copyright:

Formatos disponibles

CSS Avanzado

<input>, <button>, <select>,

<textarea>, <fieldset>, <legend>

sit amet, consectetuer adipiscing elit.

<div id="derecha">Lorem ipsum dolor

sit amet, consectetuer adipiscing elit.

<div style="clear: both"></div>

#columna1, #columna2, #columna3 {

#columna1, #columna2, #columna3 {

no-repeat bottom right;

background: #FFF url("/imagenes/titular.png")

no-repeat top left;

• Ponemos un valor negativo muy

soleado, máx: 35º, mín: 23º</p>

nublado, máx: 25º, mín: 13º</p>

nublado, máx: 22º, mín: 10º</p>

tormentas, máx: 23º, mín: 11º</p>

– se añade una imagen transparente de

<p id="localidad2"><img src="imagenes/pixel.gif" />

<p id="localidad3"><img src="imagenes/pixel.gif" />

<p id="localidad4"><img src="imagenes/pixel.gif" />

text-shadow: #555 2px 2px 3px;

También podría gustarte