Desarrollo de sitios Web con HTML5,

CSS3
 FONDOS MULTIPLES
 FONDOS CON TRANSPARENCIA
 CREAR VIÑETAS TIPO TRIANGULO CON CSS3
 CREAR UN MENSAJE DE COMENTARIOS CON CSS3
 TRANSFORMACION EN CSS3
 TRANSFORMACION DE POSICION EN CSS3
 TRANSFORMACION DE ROTACION EN CSS3
 TRANSFORMACION DE ESCALA EN CSS3
 TRANSFORMACION DE DISTORSION EN CSS3
 TRANSICION EN CSS3
 CREAR PESTAÑAS DINÁMICAS CON CSS3
 CREAR BORDES PERSONALIZADOS
 USAR LA FUENTE DE GOOGLE EN NUESTRO WEB
SITE
 MULTICOLUMNAS CON CSS3
 CONFIGURACION DEL VIEWPORT EN HTML
 USO DEL MEDIA QUERIES CON RESPONSIVE DESIGN
 USO DEL MEDIA QUERIES CON NAVEGADORES
 USO DEL MEDIA QUERIES CON MENU
DESPLEGABLE
 MENU VERTICAL CON SUBMENU DESPLEGABLE Y
JS
Ejercicio 14
Ejercicio 15
En HTML, creamos:

<div class="triangulo"></div>

En CSS, creamos:

Ejercicio 16
Para crear la viñeta tipo triangulo, colocamos
transparente los tres lados que no queremos ver,
asi:
En HTML:

Ejercicio 17
En CSS3:
La transformacion en CSS3 es un efecto que
permite a un elemento cambiar de forma, tamaño
o posición.

La transformación en si no es ninguna animación,

sino que simplemente se muestra el elemento
cambiado, sin embargo las transformaciones
pueden utilizarse en animaciones y transiciones, de
manera que vemos cómo el elemento cambia de
forma, tamaño o posición.

Tenemos dos tipos de transformaciones, las 2D o en

el plano, y las 3D o en el espacio. Comenzaremos
por las transformaciones en el plano o 2D.
La propiedad transform

Todas las transformaciones se consiguen por medio de

la propiedad transform, la cual tiene como valor
diversos métodos.
transform: <metodo>+;

El método actúa como una función interna. La forma de

escribir un método es igual que una llamada a una
función, tal como hacemos en javascript o php.

transform: metodo(a,b);

donde metodo es siempre una palabra clave y a,b son

los parámetros o argumentos que le pasamos al
método. Veamos los distintos métodos de la
propiedad transform.
NAVEGADORES

Hasta hace poco tiempo esta propiedad sólo funcionaba en los

navegadores de forma experimental.
Hoy en dia Firefox y Internet Explorer 10 han adoptado ya la
forma estándar.

Para Chrome y Safari debemos usar el prefijo

-webkit-

Para Ópera el prefijo

-o-

Internet Explorer 9 admite también la propiedad con el pefijo

-ms-.
El método translate: cambia de posición el elemento
(traslación), moviendolo hacia donde indican los
parámetros.

transform: translate(30px,5px);

Dentro del paréntesis pondremos dos parámetros, el

primero es la traslación que se produce en horizontal,
hacia la derecha, (eje X), y el segundo la traslación en
vertical, hacia abajo (eje Y).

Los parámetros deben ser siempre medidas de longitud,

si su valor es negativo el elemento se desplazara hacia
la izquierda (primer parámetro) o hacia arriba (segundo
parámetro).
Ejercicio:
Con translación:

Ejercicio 18
El método rotate: gira el elemento respecto a su
posición original, el ángulo de giro viene indicado
en el parámetro:

transform: rotate(30deg);

El ángulo de rotación indicado en el parámetro

puede indicarse en grados (deg) o en radianes (rad),
veamos un ejemplo:
Con rotación:
El método scale: aumenta o reduce de tamaño el
elemento original (escalar). Los ejes horizontal y
vertical se controlan independientemente, por lo que
podemos escalarlo de distinta manera en los dos ejes.
los parámetros son números que indican la proporción
en la que se debe aumentar o reducir. los decimales
menores que 1 reducen el tamaño.

transform: scale(1.2,0.8);

Este método utiliza dos parámetros, que son dos

números, el primer número indica indica la proporción
en el eje X (horizontal), y el segundo en el eje Y
(vertical). Veamos un ejemplo:
Con escala:
El método skew sesga el elemento original, es
decir lo convierte en un romboide. para ello se
inclinan los lados horizontal y vertical en los
ángulos indicados.

transform: skew(10deg,15deg);

El primer parámetro indica la inclinación de los

