FRONTDAYS HTML5 y CSS3: cómo sacarles partido hoy
HTML5 y CSS3:
cómo sacarles partido hoy
Jose Florido
Madrid · Martes 22 Septiembre 2009
FRONTDAYS
www.frontdays.com
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
Objetivo del curso
Mostrar el potencial de los nuevos estándares, así como de los
navegadores web de nueva generación y su uso hoy en día,
logrando mantener nuestras páginas web compatibles con
navegadores menos avanzados.
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML 5
HTML5 y CSS3: cómo sacarles partido hoy
Primera parte: HTML5
‣ Historia
‣ Características
‣ Novedades
‣ APIs
‣ Ejercicio
práctico: creación de una página con HTML5
FRONTDAYS
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
HTML 5
Historia de HTML 5
FRONTDAYS
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
HTML4
1998
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
XHTML1
2000
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
XHTML2
2002
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
XForms
2003
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
WHATG
2004
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
HTML5
2007
HTML5 y CSS3: cómo sacarles partido hoy
Historia de HTML5
Hoy día, las aplicacione web necesitan:
‣
‣
‣
‣
‣
‣
‣
‣
Reproducir video y audio
Acceso a recursos: webcam, micrófono, etc
Trabajar offline
3D
Geolocalización
Mejores subidas de ficheros
Drag and drop
Complejos elementos de interacción con formularios
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
Historia de HTML5
¿2022?
‣
‣
‣
‣
Final Draft en Octubre 2009
Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4
Google Wave
iPhone
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
FRONTDAYS
FRONTDAYS
HTML 5
Principales características
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Principales características
Compatibilidad
Evolución, no revolución
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Principales características
Utilidad
Resolver problemas reales
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Principales características
Interoperabilidad
Definir el comportamiento de los UA
Gestión de errores
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Principales características
Acceso universal
Independencia del medio, i18n, accesible
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
HTML 5
Novedades
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Doctype
<!DOCTYPE html> :-)
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Tipos de contenido
‣
‣
‣
‣
‣
‣
‣
Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Metadata content
define la presentación o el comportamiento del resto del
documento, o relaciones del documento con otros documentos.
base, command, link, meta, noscript, script, style, title
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Flow content
la mayoría de los elementos usados en el cuerpo de un documento
son de tipo flow.
a, abbr address, article aside, audio, dialog, div, fieldset, figure,
footer, form, h1, h2, img, nav, p, script, section, select, small, span,
strong, table, textarea, time, video,...
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Sectioning content
elementos que crean nuevas secciones en el documento
article, aside, nav, section
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Heading content
elementos que definen la cabecera de una sección
h1, h2, h3, h4, h5, h6, hgroup
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Phrasing content
texto del documento junto con elementos que marcan el texto,
dentro de un párrafo
a, b, string, span, small, time, em,...
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Embedded content
elementos que importan otro recurso o contenido de otro
vocabulario dentro del documento
audio, canvas, embed, iframe, img, math, object, svg, video
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Interactive content
elementos destinados a interacción con el usuario
a, audio, button, details, embed, iframe, img, input, keygen,
label,menu, object, select, textarea, video
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Nuevos elementos
‣
‣
‣
‣
Elementos estructurales
Canvas
Video
Audio
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Elementos estructurales I
section representa una sección del documento. Junto con h1, h2,...,
h6 indica la estructura del documento.
article representa una pieza de contenido independiente dentro de
un documento.
aside representa una pieza de contenido que esta menos
relacionada con el resto de la página.
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Elementos estructurales II
hgroup representa el encabezado de una sección. Agrupa varios
elementos h1 - h6.
header representa la cabecera de un documento o sección.
footer representa el pie de una sección y puede contener
información sobre el autor, copyright, etc.
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Elementos estructurales III
nav representa una sección del documento que contiene
navegación
dialog usado para marcar una conversación
figure usado para asociar una description textual o subtítulos a
algún elemento embedido, como vídeos o imágenes.
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
<body>
<header>
<h1>Web page</h1>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Articles</a></li>
<li><a href="today.html">Today</a></li>
<li><a href="successes.html">Successes</a></li>
</ul>
</nav>
</header>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> <a href="policy.html">Privacy Policy</a> <a href="contact.html">Contact Us</a></p>
</footer>
</body>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Nuevos elementos
canvas crea un lienzo donde es posible crear gráficos u otras
imágenes visuales al vuelo, mediante scripting.
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Canvas - accesibilidad
Contenido alternativo
<canvas id="a_canvas" width="400" height="300">
<p>Ops! No canvas support, bad browser!</p>
</canvas>
Problemas de accesibilidad
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Canvas - soporte
Soporte extenso por parte de navegadores
* IE utilizando la librería excanvas.js
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Canvas - aplicaciones
Efectos y transformaciones (Demo)
Animaciones (Demo)
Tipografías (Cufón)
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Nuevos elementos
video un método único para insertar video en la web.
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Video - atributos
<video src="http://www.test.com/video.wmv">
your browser does not support the video tag
</video>
Atributos
‣ poster
‣ autobuffer
‣ autoplay
‣ loop
‣ controls
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Video - formato / codecs
‣ Ogg Theora (Chrome, Firefox, Opera)
‣ H.264 (Chrome, Safari)
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Video - soporte
Soportado por las últimas versiones de casi todos los
navegadores, excepto IE
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Video - degradación grácil
<video controls>
<source src="zombie.ogg" type="video/ogg"/>
<source src="zombie.mp4" type="video/mp4"/>
<embed src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash"
width="500" height="396"
allowscriptaccess="always"
allowfullscreen="true"/>
</video>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Nuevos elementos
audio un método único para insertar audio en la web.
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Audio - atributos
<audio src="http://www.test.com/video.wmv" controls></audio>
Atributos
‣ autobuffer
‣ autoplay
‣ loop
‣ controls
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Audio - demo
HTML5 Audio player
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Audio - soporte
Soportado por las últimas versiones de casi todos los
navegadores, excepto IE
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: Novedades
Nuevos reglas para el código
En HTML4 / XHTML1:
<li>
<p><a href="http://www.google.com">Ir a google.com</a></p>
<a href="http://www.google.com"><img src="" alt="logo de
Google" /></a>
</li>
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Nuevos reglas para el código
En HTML5:
<li>
<a href="http://www.google.com">
<p>Ir a google.com</p>
<img src="" alt="logo de Google" />
</a>
</li>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Elementos que desaparecen
basefont
big
center
font
s
strike
tt
u
frame
frameset
noframes
acronym
applet
isindex
dir
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Novedades
Forms
Opera 10 demo
FRONTDAYS
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
HTML 5
APIs
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: APIs
APIs en navegadores
‣
‣
‣
‣
‣
getElementsByClassName
querySelector
Almacenamiento de datos en el cliente, por sesión y persistente
Mensajes entre documentos
Drag-and-drop
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: APIs
getElementsByClassName(“abrir”)
<li id="uno">
<p>Link 1</p>
<a href="#" class="abrir">Abrir link 1</a>
</li>
<li id="dos">
<p>Link 2</p>
<a href="#" class="abrir">Abrir link 2</a>
</li>
<li id="tres">
<p>Link 3</p>
<a href="#" class="abrir">Abrir link 3</a>
</li>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: APIs
querySelector(“#dos .abrir”)
<li id="uno">
<p>Link 1</p>
<a href="#" class="abrir">Abrir link 1</a>
</li>
<li id="dos">
<p>Link 2</p>
<a href="#" class="abrir">Abrir link 2</a>
</li>
<li id="tres">
<p>Link 3</p>
<a href="#" class="abrir">Abrir link 3</a>
</li>
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
HTML5: APIs
Almacenamiento de datos en el cliente, por sesión y persistente
‣ Aplicaciones web offline
‣ Menor latencia
‣ Mejor rendimiento
‣ Mayor privacidad
‣ Safari Notes demo
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: APIs
Mensajes entre documentos
‣ Cross-domain
‣ Sin necesidad de configuración
‣ postMessage()
‣ John Resig´s messaging demo
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: APIs
Drag-and-drop
‣ Drag and drop nativo del sistema
‣ Arrastrar objetos al navegador y entre ventanas del navegador
‣ Drag-and-drop demo
‣ 280 slides video demo
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Ejercicio
Estructura
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Ejercicio
HTML4
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
HTML5: Ejercicio
HTML5
FRONTDAYS
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS 3
HTML5 y CSS3: cómo sacarles partido hoy
Segunda parte: CSS3
‣ Historia
‣ Selectores
‣ Módulos
y nuevas propiedades
‣ Ejercicio
práctico: aplicación de CSS3 a una página
FRONTDAYS
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
CSS 3
Historia de CSS 3
FRONTDAYS
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de CSS3
CSS1
1996
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de CSS3
CSS2
1998
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de CSS3
CSS3
2000 (WD)
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
Historia de CSS3
CSS2.1
2002 (WD)
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Principios
Compatibilidad
Hacia delante y hacia atrás
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Principios
Complementariedad
Cambiar CSS si cambiar HTML
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Principios
Independencia
De plataforma y de dispositivo
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Principios
Simplicidad, flexibilidad, riqueza
Sencillo y potente
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Principios
Accesibilidad
Posibilitar acceso universal
FRONTDAYS
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
CSS 3
Selectores
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS1
‣
‣
‣
‣
‣
‣
de elemento: h1 { color: red; }
de clase: h1.alert { color: red; }
de ID: #alert { color: red; }
descendientes y contextuales: h1 em { color: red; }
pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter
comodín: div * p
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS2
‣
‣
‣
‣
‣
selector universal (*): blockquote * { ... }
de atributo: a[href="http://www.google.com/"] { ... }
más pseudo-clases: :first-child, :hover, :focus, :active, :lang,
:before, :after
de hijos: div > p { ... }
de hermanos: h1 + h2 { ... }
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
body > ol > li p
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
body > ol > li p - Selecciona cualquier elemento p que es
descendiente de un elemento li que es hijo de un elemento ol que es
hijo de un elemento body.
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
p > * > em
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
p > * > em - Selecciona cualquier elemento em que es hijo de
cualquier elemento que es hijo de un elemento p.
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
a[title~="Mail"]
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
‣
a[title~="Mail"] - Selecciona cualquier elemento a con un atributo
title que contiene la palabra Mail.
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Selectores
Selectores en CSS3 I
‣
nuevos selectores de atributo:
comienzo del atributo
a[href^="ftp:"] { ... }
final del atributo
a[href$=".edu"] { ... }
cualquier cadena contenido
img[src*="photos"] { ... }
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Selectores
Selectores en CSS3 II
‣
nuevas pseudo-clases:
:enabled, :disabled, :checked
Permiten cambiar la apariencia de los inputs de formulario,
según su estado. No soportadas en IE7 ni en IE8
HTML5
sacarles
partido
hoy hoy
HTML5yyCSS3:
CSS3:cómo
cómo
sacarles
partido
CSS 3
Módulos
FRONTDAYS
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Módulos
Algunos otros módulos de CSS3
‣
‣
‣
‣
‣
‣
Colores
Modelo de caja
Fondos y bordes
Tipografía y efectos de texto
Layout multicolumna
Animaciones y transiciones
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Colores
Colores en CSS2
‣
‣
‣
‣
Hexadecimal - #RRGGBB
Hexadecimal, shorthand - #RGB
RGB- rgb(red, green, blue)
Nombres de colores - white, red, black, etc.
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Colores
Nuevos formatos de colores en CSS3
‣
‣
‣
‣
HLS - hsl(hue, saturation, lightness)
CMYK - cmyk(cyan, magenta, yellow, black)
HLSA - hlsa(hue, saturation, lightness, alpha)
RGBA - rgba(red, green, blue, alpha)
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Colores
Formato HLS
‣
‣
‣
‣
Intensidad, luz y saturación
Sencillo de manipular
Existente en programas de edición de imágenes, como Adobe
Photoshop
Adecuado para crear paletas de colores: sólo tienes que elegir el
color básico y no sus variantes claras/oscuras
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Colores
Formato CMYK
‣
‣
‣
Cyan, magenta, amarillo y negro
Formato muy bien conocido por los diseñadores
Nos permite definir cómo nuestros colores serán impresos
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Colores
Formatos RGBA y HSLA
‣
‣
‣
Añaden un cuarto parámetro: alpha
El canal alpha define la transparencia del color, va de 0
(totalmente transparente) a 1 (totalmente opaco)
La adición del canal alpha ofrece muchas nuevas posibilidades a
los diseñadores visuales.
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Colores
Si no hay soporte RGBA
background-color: rgb(0%, 0%, 100%);
background-color: rgba(0%, 0%, 100%, 0.5);
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Colores
RGBA y HSLA vs OPACITY
‣
‣
Opacity es una propiedad de CSS3 que modifica la transparencia
de todo el elemento. Por ejemplo un párrafo con opacity: 0.5
tendría su fondo semitrans, pero también su contenido (texto)
El canal alpha nos permite modificar la transparencia del color de
fondo del elemento, con lo que el contenido del elemento no se
vería afectado.
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Colores
Soporte en navegadores
‣
‣
‣
Las últimas versiones de Safari, Opera, Firefox y Chrome
soportan HSL, HSLA y RGBA
IE no soporta ninguno de los nuevos formatos
Ningún navegador soporta aún CMYK
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Modelo de caja
Modelo de caja
‣
‣
‣
IE box model
W3C box model
Nueva propiedad: box-sizing: content-box / border-box
Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Fondos y bordes
Fondos y bordes
‣
‣
‣
‣
‣
Degradados
Bordes redondeados
Sombras
Imágenes de borde
Imágenes de fondo
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Fondos y bordes
Degradados
background: -webkit-gradient(linear, 0 0, 100% 100%,
from(#d0d0d0), to(#ffffff));
background: -moz-linear-gradient(20% center, 30% center,
from(blue), to (yellow)) no-repeat;
Soportado por Safari y firefox.
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Fondos y bordes
Bordes redondeados
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Fondos y bordes
Sombras (de caja)
box-shadow: 10px 10px 5px #888;
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Fondos y bordes
Imágenes de borde
border-image:
border-corner-image:
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
FRONTDAYS
CSS3: Fondos y bordes
Imágenes de fondo
Tamaño
-o-background-size, -webkit-background-size, -khtml-background-size,
-moz-background-size
Múltiples imágenes de fondo
background: url(img1.gif) top left no-repeat, url(img2.gif) bottom
left no-repeat;
Soportado por Safari
FRONTDAYS
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Layout multicolumna
Layout multicolumna
‣
‣
‣
Número de columnas
Separacón entre columnas
Bordes separadores
-moz-column-count
-moz-column-width
-moz-column-gap
-webkit-column-count
-webkit-column-width
-webkit-column-gap
HTML5 y CSS3: cómo sacarles partido hoy
CSS3: Tipografía y efectos de texto
Tipografía y efectos de texto
‣
‣
Sombras en texto
Uso de tipografías (@font-face)
FRONTDAYS
¡Muchas gracias por venir!
FRONTDAYS
Los mejores cursos en desarrollo frontend
impartidos por los mejores profesionales
www.frontdays.com
© Copyright 2024