Introducción a HTML5 y CSS3

HTML 5 / CSS 3

Introducción a HTML 5 / CSS 3

HTML 5 / CSS 3

INTRODUCCIÓN

HTML 5 / CSS 3

OFFLINE

Offline

WEBConectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

ONLINE

Permite realizar aplicaciones web offline- application cache- localStorage

- web SQL y BBDD- online/offline

events

HTML 5 / CSS 3

ALMACENAMIENTO

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Permite que las aplicaciones web guardendatos en el dispositivo

- Web Storage: sessionStorage/localStorage

- Web SQL Database- IndexedDB

HTML 5 / CSS 3

CONECTIVIDAD

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / servidor

- Cross Document Messaging- XMLHTTPRequest 2- Web Sockets- Server-Sent Events

HTML 5 / CSS 3

ACCESO A FICHEROS

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del dispositivo

- File API- FileReader API- Filesystem & FileWritter API- BlobBuilder API- Blob URLs

File API

FilerReader API

Filesystem & FileWritter API

BlobBuilder API

Blob URLs

HTML 5 / CSS 3

SEMÁNTICA

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido.

- Elementos multimedia- Elementos estructurales- Atributos semánticos- Nuevos tipos / atributos de campos de

formulario - Sintaxis de Microformatos / microdata- -Etc

HTML 5 / CSS 3

AUDIO / VIDEO

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Permite no solo incluir contenido multimedia (audio / video) sino acceder, controlar y mani-pular determinados aspectos de los mismos

Video

Audio

HTML 5 / CSS 3

3D/GRÁFICOS

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Permite crear animaciones y/o efectos visuales en websites/aplicaciones web sin necesidad de plugins adicionales (por ej: flash)

- 2D Canvas- WebGL- SVG- 3D CSS transforms

HTML 5 / CSS 3

PRESENTACIÓN

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

AlmacenamientoPermite crear sitios web/aplicaciones vistosas y visualmente enriquecidas que producen mejores experiencias de usuario.

- CSS3 3D Transforms- CSS3 Transforms- CSS3 Animation- CSS3 Transition- Webfonts

3D transforms

CSS3 Transforms

CSS3 Animation

CSS3 Transitions

HTML 5 / CSS 3

RENDIMIENTO

Offline

Conectividad

Acceso a ficheros

Semántica

Audio/Video

3D/Gráficos

Presentación

Rendimiento

Almacenamiento

Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, más responsivas que las aplicaciones tradicionales

- Webworkers (procesos en background)- Almacenamiento local- Carga asíncrona- App caché- Webfonts

HTML 5 / CSS 3

2004

2005

2007

2009

2012

2020

2022

Apple, Mozilla & Opera no consiguieron crear un estándar HTML4.En consecuencia forman la Web WHATWG

Se publica el borrador Web Applications 1.0

W3C “adopta” a WHATGW y publica el borrador HTML5

Finalización del borrador

Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza

Primer Release Candidate de HTML5 [previsión W3C]

Finalización de test [previsión W3C]

Creación del estándar HTML5 [previsión W3C]

HISTORIA DE HTML 5

HTML 5 / CSS 3

ESTADO ACTUAL (MAYO 2012)

www.findmebyip.com/litmus/#html5-web-applications

http://www.findmebyip.com/litmus/

HTML 5 / CSS 3

HTML5 = Evolución

Mejor manejo de errores

Mayor estandarización

Código más semántico

Más accesible

Soporte multimedia

BENEFICIOS

HTML 5 / CSS 3

BENEFICIOS

Acceso a recursos como webcams o micrófonos

Almacenamiento Local

Webworkers

Geolocalización

Gestión de formularios

Menor dependencia de plugins y Javascript

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoDOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 HTML5

<!DOCTYPE html>

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoMETA

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

HTML 4.01 HTML5

<meta charset=”UTF-8”>

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoSCRIPT

<script type=”text/javascript” src=”file.js”> </script>

<script type=”text/javascript”>………

</script>

HTML 4.01 HTML5

<script src=”file.js”></script>

<script>………

</script>

HTML 5 / CSS 3

HOJAS DE ESTILO

<link rel=”stylesheet” type=”text/css” href=”estilos.css”>

HTML 4.01 HTML5

<link rel=”stylesheet” href=”estilos.css”>

NOVEDADES

Etiquetado del documento

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoETIQUETA “A”

<h2><a href=”acercaDe.htm”>Acerca de</a>