lados verticales, y el segundo el de los lados
horizontales. Los parámetros son medidas de
ángulos los cuales se pueden poner en grados (deg)
o en radianes (rad). Los ángulos negativos inclinan
el elemento hacia el lado contrario.
Con distorsión:
Todo el mundo ama el movimiento. Adición de la cuarta
dimensión (tiempo) de un diseño del sitio es la principal
forma de diseño basado en pantallas se destaca de
diseño de impresión.

Las transiciones CSS son un método sencillo para las

propiedades de un elemento que le permite enriquecer
ciertos eventos en el diseño de su web, sin necesidad
de Flash o animación JavaScript.

El W3C describe muy bien las transiciones en su página

web como “transiciones CSS permite que los cambios de
propiedad en los valores de estilo CSS que se produzca
sin problemas durante un tiempo determinado”.
En otras palabras, las transiciones CSS nos permiten
modificar una propiedad de forma incremental,
creando una sensación de movimiento y de infundir
diseños con sutileza y emoción que no es posible
con un cambio rápido.

Todos los navegadores modernos (sí, incluso IE!)

Ahora soportan las transiciones CSS. Sin embargo,
lo más importante, si las transiciones no son
compatibles con el navegador utilizado, la
transición se ignora y los cambios de propiedad se
puede aplicar inmediatamente.
Parámetros de transición

Hay cuatro parámetros para transiciones CSS:

 transition-property: la propiedad que se va a

interpolar, o la palabra clave “todos” para aplicar a
todas las propiedades;

 transition-duration: la duración de la transición;

 transition-timing-function: la disminución que debe

aplicarse, esto crea el movimiento más natural

 transtion-delay: especifica un retraso del inicio de

la transición.
Las propiedades que pueden hacer la transición

Sólo se pueden aplicar las propiedades de transicion que pueden traducirse en un

valor matemático. Así, por ejemplo, usted puede pasar font-size, pero no se puede
pasar font-face. La lista completa de las propiedades que actualmente se pueden
aplicar la transición es la siguiente:
Ejemplo 1:
Ejemplo 2: varios elementos simultáneos.

Ejercicio 19
Ejemplo 3: Animación de colores

Creamos un div Ejercicio 20

Animamos para que cambie de color de azul a rojo,

en el css:
from = 100% de la animacion
to =100% de la animacion
Para que la animación tenga varias posiciones,
debemos ponerle %. De la siguiente manera:
Ahora debemos realizar la animación de posición:
Para ello debemos definir la position:relative.
Ademas debemos posicionar cada uno de los fotones
en la animación, para ello:

0% = posicion original left:0px top:0px

20% = moverlo a la derecha left:100px top:0px
50% = en la derecha bajarlo left:100px top:100px
100% = posicion original left:0px top:0px
En HTML:

Ejercicio 21
En CSS3:
Para crear los bordes personalizados se usa en CSS3
la propiedad border-image.

Con esta propiedad el navegador tomara una única

imagen, la cortara en trozos y la ensanchara o
estrechara cada una de esas piezas a lo largo de
cada borde.

Junto con la propiedad border-image se usa la

propiedad border.width para especificar el ancho
de cada uno de sus bordes.
El atributo final que usamos en border-image son:

 STRETCH: El navegador estira los cuatro bordes

de la imagen, mas el centro.
 SPACE: El navegador remite las imágenes de los
bordes hasta cubrirlo, justo dejando espacio.
 REPEAT: El navegador repite las imágenes de los
bordes hasta cubrirlo.
 ROUND: El navegador repite las imágenes de los
bordes hasta cubrirlo, justo redimensionandolo.
En el HTML:

Ejercicio 22

En el CSS:
Para usar una fuente de Google Font debemos
entrar al sitio web y seleccionar la fuente deseada
y luego copiar el link de dicha fuente:

Y adicionarla en nuestro código html.

Luego seleccionar la fuente deseada en nuestra
propiedad de font- family:
Ejercicio 23
EN HTML: Ejercicio 24
EN CSS:
En el navegador:
La etiqueta meta para el viewport fue introducida por Apple en
Safari para móviles, para ayudar a los desarrolladores a mejorar la
presentación de sus aplicaciones web en un iPhone, iPod Touch o
iPad.

La etiqueta viewport nos permite a los que construimos sitios

web o web apps, definir el ancho, alto y escala del área usada
por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos

usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos
constantes, device-width y device height respectivamente.
Se considera una buena práctica configurar
el viewport con algunas de estas dos
constantes, en vez de un ancho o alto fijo.
Muchos desarrolladores caen en el error de
configurar el viewport con un width de 320,
siendo este el ancho del iPhone.

Utilizando las constantes, se verá de mejor

forma no solo en el iPhone sino que en
muchos “mobile browsers”más.
EN HTML:

Ejercicio 25
En CSS:
Sitio web en el navegador:
Con media queries a 800px:
Con media queries a 400px:
En html:

Ejercicio 26
En CSS:
Media queries a 780px
Media queries a 500px:
En html:

Ejercicio 27
En css:
EN HTML:
EN CSS: