1. No category

IFCD0110 – CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM
CSS3
Bernardo Chenlo
1
¿Qué es CSS?
• Cascade Style Sheets (CSS) es un lenguaje que permite
aplicar estilos al HTML
• HTML describe la estructura de la página y CSS su
presentación
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 según el
radio especificado
• border-radius: radio
• border-radius: radio-ul radio-ur radio-dl radio-dr
.redondo {
border-radius: 10px;
}
Práctica: border-radius
1. Implementar la siguiente figura:
1. Pista.-> border: 3px solid #BADA55;
2. Convertir los cuadrados en círculos
1. Pista.-> border-radius: 50%;
7
text-shadow
• Añade sombra a un texto, pudiendo indicar la dirección, el
desenfoque y el color.
• text-shadow: h-shadow v-shadow blur color;
• h-shadow: posición horizontal comienzo de sombra
• v-shadow: posición vertical comienzo de sombra
• blur: desenfoque de la sombra
• color: color de la sombra
#titulo {
text-shadow: 5px 5px 10px red;
}
Práctica: 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
• Añade sombra a una caja, pudiendo indicar la
dirección, el desenfoque y el color.
• Sintaxis igual a text-shadow
.sombreado {
box-shadow:50px 50px 50px 10px black;
}
Práctica: box-shadow
1. Implementar la siguiente figura:
1. Pista.-> box-shadow: 5px 5px 5px #000;
11
multiple image backgrounds
• Permite añadir múltiples imágenes de fondo al
mismo elemento, separándolas 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
Práctica: multiple image backgrounds
1. Implementar la siguiente figura:
13
opacity
• Define cómo 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.
• Añade 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 página se verá igual en todos los navegadores?
Usar las propiedades CSS3 con
seguridad
• Algunas propiedades de CSS3 no están 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-