</h2><p>

<a href=”acercaDe.htm”>Conoce quiénes somos</a>

</p>

HTML 4.01 HTML5

<a href=”acercaDe.htm”><h2>Acerca de</h2><p>Conoce quiénes somos</p>

</a>

HTML 5 / CSS 3

Nuevas etiquetas de presentación

<div id=“header”>

<div id=“menu”>

<div id=“footer”>

<div>

<div><div>

<header>

<nav>

<footer>

<article>

<section><aside>

NOVEDADES

HTML 5 / CSS 3

<nav>

<footer>

<article>

<section><aside>

<header><hgroup> <header>

representa la cabecera de un documento o sección

<hgroup>

representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y subtítulos)

<header><hgroup>

<h1>Mi Blog</h1><h2>Esforzándome para trabajar

menos</h2></hgroup>

</header>

NUEVAS ETIQUETAS DE PRESENTACIÓN

HTML 5 / CSS 3

<footer>

<article>

<section><aside>

<header><hgroup> <nav>

representa una sección del documento que contiene navegación

<nav><ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">galería</a></li> <li><a href="#">contacto</a></li></ul>

</nav>

<nav>


HTML 5 / CSS 3


<footer>

<aside>

<header><hgroup> <article>

representa una pieza de contenido independiente dentro de un documento

<nav>

<article>

<section>

<section>

representa una sección del documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática común

HTML 5 / CSS 3


<footer>

<aside>

<header><hgroup>

<nav>

<article>

<section>

<article> <hgroup>

<h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2>

</hgroup> <p>Lorem ipsum dolor sit amet, consectetur

adipiscing elit.</p> <section>

<h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p>

</section> <section>

<h1>Capítulo 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p>

</section></article>

HTML 5 / CSS 3

<figure>

representa un diagrama, una ilustración, una fotografía, etc

<figure> <img src=“javier.jpg" alt=“Javier González"> <figcaption> Javier González impartiendo

seminarios sobre tecnologías web</figcaption></figure>

<footer>

<aside>

<header><hgroup>

<nav>

<article>

<section><figcaption>

representa la “nota al pie” del elemento incluido en <figure>


HTML 5 / CSS 3


<footer>

<aside>

<header><hgroup>

<nav>

<article>

<section>

<aside>

representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional

<article> <header><h1>Tecnologías web</h1></header> <p>bla bla bla</p> <aside>

<ul><li><a href=“#”>Links sobre

HTML5</a></li><li><a href=“#”>Links sobre

CSS3</a></li> </ul></aside>

</article>

HTML 5 / CSS 3


<aside>

<header><hgroup>

<nav>

<article>

<section>

<footer>

representa el pie de una sección o página. Suele contener información sobre el autor, copyright, etc

<footer> <p>© 2012 Bla bla bla bla</p></footer>

<footer>

HTML 5 / CSS 3

Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales “al vuelo” con Javascript

No requiere plugins, ni codecs

Mapa de bits (no hay reescalado)

El contenido no se añade al DOM

Puede ser exportado

•

<canvas id="miLienzo" width="360" height="240"><p>Tu navegador no soporta canvas</p>

</canvas><script>var lienzo =

document.getElementById(‘miLienzo’)

var context = lienzo.getContext('2d');</script

http://www.whatwg.org/specs/web-apps/current-work/#2dcontext

http://code.google.com/p/explorercanvas/

http://billmill.org/static/canvastutorial/index.html

CANVAS

HTML 5 / CSS 3

width & height

autoplay

loop

source

poster

controls

Autobufferpreload

VIDEO

HTML 5 / CSS 3

<video controls width="360" height="240"> <source src="movie.mp4"><source src="movie.ogv" type="video/ogg codecs='theora, vorbis'">

<source src="movie.webm" type="video/webm codecs='vp8, vorbis'"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4"> <param name="movie" value="player.swf?file=movie.mp4"> <a href="movie.mp4">Descargar vídeo</a> </object>

</video>

VIDEO

Ejemplo de video

HTML 5 / CSS 3

autoplay

source

loop

autobuffer

controls

preload

AUDIO

HTML 5 / CSS 3

<audio controls> <source src="song.ogg" type="audio/ogg" /><source src="song.mp3" type="audio/mpeg" /><object type="application/x-shockwave-flash“ data="player.swf?soundFile=song.mp3">

<param name="movie" value="player.swf?soundFile=song.mp3"><a href="song.mp3">Descargar canción</a>

