1

IFCD0110 CONFECCIN Y PUBLICACIN DE PGINAS WEB. ETSI Minas y Energa - UPM

CSS3
Bernardo Chenlo
Qu es CSS?
Cascade Style Sheets (CSS) es un lenguaje que permite
aplicar estilos al HTML
HTML describe la estructura de la pgina y CSS su
presentacin
 3

PROPIEDADES CSS3
Nuevas propiedades totalmente implementadas en
CSS3
 4

Propiedades CSS3 totalmente implementadas

border-radius
text-shadow
box-shadow
multiple backgrounds images
opacity
RGBA
 5

border-radius
Redondea las esquinas de un elemento segn el
radio especificado
border-radius: radio
border-radius: radio-ul radio-ur radio-dl radio-dr

.redondo {
border-radius: 10px;
}
Prctica: border-radius
1. Implementar la siguiente figura:
1. Pista.-> border: 3px solid #BADA55;
2. Convertir los cuadrados en crculos
1. Pista.-> border-radius: 50%;
 7

text-shadow
Aade sombra a un texto, pudiendo indicar la direccin, el
desenfoque y el color.
text-shadow: h-shadow v-shadow blur color;
h-shadow: posicin horizontal comienzo de sombra
v-shadow: posicin vertical comienzo de sombra
blur: desenfoque de la sombra
color: color de la sombra

#titulo {
text-shadow: 5px 5px 10px red;
}
Prctica: text-shadow
1. Maqueta el primer texto:
1. Pista.-> text-shadow: 5px 5px 10px #202020;
2. Maqueta el segundo texto
1. Pista.-> color: #bc2e1e;
 9

box-shadow
Aade sombra a una caja, pudiendo indicar la
direccin, el desenfoque y el color.
Sintaxis igual a text-shadow

.sombreado {
box-shadow:50px 50px 50px 10px black;
}
Prctica: box-shadow
1. Implementar la siguiente figura:
1. Pista.-> box-shadow: 5px 5px 5px #000;
 11

multiple image backgrounds

Permite aadir mltiples imgenes de fondo al
mismo elemento, separndolas con comas.

body {
background: url(photo1.png) no-repeat top left,
url(photo2.png) repeat-x bottom left,
url(photo3.png) repeat-y top right;
}

Ejemplo: http://codepen.io/irec/pen/OPVWZv
Prctica: multiple image backgrounds
1. Implementar la siguiente figura:
 13

opacity
Define cmo de opaco es un elemento:
1 significa totalmente opaco
0 significa totalmente transparente

#arriba {
opacity: 1.0;
}
#abajo {
opacity: 0.4;
}
 14

rgba
No es una propiedad, si no un nuevo modelo
para definir colores.
Aade un nuevo valor para indicar la
opacidad con un decimal

#n1 { background: rgba(0, 0, 255, 0.2); }

#n2 { background: rgba(0, 0, 255, 0.4); }
#n3 { background: rgba(0, 0, 255, 0.6); }
#n4 { background: rgba(0, 0, 255, 0.8); }
#n5 { background: rgba(0, 0, 255, 1); }
 15

EL ETERNO PROBLEMA
DE LOS NAVEGADORES
Mi pgina se ver igual en todos los navegadores?
Usar las propiedades CSS3 con
seguridad
Algunas propiedades de CSS3 no estn soportadas completamente
por algunas versiones de algunos navegadores.
Para utilizar estas propiedas con la seguridad de que cada navegador
va a interpretar correctamente el estilo, utilizamos prefijos, con el
nombre del navegador, delante de la propiedad.

Por ejemplo para la propiedad: transition-duration: 2s;

-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
 17

Prefix vendors
Se tiene la idea de que CSS3 sigue en desarrollo y que no est
estandarizado al 100% por W3C.
Hay ciertas propiedades con las que podemos tener problemas si
no indicamos bien el navegador en el que se visualizar la
propiedad mediante prefijos:

Navegador Nombre

Chrome -webkit-

Safari -webkit-

Firefox -moz-

Opera -o-

Internet Explorer -ms-