Crea elementos web con HTML5 y CSS3

Contenido
Cdigos HTML y CSS3
Creando un Elemento Web E-Commerce con CSS3..................................................................................................... 1

Paso 1: Formato HTML ............................................................................................................................................. 1
Paso 2: El estilo bsico ............................................................................................................................................. 1
Paso 3: la vista previa y botones de compra............................................................................................................ 2
Paso 4: La descripcin del producto ........................................................................................................................ 5
Paso 5: Detalles (Valoracin) ................................................................................................................................... 7
Resultado Final: ........................................................................................................................................................ 8
Men Desplegable con Cuadro de Bsqueda en CSS3 y HTML ................................................................................... 8
Cdigo HTML: ........................................................................................................................................................... 8
1. Estilos bsicos....................................................................................................................................................... 9
2. Navegacin y la lista de items .............................................................................................................................. 9
3. Links.................................................................................................................................................................... 10
4. Cuadro de bsqueda .......................................................................................................................................... 10
5. El Desplegable .................................................................................................................................................... 12
Animaciones de Carga con CSS .................................................................................................................................. 12
Ejemplo de Carga N 01: ........................................................................................................................................ 12
Como Crear Botones con Css3 ................................................................................................................................... 25
Botn Css3 con Efecto 3D Animado ........................................................................................................................... 27
Limitar Nmero de caracteres en Textarea con JavaScript ....................................................................................... 29
Mostrar Google Maps en mi Web.............................................................................................................................. 30
Efecto hover con CSS para una lista de Links ............................................................................................................. 31
Como rotar una Imagen con CSS................................................................................................................................ 32
Galera de Imgenes con jQuery ................................................................................................................................ 33
Aplicar Degradados a un Elemento con HTML5 y CSS3 ............................................................................................. 34
Creando Formulario en html ...................................................................................................................................... 35
Formulario de Login con CSS3 .................................................................................................................................... 37
Paso 1 - El HTML ..................................................................................................................................................... 37
Paso 2 - A partir del CSS ......................................................................................................................................... 37
Paso 3 - El Diseo ................................................................................................................................................... 38
Paso 4 - Diseo Forma Acabado............................................................................................................................. 40
Paso 5 - El estilo del fondo ..................................................................................................................................... 42
Cambiar estilos de Checkbox y Radio Button con CSS3 ............................................................................................. 43
Reproductor de Audio con jQuery, HTML5 y CSS3 .................................................................................................... 45
Paso 3 - Estilos de contenedores ........................................................................................................................... 46
Paso 4 - Ttulo y cubierta........................................................................................................................................ 47
Paso 5 - Controles Botones .................................................................................................................................... 47
Paso 6 - Deslizador de volumen ............................................................................................................................. 48
Paso 7 - Barra de progreso ..................................................................................................................................... 48
Paso 8 - Progres y manija Volumen ....................................................................................................................... 49
Paso 9 - Tooltip Tiempo ......................................................................................................................................... 49
Cmo crear un Reproductor de Vdeo con CSS, HTML5 y jQuery.............................................................................. 50
Paso 1 - Descarga de MediaElement.js .................................................................................................................. 50
Paso 2 - Formato HTML .......................................................................................................................................... 50
Paso 3 - Estilos bsicos de vdeo ............................................................................................................................ 51
Mtro. Ivn Ortiz Ramrez
Cdigos HTML y CSS3
Paso 4 - Controles Container ................................................................................................................................. 53

Paso 5 - Botones de control de vdeo .................................................................................................................... 53
Paso 6 - Deslizador de volumen ............................................................................................................................. 54
Paso 7 - Barra de progreso ..................................................................................................................................... 55
Paso 8 - Barra de progreso de la manija y hora actual Tooltip .............................................................................. 56
Paso 9 - La Pendiente verde(o el color que gustes) ............................................................................................... 56
Conclusin .............................................................................................................................................................. 57
Tabla de Precios con CSS3 .......................................................................................................................................... 57
Paso 1 HTML ........................................................................................................................................................ 57
Paso 2 - CSS bsico ................................................................................................................................................. 59
Paso 3 - Plan de la Seccin ..................................................................................................................................... 59
Paso 4 - Artculo Precio .......................................................................................................................................... 60
Paso 5 - Seccin Funciones .................................................................................................................................... 62
Paso 6 - Seccin de descripcin ............................................................................................................................. 63
Cmo crear un Slider con jQuery y CSS3.................................................................................................................... 63
PASO 2 - Estilos Bsicos.......................................................................................................................................... 64
PASO 3 - Estilos de contenedores .......................................................................................................................... 65
PASO 4 - Las flechas Siguiente y Anterior .............................................................................................................. 66
PASO 5 - Controles deslizantes .............................................................................................................................. 68
PASO 6 Leyendas ................................................................................................................................................. 69
Cdigos HTML y CSS3
Creando un Elemento Web E-Commerce con