</object> </audio>

Ejemplo de audio

AUDIO

HTML 5 / CSS 3

FORMULARIOS

<input> type

searchEmailphoneurltelrange (*)number (*)datedatetimedatetime-localmonthcolour

min (*) max (*)

http://www.findmebyip.com/litmus/#html5-forms-inputs

HTML 5 / CSS 3

FORMULARIOS

autofocus

<input>required autocomplete

pattern

placeholder

onoff

Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs

Ejemplo de formulario

HTML 5 / CSS 3

<acronym><applet><basefont><big><center><dir><font><frame>

<frameset><isindex><noframes><s><strike><tt><u>

ETIQUETAS

abbralign alinkarchiveaxisbackground bgcolorborder cellpadding cellspacing charcharoffcharsetclassidclearcodebase

codetypecompact compactdeclarehspacelinklongdescmarginheight marginwidth name nohrefnoshade nowrap profilerevrules

schemescopeshapesize standbytargettexttypetype valign valuetypeversionvlinkvspacewidth

ATRIBUTOS

<small><b>

<cite><i>

REDEFINIDAS

<a>

ELEMENTOS QUE DESAPARECEN

HTML 5 / CSS 3

document.getElementByClassName: acceso a todos los elementos del DOM que compartan la clase especificada

document.querySelectorAll(selector): acceso a todos los elementos del DOM con el selector especificado

document.querySelector(selector): acceso al primer elemento del DOM con el selector especificado

<script>var elementos1 = document.querySelectorAll("section div.wrapper"); var elementos2 = document.querySelectorAll("div.content, div.wrapper");var inputsText = document.querySelectorAll('[type=text]');

</script>

<script>var elemento = document.querySelector("section div.wrapper");

</script>

JAVASCRIPT

HTML 5 / CSS 3

draggable (true|false): el elemento puede ser arrastrado hacia otro elemento

EVENTOS

• dragstart• drag

• dragenter• dragover• dragleave

• drop

• dragend

Ejemplo de drag&drop

DRAG & DROP

HTML 5 / CSS 3

Bases de datosLocales

Lógica de la aplicacióne interfaz de usuario

data generada por el usuario, o recursos solicitados

VSCache

ALMACENAMIENTO LOCAL

HTML 5 / CSS 3


Se fuerza a tenerInstalado el plugin.

Problemas con Firewalls

Se fuerza a usar unNavegador

determinado

Poca información (4 Kb)

Reduce velocidad

Técnicas de Almacenamiento Offline Previas

Navegador

Basado en Plugins

Cookies

HTML 5 / CSS 3

Técnicas de Almacenamiento con HTML5

Diferentes APIs:Web Storage (Local Storage or DOM Storage)Web SQL DatabaseIndexedDBFile Storage

PRINCIPIOS:Normas estándar para “todos” los navegadores.Información solo accesible desde el propio navegador.Interacción de la API y la Base de Datos es asíncrona


HTML 5 / CSS 3

Web Storage

TIPOS DE DATOS:localStorage Permanecen hasta que el usuario los borra

sessionStorage Desaparecen al cerrarse el navegador

El más compatible.Estructura clave-valor

Integridad de los datos.Race conditions

http://html5demos.com/storagehttp://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorage


http://html5demos.com/storage

http://playground.html5rocks.com/


HTML 5 / CSS 3


Web SQL Database

Como las DDBB tradicionales.

Estructura relacionada (joins)

Más complejas.

IE y Firefox no son compatibles

http://playground.html5rocks.com/#async_transactions


HTML 5 / CSS 3


IndexedDB

Mezcla entre Web Storage y Web SQL Database

Estructura relacionada (joins)

Transacciones de información.

Pocos navegadores lo soportan, pero está previsto ser soportado por todos

HTML 5 / CSS 3


FileStorage

Puedes guardar información binaria (como texto), y grandes cantidades de información.

File Reader soportado solo por Chrome

FileWriter todavía no soportado por nadie

Cuando sea soportado será bueno para almacenar grandes cantidades de información

HTML 5 / CSS 3

¡LO QUIERO USAR YA!

Por defecto usar WEB STORAGE (+ simple & + compatible )

Ayudarse de librerías como persis.js ó

Protegerse contra la perdida de datosNo guardar información privadaLos usuarios pueden borrar los datos fácilmenteSincronizarse con el servidor frecuentemente

