Utilizando imagen responsive y video

Cambiando la imágen según la resolución

Utlizamos 4 imágenes que se mostrarán y cambiarán según la resolución de pantalla del usuario, puedes probarlo haciendo más pequeña la estrecha del navegador. Para cambiar la imágen según el tamaño de resolución hemos puesto el siguiente código:

<picture>
<source media="(min-width:1100px)" srcset="images/0.jpg">
<source media="(min-width:800px)" srcset="images/1.jpg" width="100%">
<source media="(min-width:500px)" srcset="images/2.jpg" width="100%">
<source media="(min-width:400px)" srcset="images/3.jpg" width="100%">
<img src="images/0.jpg" width="100%">
</picture>

 

Puedes verlo en acción redimensionando esta pantalla

Insertado iconos de Font Awesome

Font Awesome es una colección de iconos vectoriales completamente customizables que puedes usar y cambiar el color y el tamaaño y todo esto gracias al poder de CSS.

Utilizarlos es realmente facil, simplemente debes de poner el siguiente código en tu cabecera, dentro de las etiquetas <head>


<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>

 

Luego simplemente debes elegir de entre sus cientos de iconos el que más te interese y usarlo añadiendo el pequeño fragmento que te da y pegandolo en donde lo quieras mostrar. Por ejemplo:

<i class=”fa fa-heart-o” aria-hidden=”true”></i> Tu texto

El resultado será este: Tu texto

Puedes ver la galería de iconos haciendo click aquí

See the Pen Iconos de FontAwesome / FontAwesome Icons by Ricardo Izquierdo (@riczurdo) on CodePen.

Plantilla de Smartphone con web incluida

Lo que veis aquí arriba no es una imagen, es un teléfono –un toque Iphone– realizado únicamente con HMTL y CSS3

Lo que he hecho es muy sencillo, consiste en poner un fondo con un degradado, encima un div que será la parte negra del teléfono. Dentro de este divo otro div con lo que será el contenido del teléfono.

Para los detalles he hecho dos circulos en la parte superior que serán la cámara y auricular y el circulo inferior que servirá de botón, un poco de sombras y listo.

HACIENDO UN TELEFONO CON ESTILOS CSS3 Y HTML. Ideal para mostrar una web o un boceto de app

En cuanto a los estilos para darle forma, muy facil, el “div carcasa” es un rectangulo con las puntas redondas, y el “div contenido” es otro rectangulo sencillo.

Dentro del “div contenido” he puesto un object, aunque puede ponerse un iframe o una imagen estática o lo que se te ocurra, el límite como siempre, es la imaginación..

MAKING OFF

See the Pen CSS3 Smartphone Template with object tag included by Ricardo Izquierdo (@riczurdo) on CodePen.