CSS3

Tecnologías Web de Cliente

CSS3

Departamento de Ingeniería de Sistemas Telemáticos
http://moodle.dit.upm.es

Índice
●
Introducción
●
Bordes
●
Fondos
●
Opacidad
●
Texto
●
Fuentes
●
Columnas
●
Transiciones
CSS3 2

La evolución de CSS

CSS3 3

¿Qué trae de nuevo CSS3?
●
Más etiquetas!!
●
Para poder personalizar mejor:
– Bordes
– Fondos
– Colores
– Texto (y Fuentes!!)
– Interfaz
– Columnas
– Animación
CSS3 4

Prefijos de vendedores (I)
●
Como la especificación es leeeenta, hay
prefijos para asegurar que un navegador la
soporta aunque cambie la propiedad en la
especificación final:
– -webkit- (Webkit / Safari / Chrome)
– -moz- (Firefox)
– -ms- (MS Explorer)
– -o- (Opera)

CSS3 5

Prefijos de vendedores (II)
●
Ejemplo

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;d
}

Cada navegador
Poner la última Podemos generar las
lee la sintaxis que
propiedad sin 'variantes' en webs:
entiende e ignora
prefijo http://www.css3generator.com
el resto

CSS3 6

Bordes
●
Bordes redondeados: border-radius
●
Bordes con sombra: box-shadow
●
Bordes con imagen: border-image

CSS3 7

Bordes redondeados
●
Propiedad: border-radius

Probar: http://jsfiddle.net/cif2cif/wrez7/9/

CSS3 8

Bordes con sombra
●
Propiedad box-shadow

Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/

CSS3 9

Bordes con imagen
●
Formato: border-image: source slice width outset repeat
●
Ej. border-image: url('b1.gif') 5% 5% 5% 5% 10px stretch stretch
●
Valor por defecto: none 100% 1 0 stretch
●
border-image-source: url(imagen)
●
border-image-slice: espacio de la imagen que será visible como borde en los cuatro
lados (top, right, bottom, left)
●
border-image-width: ancho del borde
●
border-image-outset: lo que la imagen se extiende más allá del borde. Puede ser una
longitud o un número (el número de veces del ancho). Podemos poner 4 valores (top,
…) o uno y se toman el resto como iguales (experimental)
●
border-image-repeat: cómo escalar los lados izdo/decho y los topes (superior/inferior).
Tiene tres valores posibles:
– strech (estirar) – la imagen se estira para rellenar el árapor defecto
– repeat (repetir) – la imagen se repite para rellenar el área
– round (redondear) – la image se repite. Si no puede rellenarse con un número entero de
piezas, se reesca la imagen para rellenarla.
http://www.emenia.es/utilizando-css3-hoy-4-border-image/
CSS3 10

Ej. Bordes con imagen

http://jsfiddle.net/cif2cif/8qTVm/1/

http://jsfiddle.net/cif2cif/8qTVm/1/

CSS3 11

background-size
●
Tamaño de la imagen original:
– background-size: auto auto /* ancho alto */
●
Puedo poner tamaños fijos o relativos
(120px o 10%)
Ej. background-size: auto 25%
●

25%
height

http://www.css3.info/preview/background-size/
CSS3 12

background-size
●
Valor contain: la figura 'cabe' como fondo, y
no rellena la parte que no cabe (ancho o
alto)
●
Valor cover: la figura se recorta para cubrir
todo el fondo

CSS3 13

Background-size: contain

CSS3 14

background-size: contain

Redimensiono la
pantalla y se ajusta al
contenido

CSS3 15

background-origin y
backgroud-clip
●
background-origin: si la posicion del
background es: border-box (por defecto),
padding-box o content-box
●
background-clip: si el background se mete
en el borde (border-box, por defecto),
padding-box o content-box

CSS3 17

Ejemplo background-origin /
background-clip
background-origin

background-clip: border-box

background-clip: padding-box

CSS3 18

Múltiples fondos
●
Podemos definir varias capas como fondo
●
Definimos los fondos con comas, y damos
valores a cada capa con comas
●
Recuerda al z-index

CSS3 19

Varios fondos...

CSS3 20

Ejemplo varios fondos
http://jsfiddle.net/cif2cif/CrNng/

CSS3 21

Opacidad
●
CSS3 ya incluye opacity [0-1]; 0 =
transparente; 1 = opaco

CSS3 22

Efectos de texto: text-shadow
●
text-shadow h-shadow v-shadow blur color
– h-shadow: offset horizontal de sombra
– v-shadow: offset vertical de sombra
– blur: radio de la sombra
– color de la sombra (opcional)

CSS3 23

Varias sombras

CSS3 24

text-overflow
●
text-overflow: permite recortar párrafos. Dos valores
posibles: clip (recorta) o ellipsis (recorta y pone
puntos suspensivos)
●
El elemento debe
– Tener overflow a valores hidden (si se desborda se
oculta), scroll (mete barras y oculta si se desborda) o
auto (mete barras si hace falta y oculta si se desborda)
– Tener white-space a valor nowrap (elimina espacios
en blanco y finales de línea y lo muestra en una línea)

Nuevo valor string para personalizar “...”

CSS3 25

Ejemplo text-overflow

CSS3 26

resize
●
Permite dejar redimensionar una caja
●
Valores: none, both, horizontal, vertical

CSS3 27

Web fonts
●
Nos descargamos las fonts
●
Formatos:
– TTF/OTF – TrueType y OpenType Fonts – no tienen p
– EOT – Embedded OpenType – definido por MS en los 90s,
soportado por IE
– SVG – Scalable Vector Graphics
– WOFF – Web Open Font Format
●
IE soporta EOT
●
Firefox soporta EOT, TTF, WOFF
●
Safari soporta OTF, TTF y SVG
●
Chrome TTF, OTF
CSS3 28

Web fonts
@font-face {
font-family: "Custom Font Name";
src: url('font.ttf');
}

body {
font-family: "Custom Font Name";
}

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS3 29

Recursos web fonts
●
Google
– https://developers.google.com/webfonts/docs/
●
Font Squirrel
– http://www.fontsquirrel.com/
– http://www.fontsquirrel.com/fontface/generator

CSS3 30

Transiciones CSS
●
Tipo hover pero 'con efecto retardado'
1. Indicar qué propiedad cambiará –
●

transition-property
●
2. Duración de la transición:
transition-duration
3. Efecto: transition-timing-function
●

http://www.css3.info/preview/css3-transitions/

CSS3 31

Ej. transición

http://www.css3.info/preview/css3-transitions/

CSS3 32

Multicolumna
●
column-width: ancho de columna
●
column-count: número de columnas
●
column-gap: separación entre columnas
●
column-rule: línea de separación

http://www.w3.org/TR/css3-multicol/
CSS3 33

Ej. multicolumna

CSS3 34

Conclusiones
●
CSS3 empieza a popularizarse y podemos
empezar a probarlo
●
Aún está en fase de normalización, y
tenemos que tener cuidado con su soporte
por los navegadores

CSS3 35

Referencias
●
Novedades css3
http://www.css3.info/preview/
●
HTML5 and CSS3: Visual QuickStart Guide,
Seventh Edition, Elizabeth Castro; Bruce
Hyslop, Peachpit Press,2011
http://proquest.safaribooksonline.com/book/web-development/html/9780131382022

CSS3 36

CSS3

Más contenido relacionado

La actualidad más candente (20)

Destacado (7)

Similar a CSS3 (20)

Más de Carlos A. Iglesias (20)

Último (20)

CSS3