Securizar los datosAlto riesgo en navegadores compartidosSessionStorage mejor que LocalStorageEncriptar informaciónEvitar guardar cierto tipo de datos


HTML 5 / CSS 3

WebSockets

Permite la comunicación bidireccional con cualquier servidor mediante un determinado protocolo de red.

La conexión con el servidor se establece de forma asíncrona, en segundo plano, y la gestión del todo su ciclo de vida se realiza a través de callbacks que reciben eventos

Debemos utilizar "ws://" para establecer conexiones con el protocolo websocket.

El constructor admite además un parámetro adicional para que indicar un conjunto de subprotocolos, pero aún está sin definir.

<script>var ws = new WebSocket("ws://echo.websocket.org");

</script>

la URL del código de ejemplo es válida muy útil para pruebas, es un sencillo servidor websocket que actúa como eco (reenvía al cliente lo mismo que recibe).

HTML 5 / CSS 3

WebSockets

<script>ws.onopen = function(event){

//Conexión abierta}ws.onmessage = function(event){ //Mensaje recibido en

event.data;}ws.onclose = function(event){ //Conexión cerrada}ws.onerror = function(event){ //Error en la conexión}</script>

<script>ws.send("ping");//mandar mensaje al servidorws.close();// cerrar la conexión

</script>

EVENTOS FUNCIONES

ATRIBUTOS- url (string con la dirección)- protocol (string con el protocolo)- readyState

- Conectando (0)- Abierto (1)- Cerrando (2)- Cerrado (3)

- bufferedAmount (nº de bytes pendientes de enviar al server)

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today


HTML 5 / CSS 3

WEB WORKERS

Tareas JavaScript que pueden lanzarse en segundo plano, a modo de threads.

Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecución concurrentes con una gran carga de trabajo y duración indeterminada.

Las tareas funcionan al margen del proceso normal de gestión de eventos de los controles de la interface de usuario, evitando bloquear la página durante su ejecución.

<script>var worker = new Worker("worker.js");

</script>

<button type="button" onclick="worker.terminate();"> Kill</button>

HTML 5 / CSS 3

WEB WORKERS

Pueden procesar eventos, callbacks, e incluso es posible crear otros workers.

Limitación: no tienen un contexto de navegación asociado.

No pueden acceder al DOM, window, document o parent, Pero sí a navigator, location, XMLHttpRequest, timers, applicationCache o Web SQL database.

Permiten la posibilidad de ejecutar el código de otros scripts

<script>importScripts("script1.js"); //De uno en uno...importScripts("script2.js");importScripts("script3.js", "script4.js"); //.. o varios a la vez

</script>

HTML 5 / CSS 3

WEB WORKERS

Permite comunicar el hilo padre principal con el worker hijo.

La comunicación se realiza a través de "postMessage", y el manejador "onmessage".

Una comunicación básica entre padre e hijo tendría cuatro pasos:

<script>worker.postMessage("Información para el worker");

</script>

<script>self.onmessage = function(event){

//Recibe "Información para el worker" en event.data

};</script>

<script>self.postMessage("Información para el padre");

</script>

<script> worker.onmessage = function(event){ //Recibe "Info para el padre" en event.data};</script>

1) El hilo padre manda un mensaje (evento) al worker:

2) El worker recibe el mensaje en el atributo "data" del evento

3) El worker termina su proceso y envía un mensaje (evento) al padre:

4) El padre recibe el mensaje en el atributo "data" del evento

HTML 5 / CSS 3

CSS 3

HTML 5 CSS 3

estructura presentación

HTML 5 / CSS 3

1996

1998

2000

2002

2009

CSS 1: permite dar estilos independientemente del navegador y del HTML

CSS2: nuevas funcionalidades, pero implementación lenta

Semilla del CSS3.

Se plantea una lista de mejoras de CSS2

Borrador de CSS3

CSS2.1: Crea lo que ahora consideramos el estándar

Implementación en algunos navegadores de algunas partes de CSS3

2005 Empieza el desarrollo de CSS3

HISTORIA DE CSS 3

HTML 5 / CSS 3

Mejora en los selectores

Nuevos estilos SombraOpacidadesquinas redondeadas…

Mejora en tipografías

Transformaciones

Reduce la cantidad de HTML (divitis)

Reduce las peticiones de imágenes

¡Nuestra pagina va a ser más rápida!

CSS 3 VS CSS 2

HTML 5 / CSS 3

NOVEDADES DE CSS 3