CSS3
Paso 1: Formato HTML
En primer lugar, incluir esta lnea en la cabeza de su archivo HTML, ya que vamos a utilizar la fuente "Open Sans"
de Google Web Fonts:
<link href='http://fonts.googleapis.com/css?
family=Open+Sans:600,700' rel='stylesheet' type='text/css'>
El contenedor principal del elemento ser el div con el bloque de clase. Dentro de l, hay otros tres divs: la
primera muestra la imagen en miniatura del producto y dos botones (producto), el segundo
contiene informacin sobre el producto (informacin) y el ltimo contiene detalles adicionales, como la
calificacin del producto:
<div class="block">
<div class="product">
<img src="img/product.jpg">
<div class="buttons">
<a class="buy" href="#">Aadir a la cesta</a>
<a class="preview" href="#">Ver artculo</a>
</div>
</div>
<div class="info">
<h4>
AB COASTER cs 2000</h4>
<span class="description">
Resultados inmediatos!!! Abdominales perfectos de una manera rpida y sin esfuerzos.
</span>
<span class="price">$349.90</span>
<a class="buy_now" href="#">Compre Ahora</a>
</div>
<div class="details">
<span class="time">Hace 12 horas</span>
<ul class="rating">
<li class="rated"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
Paso 2: El estilo bsico
Vamos a empezar con el contenedor principal: lo haremos 295 pxeles de ancho y vamos a aadir esquinas
redondeadas, un fondo blanco y una sombra sutil.
.block {
display: block;
Pgina 1
Cdigos HTML y CSS3
position: relative;
width: 295px;
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
Ahora, el div que contiene la imagen en miniatura del producto:
.product {
display: block;
position: relative;
La imagen real tambin tendr esquinas redondeadas y tomar el ancho de su contenedor:
.product img {
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
A continuacin, los divs que contienen la informacin sobre el producto:
.info {
display: block;
position: relative;
padding: 20px;
}
.details {
border-top: 1px solid #e5e5e5;
padding: 18px 20px;
}
Paso 3: la vista previa y botones de compra
Los botones estn contenidos por el div con los botones de la clase. Cuando la imagen en miniatura del producto
se cerna, los botones deben aparecer con una transicin. En primer lugar, vamos a cuidar de la div, que contar
con un fondo blanco semitransparente cuando la imagen de vista previa se cerna:
.buttons {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
-webkit-transition: opacity .25s ease-in;
-ms-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
Pgina 2
Cdigos HTML y CSS3
-o-transition: opacity .25s ease-in;

transition: opacity .25s ease-in;
.product:hover .buttons, .product:hover a {

opacity: 1;
}
A continuacin, algunos estilo bsico para los botones:
.buttons a {
display: block;
position: absolute;
left: 50px;
width: 115px;
border-radius: 2px;
padding: 15px 10px 15px 65px;
font-family: Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-decoration: none;
opacity: 0;
}
Los iconos de los botones se encuentran por pseudo-elementos:
.buttons a::after {
content: "";
display: block;
position: absolute;
height: 48px;
width: 50px;
border-right: 1px solid rgba(0, 0, 0, .25);
box-shadow: 1px 0 0 rgba(255, 255, 255, .17);
top: 0;
left: 0;
z-index: 1;
}
Ahora, echemos un estilo a cada botn individualmente. En primer lugar, el "Aadir al carrito" botn. El botn
tiene un fondo negro semi-transparente y ser colocado en posicin vertical utilizando porcentajes, porque
las imgenes de vista previa tienen un ancho fijo, pero su altura es variable:
a.buy {
top: 20%;
background: #414141;
background: rgba(0, 0, 0, .85);
-webkit-transition: background .2s ease-in;
-ms-transition: background .2s ease-in;
Pgina 3
Cdigos HTML y CSS3
-moz-transition: background .2s ease-in;

-o-transition: background .2s ease-in;
transition: background .2s ease-in;
En hover, el fondo ser un poco ms claro:

.buy:hover {
background: rgba(45, 45, 45, .85);
}
Ahora, vamos a configurar el icono de fondo de pseudo-elemento del botn aadir a cesta:
.buy::after {
background: url("img/cart-icon.png");
background-repeat: no-repeat;
background-position: 12px 18px;
}
Vamos a aadir un poco de estilo al botn "Ver artculo" tambin. Como te habrs dado cuenta, el botn "Aadir
al carrito", cambia su fondo en vuelo estacionario con una transicin. Por desgracia, este botn tiene un gradiente
de fondo, pero las transiciones no funcionar con gradientes. As que, cul es la solucin? Bueno, vamos a
aumentar el tamao del fondo, as que ser ms grande que el botn real, entonces vamos a utilizar backgroundposition para desplazar el degradado de fondo en vuelo estacionario. Tambin, el botn tiene un sutil efecto 3D y
es "se puede empujar". Vamos a crear el efecto 3D con caja de sombra y el efecto "push" el uso de
transformaciones CSS.
a.preview {
bottom: 20%;
text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
background: -webkit-linear-gradient(bottom, #1d4970, #639ed3);
background: -ms-linear-gradient(bottom, #286398, #639ed3);
background: -moz-linear-gradient(bottom, #286398, #639ed3);
background: -o-linear-gradient(bottom, #286398, #639ed3);
background-position: 0 -15px;
background-size: 400px 80px;
box-shadow: 0 2px 0 #165181;
-webkit-transition: background-position .2s ease-in;

-ms-transition: background-position .2s ease-in;
-moz-transition: background-position .2s ease-in;
-o-transition: background-position .2s ease-in;
transition: background-position .2s ease-in;
.preview:hover, .buy_now:hover {
background-position: 0 0;
Pgina 4
Cdigos HTML y CSS3
.preview:active, .buy_now:active {
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
box-shadow: none;
}
Agregamos el iciono ver eye-icons.png y vamos a establecer como fondo:
.preview::after {
background: url("img/eye-icon.png");
background-position: 12px 11px;
}
Paso 4: La descripcin del producto
Como habr podido observar en la vista previa, hay un pequeo tringulo en la parte inferior de la imagen del
producto / artculo. Crearemos ese tringulo con un pseudo-elemento del div con la informacin de clase. El
tringulo ser en realidad un cuadrado rotado 45 grados utilizando transformaciones CSS:
.info::after {
display: block;
position: absolute;
top: -12px;
left: 23px;
content: "";
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
A continuacin, vamos a aadir un poco de estilo al nombre del elemento. Adems, vamos a aadir una lnea azul
en su parte inferior con un pseudo-elemento:
.info h4 {
position: relative;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 25px;
color: #372f2b;
Pgina 5
letter-spacing: -1px;
Cdigos HTML y CSS3
.info h4::after {
display: block;
position: absolute;
bottom: 0px;
content: "";
width: 40px;
height: 2px;
background: #3b86c4;
}
Ahora, vamos a formatear un poco la descripcin del item:
.info .description {
display: block;
padding-bottom: 20px;
font-size: 14px;
font-weight: 600;
color: #5f5f5f;
}
El precio del Producto:
.info .price {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
color: #372f2b;
line-height: 26px;
}
Y ahora el botn "Compre ahora":
.buy_now {
float: right;
position: relative;
top: -5px;
display: block;
padding: 10px 10px;
border-radius: 3px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
font-weight: bold;
font-size: 15px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
Pgina 6
Cdigos HTML y CSS3
background: -webkit-linear-gradient(bottom, #1d4970, #639ed3);
background: -ms-linear-gradient(bottom, #286398, #639ed3);
background: -moz-linear-gradient(bottom, #286398, #639ed3);
background: -o-linear-gradient(bottom, #286398, #639ed3);
background-position: 0 -15px;
background-size: 400px 80px;
-webkit-transition: background-position .2s ease-in;
-ms-transition: background-position .2s ease-in;
-moz-transition: background-position .2s ease-in;
-o-transition: background-position .2s ease-in;
transition: background-position .2s ease-in;
}
box-shadow: 0 2px 0 #165181;
Paso 5: Detalles (Valoracin)
En el paso final, nosotros nos encargamos de los detalles adicionales, como el momento en que se aadi el
producto o la clasificacin del producto. En primer lugar, vamos con el icono del reloj.
.time {
padding-left: 25px;
font-size: 14px;
font-weight: 700;
color: #372f2b;
background: url("../img/clock-icon.png") no-repeat;
background-position: 0 2px;
}
Ahora, vamos a crear el sistema de calificacin utilizando una lista desordenada. El principio es muy simple. De
forma predeterminada, cada elemento de la lista tendr una estrella gris como fondo. Si el producto tiene una
clasificacin de cuatro estrellas, los primeros cuatro elementos de la lista tendrn la clase calificada y una estrella
amarilla como fondo. Vamos a empezar por la creacin de una imagen de sprites para las estrellas las cuales sern
2 imagenes en forma vertical, esta imagen como las demas lo pueden encontrar en el archivo que dejare al final.
En primer lugar, vamos a dar formato a la lista sin ordenar un poco. Vamos a eliminar el margen y el relleno, y
luego saldremos a flote a la derecha:
.rating {
position: relative;
top: 2px;
float: right;
margin: 0;
padding: 0;
}
Pgina 7
Cdigos HTML y CSS3
A continuacin, los elementos de la lista. Nosotros mostraremos ellos en lnea con flotador y vamos a utilizar la
imagen de sprites obtenido como fondo:
.rating li {
float: left;
display: block;
height: 16px;
width: 16px;
margin-left: 5px;
background: url("stars.png") no-repeat 0 0;
}
.rating li.rated {
background-position: 0px -16px;
}
Resultado Final:
Men Desplegable con Cuadro de Bsqueda en

CSS3 y HTML
Cdigo HTML:
La navegacin se compone de una lista no ordenada (NAV.) Que contiene varios tipos de elementos dentro de
ellos:
Lista de tareas (LIS), que contienen enlaces normales no tienen id / clase.
# settings contiene un vnculo basado en la imagen.
# de bsqueda contiene el campo de bsqueda, junto con un botn de envo.
# opciones contiene un enlace, as como una lista desordenada (. subnav) que acta como un men
desplegable.
Al final se incluye prefixfree que nos permite usar las propiedades CSS slo sin prefijo en todas partes.
Pgina 8
Cdigos HTML y CSS3
<ul class="nav">
<li id="settings">
<a href="#"><img src="settings.png" /></a>
</li>
<li>
<a href="#">Application</a>
</li>
<li>
<a href="#">Board</a>
</li>
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"></a>
</form>
</li>
<li id="options">
<a href="#">Options</a>
<ul class="subnav">
<li><a href="#">Configuracion</a></li>
<li><a href="#">Aplicacion</a></li>
<li><a href="#">Tablero</a></li>
<li><a href="#">Opciones</a></li>
</ul>
</li>
</ul>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
Y ahora le aplicamamos CSS a cada elemento:
1. Estilos bsicos
Empezamos con un CSS bsico restablecer e importar 'Montserrat' una fuente personalizada de Google Fonts.
@import url(http://fonts.googleapis.com/css?family=Montserrat);
*{
margin: 0;
padding: 0;
}
2. Navegacin y la lista de items
El elemento principal de navegacin tiene un fondo gris oscuro y una altura fija. Los elementos de la lista se
flotaron a la izquierda y estn posicionados relativamente para que puedan contener el men desplegable que
est posicionada absolutamente ms adelante.
.nav {
height: 60px;
display: inline-block;
}
Pgina 9
.nav li {
float: left;
list-style-type: none;
position: relative;
}
Cdigos HTML y CSS3
3. Links
Los enlaces tienen un estilo bsico. Ellos utilizan la fuente Montserrat importamos antes de Fuentes de Google.
Un tono blanco sutil se aade para que el texto suavey audaz. Los enlaces tienen una altura de lnea 60px, que es
igual a la de. Nav. Los enlaces tambin tienen un efecto de activacin donde se cambia el fondo a una versin ms
ligera del fondo gris.
# settings contiene un enlace de imagen por lo tanto, su trazado se ajusta para optimizar el icono de
configuracin aparece en el centro.
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #2e2e2e;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
4. Cuadro de bsqueda
# search se proporciona con un ancho fijo y un pequeo margen o 4px alrededor de ella.
# search_text se flota a la izquierda y se proporciona con un fondo verde que anima a un tono
ms claro en vuelo estacionario.
# search_button tambin flotaba hacia la izquierda para hacer que se alinean con # texto_bsqueda
horizontalmente. Se utiliza un icono de bsqueda como su fondo que se coloca en su centro.
Pgina 10
Cdigos HTML y CSS3
El estilo del marcador de posicin es un asunto difcil. Parece gris en algunos navegadores. Esta respuesta en
Stackoverflow ofrece una visin completa de cmo hacerlo
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 a 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: rgb(64, 151, 119);
}
#search_button {
border: 0 none;
background: #1f7f5c url(search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
Pgina 11
5. El Desplegable
Cdigos HTML y CSS3
# options de las cuales contiene un men desplegable se le da un icono de tringulo como fondo a la derecha
para hacerlo ms intuitivo.
. subnav est oculto por defecto mediante una combinacin de CSS visibilidad y propiedades de opacidad. Su
posicionado en el 110% de la parte superior. En la parte superior se site a 100%, junto con las propiedades de
visibilidad que dan un efecto fresco flotar en el men desplegable de la opacidad y.
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
Se puede modificar a su gusto.
Animaciones de Carga con CSS
Ejemplo de Carga N 01:
Vamos a empezar con algo muy sencillo como siempre. Nuestra pequea esfera est funcionando infinitamente
de izquierda a derecha en el bar. El movimiento es importante que el usuario comprenda la aplicacin / pgina
web est haciendo algo.
Pgina 12
Cdigos HTML y CSS3
El cdigo html ser simple:

<html>
<head><title>Animaciones de Cargar con CSS</title></head>
<body>
<div class="bar">
<i class="sphere"></i>
</div>
</body>
</html>
Pretty minimalista, pues vamos a hacer algo muy bonito y todo con css pues le agregamos los estilos css para
mejorar su aspecto.
En primer lugar, vamos a crear el contenedor de la esfera: el bar. Para conservar las proporciones y hacer los
preloaders escalable, he utilizado la unidad em. Simplemente cambie el valor de font-size en el envoltorio de
escalar todo a su gusto.
.demo-1 .bar {
/* Size and position */
font-size: 20px; /* 1em */
width: 10em;
height: 1em;
position: relative;
margin: 100px auto;
/* Styles */
border-radius: .5em; /* Height/2 */
background: white; /* Fallback */
background: rgba(255,255,255,0.6);
box-shadow:
0 0 0 .05em rgba(100,100,100,0.075),
0 0 0 .25em rgba(0,0,0,0.1),
inset 0 .1em .05em rgba(0,0,0,0.1),
0 .05em rgba(255,255,255,0.7);
}
Vamos a tratar de inmediato con el "Por favor, espere.". Usted probablemente ha notado que no aparece en el
marcado: eso es porque se genera contenido. En realidad, debera estar en el margen de beneficio en un caso real
en vivo, no slo cosas grfico. Sin embargo, para la demo, pens que podra ser suficiente para generarlo.
.demo-1 .bar:after {
/* Content and position */
content: "Por favor Espere";
Pgina 13
position: absolute;
left: 25%;
top: 150%;
Cdigos HTML y CSS3
/* Font styles */
font-family: 'Carrois Gothic', sans-serif;
font-size: 1em;
color: #555;
text-shadow: 0 .05em rgba(255,255,255,0.7);
As que en caso de que quiera hacer de esto un elemento real, basta con crear una vida o lo que sea, le dan esos
estilos y listo. Ahora, echemos un vistazo a la esfera.
.demo-1 .sphere {
/* Size */
display: block;
width: 1em;
height: 100%;
/* Styles */
border-radius: 50%;
background: linear-gradient(#eee, #ddd);
box-shadow:
inset 0 .15em .1em rgba(255,255,255,0.3),
inset 0 -.1em .15em rgba(0,0,0,0.15),
0 0 .25em rgba(0,0,0,0.3);
/* Animation */
animation: move 1.75s ease-in-out infinite alternate;
Por ltimo, pero no menos importante, los fotogramas clave que ejecutan la animacin:
@keyframes move {
to { margin-left: 90%; }
}
Como no poda ser ms fcil, no? Por lo tanto el elemento esfera corre la animacinse mueven en 1,75
segundos alternativamente desde el principio hasta el final yterminar para comenzar.
Nota: una manera fcil de convertir este preloader en un indicador de progreso sera eliminar el
parmetro alternativo en la declaracin de la animacin, y establecer eltiempo de animacin de acuerdo basado
en el tiempo que desea que el usuarioespera.
Si desea actualizar dinmicamente la posicin del elemento basado en la progresin de la carga, que tendra
que esta pareja con un poco de JavaScript, por supuesto.
Ahora continuemos con algo un poco ms complicado. Pero no demasiado! Una rotacin
Pgina 14
Cdigos HTML y CSS3
El elemento Div que usaremos para este efecto sera:

<div class="spinner">
</div>
Bueno agregamos el estilo CSS para lograr nuestro efecto deseado,usted podra elegir cualquier color que te
gusta. Lo mismo para el nmero de colores, tom dos, pero que poda ir con cuatro. O slo uno. O cualquier otro.
.demo-2 .spinner {
/* tamao y posicin */
width: 1em;
height: 1em;
position: relative;
margin: 100px auto;
/* Styles */
border-radius: 50%;
background: #FF4F72;
background:
linear-gradient(#ea2d0e 50%, #fcd883 50%),
linear-gradient(#fcd883 50%, #ea2d0e 50%);
background-position:
0 0, /* Position of 1st column */
100% 0; /* Position of 2nd column */
background-size: 50% 100%; /* Contraction of "50% 100%, 50% 100%" */
box-shadow:
inset 0 0 0 .12em rgba(0,0,0,0.2),
0 0 0 .12em rgba(255,255,255,0.1);
opacity: 0.7;
animation: rota 3s infinite alternate;
}
Ahora, un pseudo-elemento para el crculo blanco transparente interior
.demo-2 .spinner:after {
/* Size */
content: "";
width: 50%;
height: 50%;
/* Perfect centering */
position: absolute;
Pgina 15
top: 25%;
left: 25%;
Cdigos HTML y CSS3
/* Styles */
border: .12em solid rgba(255,255,255,0.3);
border-radius: inherit;
Y porsupuesto la animacin.
@keyframes rota {
25% { transform: rotate(270deg); }
50% { transform: rotate( 90deg); }
}
Ahora vamos a profundizar en algo un poco ms complicado. Pero no te preocupes, no es tan difcil. En realidad,
trat de simular el comportamiento aleatorio en CSS. Larga historia corta: es imposible a menos que establezca
valores totalmente extraos, y todava no es al azar, por supuesto. De todos modos, vamos a ver ms tarde.
El HTML para este no es muy bonita. Ya que no podemos animar a los pseudo-elementos, tenemos que usar
varios elementos para realizar esta accin. Fui con una lista (aunque no es muy semntica) pero se puede ir con lo
que quieras.
<ul class="spinner">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Lo primero que debe hacer es: estilo de la propia lista.
.demo-3 .spinner {
/* tamao y posicion */
width: 1em;
height: 1em;
margin: 100px auto;
position: relative;
/* Styles */
Pgina 16
Cdigos HTML y CSS3
list-style: none;
border-radius: 50%;
border: .01em solid rgba(150,150,150,0.1); /* Lnea blanca sutil rodeando los puntos */
Lnea blanca sutil rodeando los puntos

.demo-3 .spinner li {
width: .2em;
height: .2em;
position: absolute;
border-radius: 50%;
}
Y ahora, algunas explicaciones acerca de lo que viene. Cuando se carga la pgina, los cuatro puntos no se solapan
entre s, se colocan como puntos cardinales: norte, sur, este, oeste. Sin embargo, sus centros de rotacin estn
todos en el mismo lugar: el centro exacto de la hiladora.
.demo-3 .spinner li:nth-child(1) {
background: #00C176; /* Blue */
top: 0;
left: 50%;
margin-left: -.1em; /* Width/2 */
transform-origin: 50% 250%;
animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
}
background: #FF003C; /* Rojo */
top: 50%;
right: 0;
margin-top: -.1em; /* alto/2 */
transform-origin: -150% 50%;
animation:
}
background: #FABE28; /* amarillo */
bottom: 0;
left: 50%;
margin-left: -.1em; /* ancho/2 */
transform-origin: 50% -150%;
animation:
}
Pgina 17
Cdigos HTML y CSS3

background: #88C100; /* verde */
top: 50%;
left 0;
margin-top -.1em; /* altura/2 */
animation:
}
Por ltimo, las dos animaciones. Uno es para la rotacin y uno para la opacidad. S, la opacidad est cambiando
tambin!
@keyframes rota {
to { transform: rotate(360deg); }
}
@keyframes opa {
12.0% { opacity: 0.80; }
19.5% { opacity: 0.88; }
37.2% { opacity: 0.64; }
40.5% { opacity: 0.52; }
52.7% { opacity: 0.69; }
60.2% { opacity: 0.60; }
66.6% { opacity: 0.52; }
70.0% { opacity: 0.63; }
79.9% { opacity: 0.60; }
84.2% { opacity: 0.75; }
91.0% { opacity: 0.87; }
}
Vamos a continuar con una demostracin suave, un poco de punk tren de bits: ruedas, engranajes pues manos a
la obra
Bastante pesado en este tambin ya que tenemos que envolver cada letra en un palmo. Y necesitamos un
envoltorio para cancelar la rotacin principal elemento.
El HTML sera esto:
<div class="wrapper">
Pgina 18
<div class="inner">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
</div>
Cdigos HTML y CSS3
En primer lugar, tenemos muchas cosas para aplicar al elemento principal, como el tamao, la posicin, los estilos
de fuente, animacin, etc
.demo-4 .wrapper {
/* tamao y posicion */
width: 8em;
height: 8em;
margin: 100px auto;
position: relative;
/* Styles */
border-radius: 50%;
border: 1em dashed rgba(138,189,195,0.5);
box-shadow:
inset 0 0 2em rgba(255,255,255,0.3),
0 0 0 0.7em rgba(255,255,255,0.3);
animation: rota 3.5s linear infinite;
/* Font styles */
font-family: 'Racing Sans One', sans-serif;
color: #444;
text-align: center;
text-shadow: 0 .04em rgba(255,255,255,0.9);
line-height: 6em;
Ahora tenemos que crear las ruedas interiores con los pseudo-elementos.
.demo-4 .wrapper:before,
.demo-4 .wrapper:after {
content: "";
position: absolute;
z-index: -1;
border-radius: inherit;
box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
Pgina 19
border: 1em dashed;
Cdigos HTML y CSS3
.demo-4 .wrapper:before {
border-color: rgba(138,189,195,0.2);
top: 0; right: 0; bottom: 0; left: 0;
}
.demo-4 .wrapper:after {
border-color: rgba(138,189,195,0.4);
top: 1em; right: 1em; bottom: 1em; left: 1em;
}
Ahora la envoltura interior y las luces. Tenga en cuenta la forma en que usamos el parmetro inverso en el
recipiente interior para cancelar la rotacin principal del elemento.
.demo-4 .wrapper .inner {
width: 100%;
height: 100%;
animation: rota 3.5s linear reverse infinite;
}
.demo-4 .wrapper span {
animation: placeholder 1.5s ease-out infinite;
}
.demo-4 .wrapper span:nth-child(1)
{ animation-name: loading-1;
}
}
}
}
}
}
}
Lamentablemente, tenemos una animacin para cada letra, ya que deben ser retrasado. Al principio pens que la
animacin de retardo, pero esta propiedad slo retrasa la primera ejecucin, no cada uno de ellos.
@keyframes rota {
to { transform: rotate(360deg); }
}
@keyframes loading-1 {
14.28% { opacity: 0.3; }
}
28.57% { opacity: 0.3; }
}
Pgina 20
42.86% { opacity: 0.3; }
}
Cdigos HTML y CSS3
57.14% { opacity: 0.3; }
}
71.43% { opacity: 0.3; }
}
85.71% { opacity: 0.3; }
}
100% { opacity: 0.3; }
Esas animaciones pueden ser un poco difcil de entender, as que vamos a decirlo simple.
Cada letra tiene que:
1. Pierde un poco de opacidad
2. Volver a la opacidad completa
3. Espere hasta que todas las dems letras ha hecho lo mismo
4. Vuelva al paso 1 y repita
Cmo hacemos eso exactamente?
1. Se cuenta el nmero de cartas en tu elemento. Nuestra demo cuenta con 7.
2. Se divide 100 (el nmero de fotogramas clave, expresado en%) por este nmero. En este ejemplo, es igual
a 14,28 keyframes
3. Cada 14,28 fotogramas clave, una carta sigue su cosa.
4. Listo.
Vamos a terminar con algo un poco ms conceptual. S que la gente no le va a gustar mucho, pero dependiendo
de su sitio web / aplicacin, se podra considerar esto como una inspiracin =D.
A pesar de lo que parece, slo tenemos un solo elemento para lograrlo y es:
<div class="pre-loader">
</div>
Pgina 21
Cdigos HTML y CSS3
En realidad, nuestro elemento es slo una de nuestras pequeas esferas (el que est en la parte superior). Los
otros siete son de cajones-sombras.
.demo-5 .pre-loader {
/* tamao de fuente y posicin */
width: 1em;
height: 1em;
position: relative;
margin: 100px auto;
/* Styles */
border-radius: 50%;
animation:
blink 1s steps(1, start) infinite, /* parpadear */
counter-clock 8s linear infinite; /* Rotacin */
/ * Puntos, hacia la derecha * /

box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
El efecto cuadrada transparente se hace con un ... bueno, un cuadrado transparente. Es un pseudo-elemento
girado poner encima de todo lo dems. Bastante fcil.
.demo-5 .pre-loader:after {
content: "";
width: 3em;
height: 3em;
position: absolute;
left: -1em;
top: 1em;
/* estilos */
background: white;
}
Y ahora las animaciones. Algunas explicaciones sobre el segundo (parpadeo):
Pgina 22
Cdigos HTML y CSS3
Tenemos 8 balas, as que dividimos 100 fotogramas clave en 8: 12.5.

Cada 12,5 fotogramas clave, una bala pierde un poco de opacidad. rgb (18,52,86) es el cdigo RGB para #
123456.
En el primer cuadro (12,5%), que es el propio elemento que disminuye la opacidad.
@keyframes counter-clock {
to { transform: rotate(-360deg); }
}
@keyframes blink {
12.5% {
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
25% {
box-shadow:
1em 1em rgba(18,52,86,0.6),
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
37.5% {
box-shadow:
1em 1em #123456,
2em 2em rgba(18,52,86,0.6),
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
50% {
Pgina 23
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em rgba(18,52,86,0.6),
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
Cdigos HTML y CSS3
62.5% {
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em rgba(18,52,86,0.6),
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
75% {
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em rgba(18,52,86,0.6),
-2em 2em #123456,
-1em 1em #123456;
}
87.5% {
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em rgba(18,52,86,0.6),
-1em 1em #123456;
}
100% {
Pgina 24
Cdigos HTML y CSS3
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em rgba(18,52,86,0.6);
}
Y al fin terminamos, claro que se puede facilitar el proceso con algunas herramientas externas pero eso quiz lo
veamos ms adelante.
Como Crear Botones con Css3
Aprenderemos a crear botones con estilo css3 como border-radius, box-shadow,transition, linear-gradient por
cierto muy bonitos para que puedan usarlo en sus pginas web, obvio que los mejorarn an mas.
Pues Manos a la Obra!
El HTML aplicado para este demo sera:
<a href="#" class="button">Boton con CSS3</a>
Se ha creado un enlace simple al cual le agregamos el atributo class=button
El estilo CSS3
Primero crearemos nuestra clase .button definiendo su estilo basico.
.button{
background:#e5e5e5;
display:inline-block;
margin:0 6px;
padding:7px 20px 7px;
color:#333;
text-decoration:none;
text-shadow: 0 1px 1px #FFF;
border:1px solid #ccc;
}
El resultado seria este:
Redondeamos los bordes del boton con border-radius

Pgina 25
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
Cdigos HTML y CSS3
Ahora modificaremos el fondo(background) con un degradado vertical usando la propiedad css3 linear-gradient
Muy importante! hay que tener en cuenta la compatibilidad de los navegadores ya que no todos leen las mismas
reglas CSS
background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
background: -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
background: -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
background: linear-gradient(top, #fefefe, #e5e5e5);
Luego agregamos 3 tipos de sombras a la clase separadas por , con box-shadow yrgba para aplicar
transparencias.
-webkit-box shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 00 1px rgba(255,255,255,
.6), 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 01px rgba(255,255,255,
.6), 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1pxrgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
y para hacer cool nuestro boton le agregaremos un efecto de transicion, que se vera al pasar el cursor sobre el
boton :hover, con la propiedad css3 transition, con la cual se pueden realizar animaciones.
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
transition: all ease-in-out .3s;
Donde el Resultado ser:
.button{
background:#e5e5e5;
display:inline-block;
margin:0 6px;
padding:7px 20px 7px;
color:#333;
text-decoration:none;
text-shadow: 0 1px 1px #FFF;
border:1px solid #ccc;
/* Bordes redondenados - Border Radius */
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
/* Fondo Degradado - Background Gradient */
background:-webkit-linear-gradient(top, #fefefe, #e5e5e5);/* Chrome 10+ */
background: -moz-linear-gradient(top, #fefefe, #e5e5e5);/* Firefox 3.6+ */
background: -ms-linear-gradient(top, #fefefe, #e5e5e5);/* IE10 */
background:
linear-gradient(top, #fefefe, #e5e5e5);
/* Aplcamos sombras al boton - Box Shadow */
Pgina 26
Cdigos HTML y CSS3
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,

.6), 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 00 1px rgba(255,255,255,
.6), 0 1px 2px rgba(0, 0, 0, .1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1pxrgba(255,255,255,
.6), 0 1px 2px rgba(0, 0, 0, .1);
/* Animacion - Transition */
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
transition: all ease-in-out .3s;
}
Efecto :hover(Es aquel que va a cambiar cuando el mouse pase por encima del botn)Usando la propiedad css
:hover (ubicar el cursor sobre un elemento), modificaremos algunas propiedades de la clase .button para darle un
efecto elegante.
.button:hover{
border-color:#adcce2; /* Modificamos el color del borde */
/* Cambiamos los colores del fondo degradado */
background:-webkit-linear-gradient(top, #fefefe, #f1f1f1);/* Chrome 10+ */
background: -moz-linear-gradient(top, #fefefe, #f1f1f1);/* Firefox 3.6+ */
background: -ms-linear-gradient(top, #fefefe, #f1f1f1);/* IE10 */
background:
linear-gradient(top, #fefefe, #f1f1f1);
/* Modificamos las propiedades del Box Shadow para un efecto Glow */
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,
.6), 0 1px 6px rgba(36, 168, 229, .3);
-moz-box-shadow:inset 0 1px 0 rgba(251,247,193,.3), inset 0 00 1px rgba(251,247,193,
.3), 0 1px 6px rgba(36, 168, 229, .3);
box-shadow:inset 0 1px 0 rgba(251,247,193,.3), inset 0 0 0 1pxrgba(251,247,193,
.3), 0 1px 6px rgba(36, 168, 229, .3);
}
Botn Css3 con Efecto 3D Animado
Empezamos! creamos lo bsico con html.

<!DOCTYPE html>
<html>
<head>
<title>Botn Css3 con Efecto 3D Animado</title>
<link rel="stylesheet" href="button.css" />
Pgina 27
</head>
<body>
Cdigos HTML y CSS3
<a href="#Aqui URL" class="boton colorBoton formaBoton">CLIC AQUI!</a>

</body>
</html>
Ahora le daremos el efecto 3D, crearemos un archivo button.css el cual ser llamado desde el index o donde
queramos realizar el efecto.
.boton {
color: #fff;
font-weight: bold;
padding: 12px 20px;
font-size: 18px;
border-radius: 10px;
background-color: #666666;
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px
rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.2);
font-family: Arial, Helvetica, sans;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}
.boton:hover {
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px
color: #fff !important;
}
.boton:active {
top: 7px;
box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
color: #fff !important;
}
.formaBoton {
border-radius: 5px;
padding-left: 25px;
padding-right: 25px;
}
.colorRojo{
background-color: #c34747;
Pgina 28
Cdigos HTML y CSS3
box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px
}
.colorRojo:hover {
box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px
}
.colorRojon:active {
box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}
El Resultado lo podes ver aca(Clic al botn)
Limitar Nmero de caracteres en Textarea con

JavaScript
El cdigo javascript es el siguiente:

<style type="text/css">
body {font-family: arial, helvetica;}
textarea{background-color:#BFCFFF;}
</style>
<script type="text/javascript">
function limita(elEvento, maximoCaracteres) {
var elemento = document.getElementById("texto");
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
// Permitir utilizar las teclas con flecha horizontal
if(codigoCaracter == 37 || codigoCaracter == 39) {
return true;
}
// Permitir borrar con la tecla Backspace y con la tecla Supr.
if(codigoCaracter == 8 || codigoCaracter == 46) {
return true;
}
Pgina 29
Cdigos HTML y CSS3
else if(elemento.value.length >= maximoCaracteres ) {

return false;
}
else {
return true;
}
function actualizaInfo(maximoCaracteres) {
var elemento = document.getElementById("texto");
var info = document.getElementById("info");
if(elemento.value.length >= maximoCaracteres ) {
info.innerHTML = "Mximo "+maximoCaracteres+" caracteres";
}
else {
info.innerHTML = "Puedes escribir hasta "+(maximoCaracteres-elemento.value.length)+" caracteres
adicionales";
}
}
</script>
</head>
<body>
<div id="info">
Mximo 100 caracteres</div>
<textarea id="texto" onkeypress="return limita(event, 100);" onkeyup="actualizaInfo(100)" rows="6"
cols="30">
Mostrar Google Maps en mi Web
El codigo es:
<p>
<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<div id="map_canvas" style="width: 550px; height: 400px">
</div>
<script type="text/javascript">
// definimos las coordenadas
var latlng = new google.maps.LatLng(40.689913, -74.045341);
// definimos un array de opciones que se aadiran al mapa
var myOptions = {
zoom: 14,
center: latlng,
Pgina 30
Cdigos HTML y CSS3
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// definimos una marca
var marker = new google.maps.Marker({
// definimos la poisicion de nuestra marca en el mapa
position: map.getCenter(),
map: map,
// titulo que aparecera cuando pongamos el cursor encima
title: 'Titulo',
// aqui encontraras muchos tipos de iconos:
//http://gmaps-samples.googlecode.com/svn/trunk/markers/
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png',
cursor: 'default',
draggable: true
});
// definimos una vieta de informacin
var popup = new google.maps.InfoWindow({
content: 'Informacin para la<br/>vieta. Permite \
poner algo de<br/>cdigo <b>html</b>',
position: map.getCenter()
});
popup.open(map);
</script>
</p>
Efecto hover con CSS para una lista de Links
Creamo el div que contendr nuestros links

<div id="links">
<ul>
<li><a href="http://ellasyellas.com" title="Text">Link Heading One
<i>Descripcion de Link.</i>
<span>Descripcion</span></a></li>
<li><a href="http://detodoprogramas.com" title="Text">Link Heading One
<i>Descripcion de Link.</i>
<span>Descripcion</span></a></li>
</ul>
</div>
Y ahora el CSS Para que la orden de efecto hover sobre el bloque, funcione correctamente en IE, necesitamos
dar un width al link, igual que el item de la lista. De lo contrario, el efecto hover no se mostrara cuando
pasas el ratn por encima de los elementos de la lista.
#links ul {
list-style-type: none;
width: 400px;
}
Pgina 31
Cdigos HTML y CSS3
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a b {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
Nota: si deseamos que nuestros link abran en otra pestaa tendremos que agregarle despus de cada
link target="_blank" como por ejemplo si quiero que la pginas http://ellasyellas.com se abra en otra quedar
algo asi <a href="http://ellasyellas.com"target="_blank"></a> y listo.
Como rotar una Imagen con CSS
El cdigo para lograr que una imagen gire sera este:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#logo {
margin:100px;
-webkit-transition: all .6s ease-in-out; /* safari - Chrome*/
-moz-transition: all .6s ease-in-out; /* Firefox */
-o-transition: all .6s ease-in-out; /* Opera */
Pgina 32
Cdigos HTML y CSS3
transition: all .6s ease-in-out;

}
#logo:hover {
-webkit-transform: rotate(360deg); /* safari - Chrome*/
-moz-transform: rotate(360deg); /* Firefox */
-o-transform: rotate(360deg);
/* Opera */
}
</style>
</head>
<body>
<img src="<img src="http://www.detodoprogramas.com/wp-content/uploads/2013/06/DN.png"
id="logo">" id="logo">
</body>
Donde:
- all:Es el valor por defecto. Determina la propiedad de la transicion. Puede ser all,none,nombre de la propiedad
(Ejemplo la anchra: width).
- .6s : Determina la duracin de la transicion. En este caso son 0.6 segundos
- ease-in-out: especifica el efecto de la transicin... los tipos que hay son:
linear: La transicin es la misma al iniciar que al finalizar
ease: La transicin es lenta al iniciar, luego rapido y al finalizar muy lento
ease-in: La transicin es lenta al iniciar
ease-out: La transicin es lenta al finalizar
ease-in-out: La transicin es lenta al iniciar y al finalizar
cubic-bezier(n,n,n,n): Define los valores para la transicin van desde el 0 al 1
Galera de Imgenes con jQuery
Mano a la Obra y nada Mas!

Creamos un div donde mostraremos las imagenes y tambien pondremos las direcciones donde las tenemos
almacenadas.
<div class="fadein">
<img src="galleria/img01.jpg">
</div>
le damos un poco de estilo css para hacerlo an ms presentable

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
.fadein {
Pgina 33
background:#CCCCCC;
position:relative;
height:272px;
width:400px;
margin:0 auto;
padding: 20px;
}
.fadein img {
position:absolute;
left:20px; top:20px;
}
Cdigos HTML y CSS3
agregamos esta lnea de cdigo proporcionado por googleapis que es la libreria de jQuery que permitir que
funcione nuestra galera
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Y por ltimo agregamos este script que permite que la galara vaya cambiandoimagen tras imagen
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');},
3000);
});
</script>
3000: Podemos cambiarlo, es el tiempo que demorar cada imagen es pasar a la siguiente.
Aplicar Degradados a un Elemento con HTML5

y CSS3
El cdigo sera algo sensillo:

<div class="degradado">
El fonde de este div tiene un degradado<br />
<b>linear-gradient (origen del degradado, color origen, color destino)</b><br />
origen del degradado: tiene que indicar donde empieza el degradado (center top, top left, ...)<br />
color origen: determina el color inicial (#BFBFFF)<br />
color destino: determina el color final del degradado (#4D4DFF)
</div>
<input class="degradado" type="button" value="Ejemplo de botn" />
<br />
<style>
div{
height:200px;
width:600px;
padding:10px;
Pgina 34
Cdigos HTML y CSS3
}
input[type=button]{
padding:10px;
}
.degradado{
background: -webkit-gradient(linear, left top, left bottom, from(#BFBFFF), to(#4D4DFF));
background: -moz-linear-gradient(center top , #BFBFFF, #4D4DFF);
background: -o-linear-gradient(center top , #BFBFFF, #4D4DFF);
background: -ms-linear-gradient(center top , #BFBFFF, #4D4DFF);
background: linear-gradient(center top , #BFBFFF, #4D4DFF);
}
</style>
Creando Formulario en html
Este ejemplo muestra una formulario para un boletn de inscripcin. aunque no tiene mucho stylo css pero creo
que no es problema para aplarlo y quede a nuestro gusto.
Se utiliza una variedad de controles de formulario como son:
<form> utiliza el atributo de accin para indicar la pgina que los datos que se est enviando a.
<fieldset> se utiliza para agrupar los datos relacionados
<label> indica la finalidad de cada elemento de un control. del formulario
<input> para los botones,radios etc...
Bueno manos a la Obra!!
Creamos nuestro Form de esta forma
<form action="" method="get">
AQUI VA TODO EL CDIGO
</form>
Aadimos la primera parte del contenedor con la etiqueta <fieldset>
<fieldset>
<legend>Datos Personales:</legend>
<label><b>Nombres:</b> <input type="text" name="name" size="25" maxlength="100"></label>
<label><b>Email:</b> <input type="email" name="email" size="25" maxlength="100"></label><br />
</fieldset><br />
Quedara as:
Luego creamos el otro contener para los demas datos con la etiqueta <fieldset>
<fieldset>
<legend>Su Opinión:</legend>
<p>
<label for="hear-about">Cómo se enteró de nosotros?</label>
<select name="referrer" id="hear-about">
Pgina 35
Cdigos HTML y CSS3
<option value="google">Google</option>
<option value="friend">Amigos</option>
<option value="advert">Publicidad</option>
<option value="other">Otro</option>
</select>
</p>
<p>
Quieres visitarnos de nuevo?<br />
<label><input type="radio" name="rating" value="yes" /> Si</label>
<label><input type="radio" name="rating" value="no" /> No</label>
<label><input type="radio" name="rating" value="maybe" /> Quiza</label>
</p>
<p>
<label for="comments">Comentario:</label><br />
<textarea rows="4" cols="40" id="comments"></textarea>
</p>
<label><input type="checkbox" name="subscribe" checked="checked" /> Recibir Actualizaciones
por
correo electrónico</label><br />
<input class="button" type="submit" value="Enviar opinión" />
</fieldset>
El Resultado Final ser este:
Ahora inegrando todo el cdigo dentro de <form action="" method="get"> </form> y con un podo de CSS para
alinear y efecto del boton el resultado final sera Este:
Puedes cambiar la apariecnia de Radio Button y Checkbox.

**No tiene funcionalidad ya que falta crear el archivo .php para poder recibir los datos.
Pgina 36
Cdigos HTML y CSS3
Formulario de Login con CSS3
Hoy te voy a ensear cmo crear una hermosa pgina de inicio de sesin con CSS3 que puede ser integrado en su
sitio web, blog, aplicacin, etc este mtodo es usado paracrear una pgina de inicio de sesin para la aplicacin
en WordPress, o donde mas ud lo quiera usar.
Paso 1 - El HTML
Antes de empezar a crear la pgina de acceso a la CSS, primero necesitar el cdigo HTML que incluir todo,
desde los botones, links, campos, y el diseo bsico antes de que ponga el enlace del HTML al CSS para completar
el diseo.
<div class="container">
<div class="login">
<h1>
Login</h1>
<form method="post" action="">
<p>
<input type="text" name="login" value="" placeholder="Usuario o Email"></p>
<p>
<input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Recordarme Datos
</label>
</label>
</p>
<p class="submit">
<input type="submit" name="commit" value="Login"></p>
</form>
</div>
<div class="login-help">
<p>
Olvid su contrasea? <a href="#">Restablecer Contrasea</a>.</p>
</div>
</div>
Paso 2 - A partir del CSS
Despus de la finalizacin de la HTML que necesitamos ahora para comenzar la parte CSS del diseo. En primer
lugar, tenemos que comenzar el diseo de la pgina de inicio de sesin. Para empezar, comience con el cdigo de
abajo. Al agregar este CSS asegrese de dejar espacio por encima del Cdigo de organizar en consecuencia.
Despus, podemos entonces aadir elementos adicionales tales como el diseo del body.
.container {
margin: 50px auto;
width: 640px;
}
.login {
Pgina 37
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
Cdigos HTML y CSS3
Despus de haber agregado el cdigo anterior, hemos aadido la altura y el ancho del formulario de una pgina
de inicio de sesin y se han centrado hasta el centro de la pgina web. Ahora podemos empezar mi parte favorita
del diseo, la belleza. Escribir el siguiente cdigo aade un borde y una sombra gris a la pgina de inicio de sesin
y usted comenzar a ver el diseo viene en forma.
.login p.submit {
text-align: right;
}
.login-help {
margin: 20px 0;
font-size: 11px;
color: white;
text-align: center;
text-shadow: 0 1px #2a85a1;
}
.login-help a {
color: #cce7fa;
}
.login-help a:hover {
text-decoration: underline;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
Paso 3 - El Diseo
Ahora tenemos la base de la forma de inicio de sesin y ahora estamos listos para iniciar el diseo actual de la
misma. La siguiente parte de este tutorial es todo preferenciapersonal y se puede personalizar a su gusto. Usted
puede comenzar con el cdigo CSS a continuacin, lo que aadir un borde interno y el radio en el color gris
exterior.
.container {
margin: 50px auto;
Pgina 38
width: 640px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
Cdigos HTML y CSS3
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.remember_me {
float: left;
line-height: 31px;
Pgina 39
Cdigos HTML y CSS3
.login p.remember_me label {

font-size: 12px;
color: #777;
cursor: pointer;
}
.login p.remember_me input {
position: relative;
bottom: 1px;
margin-right: 4px;
vertical-align: middle;
}
Paso 4 - Diseo Forma Acabado
Ya hemos terminado hasta el diseo de las fronteras y el diseo bsico, ahora podemos empezar a labrar el
propio formulario. Vamos a empezar aadiendo la CSS por debajo del cual dar los campos de nombre de usuario
y la contrasea de su diseo.
input {
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
}
input[type=text], input[type=password] {
margin: 5px;
padding: 0 10px;
width: 200px;
height: 34px;
color: #404040;
background: white;
border: 1px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 2px;
outline: 5px solid #eff4f7;
-moz-outline-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0;
}
input[type=submit] {
padding: 0 18px;
Pgina 40
Cdigos HTML y CSS3
height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
outline: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
-webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
Ahora que hemos aadido estilo a los campos, lo que se quiere aadir estilo botn para enviar. La sintaxis de
color en el CSS a veces puede ser un poco confuso al principio. Si usted es un principiante con CSS se puede usar
un generador de colores CSS se encuentran aqu.
input[type=submit]:active {
background: #cde5ef;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
Antes de que estamos completamente terminado con la fase de diseo de la forma, tendremos que aadir estilo
a la casilla de la aplicacin web para recordar lainformacin de inicio de sesin del usuario. Puede completar esto
aadiendo el cdigo de abajo. Recomiendo aadir justo debajo de los elementos de la carrocera en el archivo
CSS.
input[type=checkbox],
input[type=radio] {
border: 1px solid #c0c0c0;
margin: 0 0.1em 0 0;
padding: 0;
font-size: 16px;
line-height: 1em;
width: 1.25em;
height: 1.25em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb));
-webkit-appearance: none;
Pgina 41
Cdigos HTML y CSS3
-webkit-box-shadow: 1px 1px 1px #fff;

-webkit-border-radius: 0.25em;
vertical-align: text-top;
}
input[type=radio] {
-webkit-border-radius: 2em; /* Make radios round */
}
input[type=checkbox]:checked::after {
content:"";
display:block;
text-align: center;
font-size: 16px;
height: 16px;
line-height: 18px;
}
input[type=radio]:checked::after {
content:"";
display:block;
height: 16px;
line-height: 15px;
font-size: 20px;
text-align: center;
}
Paso 5 - El estilo del fondo
Hemos completado el diseo general de la forma de inicio de sesin y ahora podemos acabar con l mediante la
adicin de un color para el fondo. Como he mencionado antes, la fase de diseo de la creacin es todo
preferencia personal y se puede personalizar a sus necesidades, sobre todo el fondo. Personalmente, puedo
aadir mi estilo de la carrocera de la parte superior de mi archivo CSS de fcil acceso.
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
}
Los colores lo pueden podificar a su gusto, cualquier duda o consulta solo dejen un comentario. y el resultado
quedaria asi:
Pgina 42
Cdigos HTML y CSS3
Cambiar estilos de Checkbox y Radio Button con

CSS3
Veremos una forma rpida y sencilla de cambiar los estilos de los checkbox y radio button con css3, usando el
pseudo selector :checked, seremos capaces de apuntar a un elemento basndonos en su estado activo o
desactivo(checked o unchecked)
Creacin de nuestro HTML Solo se mostrara esta tcnica para un elemento checkbox, pero sera el mismo proceso
para los radio button, y se podr apreciar mejor en el demo.
Comenzamos creando nuestro checkbox seguido de un label
<input type="checkbox">
<label>Checkbox</label>
Ahora asociamos el elemento label a nuestro checkbox, esto se hace mediante el uso de for=" y el id del
checkbox
<input type="checkbox" id="c1" name="cc">
<label for="c1"><span></span> Checkbox</label>
Tambin se agrego un <span> dentro del label, se vera el porque al momento de aplicar los estilos.
Estilos CSS Aqu es donde empieza la diversin, lo primero que haremos, que es el motivo de este tutorial, sera
ocultar el checkbox
input[type="checkbox"]{
display: none;
}
Una vez realizado esto podemos dar le mas estilos al label, pero mas especficamente al elemento span dentro del
label, lo haremos de esta manera con el fin de dar mascontrol sobre la posicin exacta del checkbox.
input[type="checkbox"]{ display: none; }
input[type="checkbox"] + label span{
width: 19px;
height: 19px;
background: url(img/check_radio_sheet.png) left top no-repeat;
}
Pgina 43
Cdigos HTML y CSS3
Como podemos observar hemos aplicado estilos al elemento <span> asignadole unaimagen background de
tipo css sprite, y un alto y ancho del mismo tamao de cada sprite, por lo que sera mas fcil definir cada estado.
Nuestra
imagen
Sprite
Y este el estilo completo para el css
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
cursor:pointer;
}
Lo ltimo que necesitamos es proporcionar un estado para el elemento cuando el checkbox este
marcado(checked), esto es muy sencillo, basta con echar un vistazo al evento checked desde el css
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
cursor:pointer;
}
input[type="checkbox"]:checked + label span{
background: url(img/check_radio_sheet.png) -19px top no-repeat;
}
Pgina 44
Cdigos HTML y CSS3
Tener en cuenta que debido a que estamos usando una imagen sprite, lo nico que se tiene que hacer es cambiar
el background position, notar tambin que todo lo que tenia que ver con los estilos del elemento span cuando se
marca un checkbox, es utilizar el pseudo selector css3 :checked
Reproductor de Audio con jQuery, HTML5 y

CSS3
El tutorial de hoy vamos a codificar un reproductor de audio de la interfaz de usuario impresionista Vamos a
codificar con CSS3 para el estilo y los "MediaElement.js" para la funcionalidad. MediaElement.js es un audio de
HTML5 y un reproductor de vdeo que tambin funciona para los navegadores ms antiguos que utilizan Flash y
Silverlight para imitar el MediaElement API HTML5.
Empezamos!
Pas 1 - Descarga de MediaElement.js
En primer lugar tenemos que descargar el script "MediaElement.js" y extraerlo. Luego de la carpeta "build"
necesitamos tres archivos:
flashmediaelement.swf
MediaElement-and-player.min.js
silverlightmediaelement.xap
A continuacin, copie todos estos tres archivos en el mismo directorio, voy a copiar a mi carpeta "js".
Paso 2 - Formato HTML
Ahora, tenemos que vincular a la biblioteca jQuery, podemos albergar de forma local o use el ofrecido por
Google. Entonces tenemos que vincular a "MediaElement-and-player.min.js" archivo de comandos y el archivo
CSS. Todos estos tres archivos deben estar dentro de la etiqueta head.
<head>
<title>Reproductor de Audio con jQuery, HTML5 y CSS3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
Para crear el reproductor vamos a aadir una anchura <div> la clase "audio-player". Esta div ser el contenedor
de nuestros elementos player. Vamos a aadir una etiqueta <h1> para el ttulo de la cancin y <img> para la
portada. A continuacin, vamos a aadir la etiqueta <audio> que unir a nuestra cancin y vamos a establecer el
id para "audio-player".
<div class="audio-player">
<h1>
Demo - Cancin Prueba</h1>
<img class="cover" src="img/cover.png" alt="">
<audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>
Pgina 45
Cdigos HTML y CSS3
Para terminar tenemos que aadir este cdigo antes de la finalizacin de la etiqueta </ body>. Tambin tenemos
que agregar el mismo ID que se utiliz en la etiqueta <audio> para cargar el reproductor. Puede configurar
algunas opciones tambin, para ms informacin leer la documentacin "MediaElement.js".
<script>
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
Paso 3 - Estilos de contenedores
En primer lugar vamos a aadir algunos estilos de reposicin de todos los elementos que vamos a utilizar en el
envase.
.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
Ahora el estilo de dejar que el contenedor player, vamos a establecer la anchura de 400px y alto de 120px.
Tambin vamos a aadir un gradiente de fondo css3 y esquinas redondeadas.
div.audio-player {
position: relative;
width: 400px;
height: 120px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
Pgina 46
Cdigos HTML y CSS3
Paso 4 - Ttulo y cubierta
Vamos a situar el ttulo y la tapa del recipiente de player y luego aadir algunos estilos de tipografa para el ttulo.
.audio-player h1 {
position: absolute;
top: 37px;
left: 165px;
font-family: Helvetica, Arial, sans-serif;

font-weight: bold;
font-size: 14px;
color: #ececec;
text-shadow: 1px 1px 1px rgba(0,0,0, .5);
Paso 5 - Controles Botones
Ahora vamos a estilo de los controles de reproduccin (play / pause, mute / unmute). Para ello vamos a empezar
por dar algunos estilos generales de los botones y luego vamos a establecer un ancho fijo y altura. Vamos a
colocar el "reproducir / pausa" botones y los botones "Activar / desactivar" en la misma posicin y se le cambiar
el evento click.
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 21px;
height: 21px;
top: 35px;
left: 135px;
background: transparent url(../img/play-pause.png) 0 0;
}
.mejs-controls .mejs-pause button { background-position:0 -21px; }
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
top: 70px;
left: 140px;
background: transparent url(../img/mute-unmute.png) 0 0;
}
Pgina 47
Cdigos HTML y CSS3
.mejs-controls .mejs-unmute button { background-position: 0 -12px; }
Paso 6 - Deslizador de volumen
Para el estilo del deslizador de volumen vamos a colocar, y luego vamos a dar un ancho de 200px y alto 8px.
Tambin tenemos que establecer un color de fondo, algunas sombras y esquinas redondeadas.
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 71px;
left: 165px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 200px;
height: 8px;
-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
border-radius: 6px;
Entonces tenemos que el estilo del "volumen actual", para hacerlo vamos a aadir una imagen de fondo
personalizada, esquinas redondeadas, etc
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 6px;
top: 1px;
left: 1px;
background: url(../img/volume-bar.png) repeat-x;
border-radius: 6px;
Paso 7 - Barra de progreso
Los estilos de la barra de progreso son casi lo bsico. Nosotros le daremos el mismo ancho que el
contenedor player(400px) y colquelo en la parte inferior. Tambin vamos a hacer la esquina izquierda y derecha
redondeada. A continuacin, vamos a definir algunos colores de fondo para cada estado de tiempo (total,
con carga y corriente). Como usted puede notar que tenemos que establecer el ancho a 0 para el tiempo y la
carga actual y como la cancin juega o se carga el ancho aumentar.
Pgina 48
Cdigos HTML y CSS3
.mejs-controls div.mejs-time-rail { width: 400px; }

.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 400px;
height: 5px;
left: 0;
bottom: 0;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }
.mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
background: #cccccc;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #64b44c;
}
Paso 8 - Progres y manija Volumen
Ahora vamos a aadir un identificador de la barra de progreso y el deslizador de volumen. Bsicamente, slo a
aadir una imagen de fondo, definir la anchura / altura y posicionarlo.
.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -4px;
background: url(../img/handle.png) no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }
Paso 9 - Tooltip Tiempo
Para terminar el reproductor de audio, aadiremos una sugerencia tiempo que aparecer cuando el ratn sobre
la barra de progreso. Los estilos son casi los mismos que en los otros pasos, vamos a posicionarnos, aada una
imagen de fondo ancho fijo / valores de altura y. Tambin vamos a aadir algunos estilos de tipografa.
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
Pgina 49
Cdigos HTML y CSS3
margin-left: -17px;
background: url(../img/time-box.png);
.mejs-controls .mejs-time-rail .mejs-time-float-current {

width: 33px;
display: block;
left: 0;
top: 4px;

font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
Hemos codificado con xito este reproductor de audio. Si usted tiene cualquier pregunta, hgamelo saber en los
comentarios. Asimismo, no se olvide de dejar algunos comentarios y compartirlo con tus amigos. Siganos si
quieres ser el primero en saber sobre los ltimos artculos y tutoriales.
Cmo crear un Reproductor de Vdeo con CSS,

HTML5 y jQuery
En este tutorial vamos a codificar un reproductor de vdeo de la interfaz de usuario impresionista de Vladimir
Kudinov. Vamos a codificar con CSS3 para el estilo y los "MediaElement.js" para la funcionalidad. MediaElement.js
es un audio de HTML5 y un reproductor de vdeo que tambin funciona para los navegadores ms antiguos que
utilizan Flash y Silverlight para imitar el MediaElement API HTML5.
Paso 1 - Descarga de MediaElement.js
En primer lugar tenemos que descargar el script "MediaElement.js" y extraerlo. Luego de la carpeta "build"
necesitamos tres archivos:
flashmediaelement.swf
1. MediaElement-y-player.min.js
2. silverlightmediaelement.xap
A continuacin, copie todos estos tres archivos en el mismo directorio, voy a copiar a mi carpeta "js".
Paso 2 - Formato HTML
Ahora, tenemos que vincular a la biblioteca jQuery, podemos albergar de forma local o use el ofrecido por
Google. Entonces tenemos que vincular a "MediaElement-y-player.min.js" archivo de comandos y el archivo CSS.
Todos estos tres archivos deben estar dentro del<head>
<head>
<title>Video Player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
Pgina 50
Cdigos HTML y CSS3
<link rel="stylesheet" href="css/style.css" media="screen">

</head>
Para crear el reproductor de vdeo slo tenemos que aadir la nueva etiqueta de vdeo HTML5. A continuacin,
vamos a aadir algunos atributos a la etiqueta de vdeo: la anchura y la altura del video y el cartel. El cartel es la
imagen que se puede aadir que se muestra en la parte superior del video hasta que el usuario pulse el botn de
reproduccin.
<video width="640" height="267" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
</video>
Ahora slo tenemos que aadir el siguiente cdigo para cargar los controles de vdeo y establecer algunos
parmetros. Los ajustes que vamos a agregar son:
alwaysShowControls: verdaderos para mostrar siempre los controles de vdeo y falsos para ocultar el
cabo del ratn.
videoVolume: para que el control deslizante de volumen sea horizontal.
caractersticas: ['PLAYPAUSE', 'progreso', 'volumen', 'pantalla completa']-aquvamos a establecer qu
controles queremos aadir en el video.
Para ms opciones miren Documentacin "MediaElement.js".
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('video').mediaelementplayer({
alwaysShowControls: true,
videoVolume: 'horizontal',
features: ['playpause','progress','volume','fullscreen']
});
});
// ]]></script>
Paso 3 - Estilos bsicos de vdeo
Vamos a empezar por agregar algunos estilos de restablecimiento de los elementos que vamos a utlilizar.
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
margin: 0;
padding: 0;
border: none;
outline: none;
}
A continuacin, vamos a aadir los estilos generales al contenedor de vdeo. Se necesitan Todas las propiedades
CSS que estamos utilizando en este paso para crear el diseo de contenedores de vdeo. Esto no crear ningn
estilo en el video, sino que slo se colocar todos los elementos de vdeo en el lugar correcto.
.mejs-container {
Pgina 51
position: relative;
Cdigos HTML y CSS3
.mejs-inner {
position: relative;
width: inherit;
height: inherit;
}
.me-plugin { position: absolute; }
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
width: 100%;
height: 100%;
}
.mejs-embed,
.mejs-embed body {
margin: 0;
padding: 0;
overflow: hidden;
}
.mejs-container-fullscreen {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1000;
}
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
position: absolute;
top: 0;
left: 0;
}
.mejs-poster img { display: block; }
Pgina 52
Paso 4 - Controles Container
Cdigos HTML y CSS3
Vamos a empezar a aadir un botn de gran juego el centro del contenedor de vdeo.
.mejs-overlay-play { cursor: pointer; }
.mejs-inner .mejs-overlay-button {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(../img/play.png) no-repeat;
}
A continuacin, vamos a estilo y la posicin del control contenedor de vdeo. Nos posicionamos en la parte
inferior, le dan una altura 34px y aadir un color de fondo. Usaremos RGBA para hacer el fondo transparente,
pero RGBA no es compatible con los navegadores ms antiguos as que tambin daremos una reserva con RGB. A
continuacin, vamos a aadir algunos estilos generales botones y aada las imgenes sprites. Si usted no sabe lo
sprites CSS son o cmo trabajar con el tema de echar un vistazo a este artculo.
.mejs-container .mejs-controls {
position: absolute;
width: 100%;
height: 34px;
left: 0;
bottom: 0;
background: rgb(0,0,0);
background: rgba(0,0,0, .7);
}
.mejs-controls .mejs-button button {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
background: transparent url(../img/controls.png);
}
Paso 5 - Botones de control de vdeo
En este paso vamos a situar los botones en el lugar correcto. As que bsicamente lo que vamos a hacer aqu es: la
posicin de cada botn en el envase controles, establecer el ancho y la altura de cada botn y la posicin de la
imagen de fondo con el fin de mostrar el botn de la derecha.
.mejs-controls div.mejs-playpause-button {
position: absolute;
top: 12px;
left: 15px;
}
.mejs-controls .mejs-play button,
Pgina 53
Cdigos HTML y CSS3
.mejs-controls .mejs-pause button {

width: 12px;
height: 12px;
background-position: 0 0;
}
.mejs-controls .mejs-pause button { background-position: 0 -12px; }

.mejs-controls div.mejs-volume-button {
position: absolute;
top: 12px;
left: 45px;
}
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
background-position: -12px 0;
}
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
.mejs-controls div.mejs-fullscreen-button {
position: absolute;
top: 7px;
right: 7px;
}
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
width: 27px;
height: 22px;
background-position: -26px 0;
}
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }
Paso 6 - Deslizador de volumen
Para el estilo del control de volumen que va a colocar, luego aadir la anchura y altura, y bordes redondeados.
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
cursor: pointer;
top: 15px;
left: 65px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
Pgina 54
width: 60px;
background: #d6d6d6;
Cdigos HTML y CSS3

position: absolute;
width: 0;
top: 0;
left: 0;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
height: 4px;
border-radius: 2px;
Paso 7 - Barra de progreso
Los estilos de la barra de progreso son bsicas. Tenemos que colocar en la parte superior del contenedor
controles, agregar algunos colores de fondo para cada estado (todos y cargado de tiempo). Por el momento
actual vamos a establecer el ancho a 0 y se actualizar automticamente cuando se reproduce la pelcula.
.mejs-controls div.mejs-time-rail {
position: absolute;
width: 100%;
left: 0;
top: -10px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
cursor: pointer;
width: 100%;
height: 10px;
top: 0;
left: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
Pgina 55
Cdigos HTML y CSS3
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

Source: http://designmodo.com/video-player/#ixzz2W6yM6k3s
Paso 8 - Barra de progreso de la manija y hora actual Tooltip
En este paso vamos a aadir la manija barra de progreso y la punta de la herramienta que mostrar la hora actual
en vuelo estacionario. As que vamos a ajustar la posicin, agregue las imgenes de fondo, ajustar los anchos y
altos, y algunos estilos de tipografa.
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
cursor: pointer;
width: 16px;
height: 18px;
top: -3px;
background: url(../img/handle.png);
}
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
background: url(../img/tooltip.png);
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
position: absolute;
display: block;
left: 0;
top: 4px;

font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
Paso 9 - La Pendiente verde(o el color que gustes)
Para terminar nuestro tutorial slo tenemos que aadir un gradiente CSS3 que se utilizar en la barra de progreso
y el deslizador de volumen.
Pgina 56
Cdigos HTML y CSS3
.mejs-controls .mejs-time-rail .mejs-time-current,

background: #82d344;
background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
background: linear-gradient(top, #82d344 0%, #51af34 100%);
}
Source: http://designmodo.com/video-player/#ixzz2W6zunCNO
Conclusin
Hemos codificado con xito este reproductor de vdeo. y espero que lo puedan implementar ya que no es muy
complejo de hacerlo.
Tabla de Precios con CSS3

En este tutorial vamos a aprender a crear con estilo CSS3 algunas tablas de precios de la interfaz
de usuario impresionista,espero les sirva para sus proyectos personales.
Paso 1 HTML
Vamos a crear una tabla con la clase "pricing-table", esta clase ser la base para agregar nuestro estilo. A
continuacin, vamos a dividir nuestras tablas de precios en tres partes: la primera, <thead>, tendr el ttulo del
plan y el precio correspondiente, el segundo, <tbody>, tendr las caractersticas del plan (por ejemplo: ancho de
banda, espacio en disco, etc), y por ltimo el tercero, <tfoot>, ser el pie de pgina con una descripcin de texto.
<table class="pricing-table">
<thead>
<tr class="plan">
<td class="green">
<h2>
Bsico</h2>
<i>Ideal para pequeas empresas</i>
</td>
<td class="orange">
<h2>
Profesional</h2>
<i>Ideal para Medianas empresas</i>
</td>
<td class="green">
<h2>
Corporativo</h2>
<i>Ideal para Grandes empresas</i>
</td>
</tr>
<tr class="price">
<td class="green">
Pgina 57
Cdigos HTML y CSS3
<p>
<span>$</span>5</p>
<span>monthly</span>
<a href="#">Join</a>
</td>
<td class="orange">
<p>
<span>$</span>9<span>79</span></p>
</td>
<td class="green">
<p>
<span>$</span>12</p>
</td>
</tr>
</thead>
<tbody>
<tr class="clock-icon">
<td>No Soporte</td>
<td>24/7 Soporte Tcnico </td>
<td>24/7 Soporte Tcnico </td>
</tr>
<tr class="basket-icon">
<td>Obsiones Bsicas</td>
<td>Opciones avanzadas</td>
<td>Opciones avanzadas</td>
</tr>
<tr class="star-icon">
<td>100GB Almacenamiento</td>
</tr>
<tr class="heart-icon">
<td>1TB Ancho de Banda</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><b>Softaculous</b> es un gran instalador automtico que tiene 270 grandes guiones, 1000
Clases de PHP y seguimos agregando ms.</td>
Pgina 58
Cdigos HTML y CSS3
Clases de PHP y seguimos agregando ms.</td>
Clases de PHP y seguimos agregando ms</td>
</tr>
</tfoot>
</table>
Paso 2 - CSS bsico
Antes de iniciar el estilo de la tabla de precios, vamos a aadir un archivo de restablecimiento CSS para reducir
inconsistencias de navegacin en cosas como laaltura de la lnea por defecto, los mrgenes y tamaos de fuente
de las partidas, etc El archivo de reinicio CSS que vamos a utilizar es esta, hecha por Eric Meyer.
A continuacin, vamos a definir el ancho de las tablas de precios. Como vamos a utilizar tres columnas, la anchura
ser de 670px, pero si va a utilizar ms o menos de tres columnas que tendr que aumentar o disminuir el valor
de anchura. Tambin nos fijaremos algunos estilos bsicos de las columnas de la tabla. Para agregar el margen
entre las mesas que tenemos que establecer el <td> a "display: inline-block;", mediante el establecimiento de
esta propiedad algunos errores pueden aparecer en funcin del contenido de la tabla, por lo que si no desea que
las columnas separacin puede quitar la propiedad de presentacin.
.pricing-table { min-width: 670px; }
.pricing-table td {
position: relative;
margin: 0 5px;
vertical-align: text-top;
}
Paso 3 - Plan de la Seccin
Para la seccin del plan vamos a configurar el ancho (este valor de ancho se utiliza tambin en las siguientes
secciones), la altura, aadir un poco de relleno y esquinas redondeadas mediante la propiedad "border-radius". A
continuacin, vamos a aadir los estilos de tipografa (familia de fuente, tamao, altura de lnea, etc) para el ttulo
del plan y la pequea descripcin.
.pricing-table thead .plan .green {
color: #36611e;
background: url(img/green_pattern.png) repeat-x 0 0;
}
.pricing-table thead .plan .orange {
color: #fafafa;
background: url(img/orange_pattern.png) repeat-x 0 0;
}
Tambin tenemos dos combinaciones de colores diferentes, verde y naranja. Para cada combinacin de colores
vamos a definir un color, text-shadow diferente y una imagen fondo.
.pricing-table thead .plan .green {
Pgina 59
Cdigos HTML y CSS3
color: #36611e;
background: url(img/green_pattern.png) repeat-x 0 0;
.pricing-table thead .plan .orange {

color: #fafafa;
background: url(img/orange_pattern.png) repeat-x 0 0;
}
Paso 4 - Artculo Precio
La seccin de los precios es el ms difcil, porque tenemos un montn de detalles aqu. Para empezar vamos a
configurar el mismo valor de la anchura como la seccin del plan, agregar un degradado CSS3 luz, algunos estilos
de tipografa, etc.
.pricing-table thead .price td {
position: relative;
width: 210px;
padding: 25px 0;
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
color: #b6b07c;
background: #f9f8f1;
background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%);
background: -webkit-gradient(linear, left top, left bottom,
stop(100%,#f4f2e2));
background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);
background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);
background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);
background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%);
}
color-stop(0%,#f9f8f1),
color-
.pricing-table thead .price p {

display: table;
margin: 0 auto;
font-size: 50px;
line-height: 60px;
}
.pricing-table thead .price p span {
font-size: 0.5em;
display: table-cell;
}
Pgina 60
Cdigos HTML y CSS3
.pricing-table thead .price span { font-size: 14px; }
Para el botn "Join" vamos a colocarlo 41px de arriba y 5px a la derecha, agregar los rellenos, tamao de fuente,
etc Como lo hicimos en la seccin del plan tambin es necesario establecer diferentes colores y degradados para
el verde y esquemas de color naranja.
.pricing-table thead .price a {
display: block;
position: absolute;
top: 41px;
right: -5px;
height: 32px;
padding: 0 10px;
line-height: 32px;
font-size: 12px;
}
.pricing-table thead .price .green a {
color: #37621f;
background: #82d344;
background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344),
stop(100%,#51af34));
background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%);
background: -o-linear-gradient(top, #82d344 0%,#51af34 100%);
background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%);
background: linear-gradient(to bottom, #82d344 0%,#51af34 100%);
}
color-
.pricing-table thead .price .orange a {

color: #fafafa;
background: #ff8042;
background: -moz-linear-gradient(top, #ff8042 0%, #f55a0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042),
stop(100%,#f55a0e));
background: -webkit-linear-gradient(top, #ff8042 0%,#f55a0e 100%);
background: -o-linear-gradient(top, #ff8042 0%,#f55a0e 100%);
background: -ms-linear-gradient(top, #ff8042 0%,#f55a0e 100%);
background: linear-gradient(to bottom, #ff8042 0%,#f55a0e 100%);
}
color-
Para agregar las "two triangles" y la "small arrow" para hacer que el botn, como una "bandera" vamos a utilizar:
before y: after pseudo-selectores. Estos dos selectores nos permite insertar contenidos antes y despus del
Pgina 61
Cdigos HTML y CSS3
elemento, as que no es necesario aadir dos etiquetas adicionales en el html. La pequea flecha a la derecha del
botn se aadir utilizando una tcnica de frontera inteligente. Mediante la combinacin de todas las fronteras
con diferentes colores para cada uno, podemos crear formas personalizadas, como tringulos, para ms
informacin sobre esta tcnica podemos echar un vistazo a este sitio web.
.pricing-table thead .price .green a:before,
.pricing-table thead .price .orange a:before,
.pricing-table thead .price .green a:after,
.pricing-table thead .price .orange a:after {
display: block;
position: absolute;
content: '';
}
.pricing-table thead .price .green a:before,
.pricing-table thead .price .orange a:before {
width: 8px;
height: 32px;
top: 0;
left: -8px;
background: url(img/badge.png) no-repeat;
}
.pricing-table thead .price .green a:after,
.pricing-table thead .price .orange a:after {
width: 0;
height: 0;
bottom: -5px;
right: 0;
border-bottom: 5px solid transparent;
}
.pricing-table thead .price .green a:before { background-position: 0 0; }
.pricing-table thead .price .orange a:before { background-position: 0 -32px; }
.pricing-table thead .price .green a:after { border-left: 5px solid #1c5d40; }
.pricing-table thead .price .orange a:after { border-left: 5px solid #88330a; }
Paso 5 - Seccin Funciones
Vamos a empezar con la "banda" en la parte superior de esta seccin, lo aadiremos con el: antes selector. A
continuacin, vamos a establecer la anchura (ntese que aqu el ancho no es 210px porque tenemos algo de
relleno a la izquierda), en el borde superior y algunos estilos de tipografa.
.pricing-table tbody td {
width: 170px;
padding-left: 40px;
line-height: 30px;
border-top: 1px solid #f2f2f2;
font-size: 11px;
Pgina 62
color: #828282;
Cdigos HTML y CSS3
.pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; }

Para los iconos tenemos una clase personalizada para cada uno, y slo tenemos que colocar la imagen de fondo
para cada clase.
.pricing-table .clock-icon td,
.pricing-table .basket-icon td,
.pricing-table .star-icon td,
.pricing-table .heart-icon td { background: #ffffff url(img/icons.png) no-repeat 0 0; }
.pricing-table .clock-icon td { background-position: 0 0; }
.pricing-table .basket-icon td { background-position: 0 -30px; }
.pricing-table .star-icon td { background-position: 0 -60px; }
.pricing-table .heart-icon td { background-position: 0 -90px; }
Paso 6 - Seccin de descripcin
La seccin de descripcin es slo texto simple. Como de costumbre, vamos a definir el ancho, rellenos, color de
fondo, alinear el texto al centro, etc Este es el final de nuestra columna de la tabla y vamos a aadir una sombra y
esquinas redondeadas con CSS3.
.pricing-table tfoot td {
width: 190px;
padding: 20px 10px;
text-align: center;
line-height: 18px;
background: #ffffff;
font-size: 11px;
color: #828282;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-box-shadow: 0px 2px 0px #e4e4e4;

-moz-box-shadow: 0px 2px 0px #e4e4e4;
box-shadow: 0px 2px 0px #e4e4e4;
Este es el final de este tutorial. Espero que les sea til y haya aprendido algo nuevo de ella. Sintase libre de
utilizar estos cuadros de precios para su prximo proyecto o sitio web personal. No te olvides de seguirnos para
ms artculos, tutoriales y recursos decalidad. Disfrute!
Cmo crear un Slider con jQuery y CSS3

Pgina 63
Cdigos HTML y CSS3
Hoy vamos a codificar un slider sensible de la interfaz de usuario impresionista. Vamos a codificar utilizando el
plugin FlexSlider para la funcionalidad y el estilo usando CSS3. Espero que lo disfruten y les resulta til para
sus proyectos.
Empezamos!
PASO 1 marcado
El deslizador marcado HTML es muy simple. Crearemos un <div> con la clase "flex-container", luego dentro de
este <div> vamos a aadir otro con la clase "flex-slider", en este div se coloca todos los controles deslizantes. Para
terminar vamos a crear una lista desordenada de aadir todas las diapositivas. Cada diapositiva debe estar dentro
de un elemento de la lista.
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="img/slide1.jpg" /></a>
</li>
<li>
<img src="img/slide2.jpg" />
</li>
<li>
<img src="img/slide3.jpg" />
<p>
visita - www.detodoprogramacion.com</p>
</li>
</ul>
</div>
</div>
A continuacin vamos a incluir la librera jQuery y el plugin FlexSlider. Para cargar elcontrol deslizante incluye el
siguiente cdigo, se puede establecer la configuracin de all tambin, para ms ajuste, visite el sitio web de
plugin.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
</script>
PASO 2 - Estilos Bsicos
En primer lugar vamos a aadir algunos estilos de restablecimiento para borrar todos los mrgenes, rellenos, etc y
mantener la coherencia a travs de todos los navegadores.
.flex-container a:active,
Pgina 64
Cdigos HTML y CSS3
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
}
A continuacin vamos a ocultar las diapositivas para evitar saltos de las imgenesdurante la carga de la pgina.
Tambin vamos a definir algunos estilos para las imgenes.
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
border-radius: 2px;
Para finalizar este paso vamos a aadir algunos estilos para limpiar los floats from de las diapositivas.
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
PASO 3 - Estilos de contenedores
Para el recipiente pondremos el color de fondo a blanco y agregar una pequea sombra mediante la propiedad
CSS3 "box-shadow". A continuacin, vamos a agregar relleno 10px y las esquinas redondeadas.
Pgina 65
.flexslider {
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;
Cdigos HTML y CSS3
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}
He puesto un ancho mnimo y mximo para el regulador. Es posible que tenga que cambiar o eliminar en la
aplicacin de su proyecto. Vamos a establecer la propiedad zoom a 1, esto evitar el cambio de tamao en los
navegadores mviles.
.flex-container {
min-width: 150px;
max-width: 960px;
}
.flexslider .slides { zoom: 1; }
PASO 4 - Las flechas Siguiente y Anterior
Para los botones Siguiente y Anterior vamos a aadir un gradiente CSS3 verde, establecer la anchura y la altura,
etc Para alinear los botones verticalmente, tenemos que colocarlas 50% de la parte superior y aadir un margen
negativo, la mitad de la anchura del botn.
.flex-direction-nav a {
display: block;
position: absolute;
margin: -17px 0 0 0;
width: 35px;
height: 35px;
top: 50%;
cursor: pointer;
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
Se aaden las flechas con el ":before" pseudo-selector. Este selector de pseudo nos permite incluir algunos
contenidos sin necesidad de aadir una nueva etiqueta en el html. Para crear ese efecto de la cinta usaremos un
Pgina 66
Cdigos HTML y CSS3
truco frontera para crear fcilmente formas utilizando slo CSS, tambin se incluirn esta forma utilizando un
pseudo-selector ":after".
.flex-direction-nav a:before {
background: url("img/direction_nav.png") no-repeat scroll 0 0 transparent;
content: "";
display: block;
width: 27px;
height: 27px;
left: 11px;
position: absolute;
top: 2px;
}
.flex-direction-nav a:after {
content: "";
display: block;
height: 0;
position: absolute;
top: 35px;
width: 0;
}
Para finalizar los botones se sumarn las esquinas redondeadas, colocarlos a derecha e izquierda y aadir los
"triangles" que harn que el efecto de la cinta.
.flex-direction-nav .flex-next {
right: -5px;
-webkit-border-radius: 3px 0 0 3px;

-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
.flex-direction-nav .flex-prev {
left: -5px;
-webkit-border-radius: 0 3px 3px 0;

-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }

.flex-direction-nav .flex-prev:before { background-position: 0 0; }
.flex-direction-nav .flex-next:after {
right: 0;
border-left: 5px solid #31611e;
}
Pgina 67
Cdigos HTML y CSS3
.flex-direction-nav .flex-prev:after {
left: 0;
border-right: 5px solid #31611e;
}
PASO 5 - Controles deslizantes
Los controles deslizantes son los pequeos crculos en el extremo de la corredera que permite hacer clic en una
diapositiva. Nos posicionamos este recipiente en la parte inferior de la corredera. A continuacin, vamos a crear
los crculos utilizando el "border-radius" y la propiedad "box-shadow". Para el crculo diapositiva activa vamos a
quitar la caja de sombra y aadir la misma CSS3 degradado que se utiliz en los botones.
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
}
.flex-control-nav li {
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;
-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;

-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
.flex-control-paging li a.flex-active {
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
Pgina 68
Cdigos HTML y CSS3
background-image: -o-linear-gradient(top, #82d344, #51af34);

background-image: linear-gradient(to bottom, #82d344, #51af34);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
PASO 6 Leyendas
Ya casi hemos llegado, vamos a aadir algunos estilos simples para los subttulos. Ajuste el color de fondo a negro
con un poco de transparencia con el modo de color RGBA. A continuacin, vamos a colocarlo en la parte inferior
de las diapositivas.
.flexslider .slides p {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 0 5px;
margin: 0;
font-size: 12px;
font-weight: bold;
line-height: 20px;
color: white;
background-color: #222222;
border-radius: 2px;
Este es el final de este tutorial. Espero que les sea til y haya aprendido algo nuevo de ella. Sintase libre de
utilizar este control en su prximo proyecto o sitio web personal. No te olvides de seguirnos para ms artculos,
tutoriales y recursos de calidad.
Pgina 69

Crea elementos web con HTML5 y CSS3

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Crea elementos web con HTML5 y CSS3

Uploaded by

Copyright:

Available Formats

Contenido

Cdigos HTML y CSS3

Creando un Elemento Web E-Commerce con CSS3..................................................................................................... 1

Cdigos HTML y CSS3

Paso 4 - Controles Container ................................................................................................................................. 53

Mtro. Ivn Ortiz Ramrez

Cdigos HTML y CSS3

Creando un Elemento Web E-Commerce con

Paso 1: Formato HTML

Paso 2: El estilo bsico

Cdigos HTML y CSS3

Paso 3: la vista previa y botones de compra

Cdigos HTML y CSS3

-o-transition: opacity .25s ease-in;

.product:hover .buttons, .product:hover a {

Cdigos HTML y CSS3

-moz-transition: background .2s ease-in;

En hover, el fondo ser un poco ms claro:

-webkit-transition: background-position .2s ease-in;

Cdigos HTML y CSS3

Paso 4: La descripcin del producto

Cdigos HTML y CSS3

Cdigos HTML y CSS3

box-shadow: 0 2px 0 #165181;

Paso 5: Detalles (Valoracin)

Mtro. Ivn Ortiz Ramrez

Cdigos HTML y CSS3

Men Desplegable con Cuadro de Bsqueda en

Cdigos HTML y CSS3

2. Navegacin y la lista de items

Cdigos HTML y CSS3

Mtro. Ivn Ortiz Ramrez

Cdigos HTML y CSS3

Mtro. Ivn Ortiz Ramrez

Cdigos HTML y CSS3

Animaciones de Carga con CSS

Ejemplo de Carga N 01:

Cdigos HTML y CSS3

El cdigo html ser simple:

Cdigos HTML y CSS3

Ejemplo de Carga N 02:

Cdigos HTML y CSS3

El elemento Div que usaremos para este efecto sera:

Cdigos HTML y CSS3

Ejemplo de Carga N 03:

Cdigos HTML y CSS3

Lnea blanca sutil rodeando los puntos

Cdigos HTML y CSS3

.demo-3 .spinner li:nth-child(4) {

Ejemplo de Carga N 04:

Cdigos HTML y CSS3

border: 1em dashed;

Cdigos HTML y CSS3

Cdigos HTML y CSS3

Ejemplo de Carga N 05:

Cdigos HTML y CSS3

/ * Puntos, hacia la derecha * /

Cdigos HTML y CSS3

Tenemos 8 balas, as que dividimos 100 fotogramas clave en 8: 12.5.

Mtro. Ivn Ortiz Ramrez

Cdigos HTML y CSS3

Cdigos HTML y CSS3