• Bordes• Fondos• Color• Text effects• Layout multicolumna• Transiciones• Animaciones• Selectores• Media Queries

HTML 5 / CSS 3

border-image: url(border.png) 27 27 27 27 round round;

border-image

box-shadow: 10px 10px 5px #888;

box-shadow / text-shadow

border-radius: 15px;

border-radius

BORDES

border: 5px solid #000;border-colors:#e00 #c30 #c50 #c60 #c70

border-color

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

NOVEDADES DE CSS 3

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

HTML 5 / CSS 3

background: url(../topImage.jpg) top left no-repeat, url(../centerImage.jpg) top right repeat-y, url(../bottomImage.jpg) bottom center no-repeat;

top image

center image

bottom image

MULTIPLE BACKGROUNDS

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

NOVEDADES DE CSS 3

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

HTML 5 / CSS 3

• rotate : transform: rotate(30deg);

• skew :transform: skew(-30deg);

• translate transform: translate(30px,10px);

• scale :

transform: scale(0.5,2.0);

TRANSFORM

http://www.the-art-of-web.com/css/css-animation/

http://www.ejhansel.com/transform/

NOVEDADES DE CSS 3



HTML 5 / CSS 3

rgb(255,192,0,1); rgb(255,192,0,0.5);

• RGBA: (Red, Green, Blue, Alpha)

Opacity: 1.0 Opacity: 0.5

• Opacity

• HSLA: (Hue, Saturation, Lightness, Alpha)

hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);

• HSL: (Hue, Saturation, Lightness)

hsl(21,97%,52%)

COLOR

NOVEDADES DE CSS 3

HTML 5 / CSS 3

NOVEDADES DE CSS 3

• column-count

• column-width

• column-gap

• column-rule

MULTI-COLUMN LAYOUT

HTML 5 / CSS 3

WebFonts

WEBFONTS

@font-face { font-family: ‘FontName'; src: url('Gondola_SD-webfont.eot'); src: local('☺'), url(' FontName.woff') format('woff'), url(' FontName.ttf') format('truetype'), url(' FontName.svg#webfontsgM4b18D') format('svg'); font-weight: normal; font-style: normal;}

div { font-family: FontName;}

http://www.fontsquirrel.com/fontface/generator

NOVEDADES DE CSS 3


HTML 5 / CSS 3

NOVEDADES DE CSS 3

Text-shadowText-shadow: Xpos Ypos Blur Color;

ejemplo de sombra

Text-overflowText-overflow: ellipsis-word;

Lorem ipsum dolor sit…

Word-wrapword-wrap: break-word;

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit

TEXTOS

http://lab.simurai.com/flashlight

http://lab.simurai.com/css/flashlight

HTML 5 / CSS 3

NOVEDADES DE CSS 3

• :enabled

• :disabled

• :checked

NUEVAS PSEUDO-CLASES

HTML 5 / CSS 3

NOVEDADES DE CSS 3

a[href^=“http://web”]

a[href*=“.es”]

a[href$=“.pdf”]

[att$=val]termina por val

[att^=val]empieza por val

[att*=val]contiene val

<a href=“http://web.com/home.html”>

<a href=“http://web.com/img.jpg”>

<a href=“http://web.com/img.gif”>

<a href=“http://site.com/file.pdf”>

<a href=“http://site.es/home/index.pdf”>

<a href=“http://site.es/about.html”>

<a href=“http://site.com/home.html”>

SELECTORES DE ATRIBUTOS

HTML 5 / CSS 3

NOVEDADES DE CSS 3

MEDIA QUERIES

min-width & max-widthdiferentes estilos según el tamaño de la pantalla

http://mediaqueri.es/

http://mediaqueri.es/

HTML 5 / CSS 3

ESTADO ACTUAL DE CSS 3

http://www.w3.org/Style/CSS/current-work#tablehttp://www.findmebyip.com/litmus/#target-selector

HTML 5 / CSS 3

¡podemos usar CSS3 desde hoy!

Aumentamos y ensuciamos el código

No todos los navegadores lo soportan

Posibles solucioneseccstender.orgless.jsFicheros .css para cada navegadorcss3generator.com

-o-border-radius: 10px; -webkit-border-radius: 10px;

-moz-border-radius: 10px;-ms-border-radius: 10px;

ESTADO ACTUAL DE CSS 3

Introducción a HTML5 y CSS3

Documents

Transcript of Introducción a HTML5 y CSS3