Está en la página 1de 71

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
Ejemplo de Carga N 02: ........................................................................................................................................ 14
Ejemplo de Carga N 03: ........................................................................................................................................ 16
Ejemplo de Carga N 04: ........................................................................................................................................ 18
Ejemplo de Carga N 05: ........................................................................................................................................ 21
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

Mtro. Ivn Ortiz Ramrez

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 class="rated"></li>
<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;
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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: #515151;
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: #286398;
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;
background-repeat: no-repeat;
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;
Mtro. Ivn Ortiz Ramrez

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-repeat: no-repeat;
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;
Mtro. Ivn Ortiz Ramrez

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-family: "Open Sans", sans-serif;
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;
text-decoration: none;
font-size: 15px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
Mtro. Ivn Ortiz Ramrez

Pgina 6

Cdigos HTML y CSS3

background: #286398;
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;
background-repeat: no-repeat;
-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-family: "Open Sans", sans-serif;
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;
}

Mtro. Ivn Ortiz Ramrez

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.
Mtro. Ivn Ortiz Ramrez

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 {
background: #232323;
height: 60px;
display: inline-block;
}
Mtro. Ivn Ortiz Ramrez

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;
text-decoration: none;
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.

Mtro. Ivn Ortiz Ramrez

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;
}

Mtro. Ivn Ortiz Ramrez

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;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.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.
Mtro. Ivn Ortiz Ramrez

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";
Mtro. Ivn Ortiz Ramrez

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.

Ejemplo de Carga N 02:

Ahora continuemos con algo un poco ms complicado. Pero no demasiado! Una rotacin
Mtro. Ivn Ortiz Ramrez

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 */
font-size: 100px; /* 1em */
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%" */
background-repeat: no-repeat;
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;
Mtro. Ivn Ortiz Ramrez

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); }
75% { transform: rotate(360deg); }
100% { transform: rotate(180deg); }
}

Ejemplo de Carga N 03:

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 */
font-size: 100px; /* 1em */
width: 1em;
height: 1em;
margin: 100px auto;
position: relative;
/* Styles */
Mtro. Ivn Ortiz Ramrez

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;
}
.demo-3 .spinner li:nth-child(2) {
background: #FF003C; /* Rojo */
top: 50%;
right: 0;
margin-top: -.1em; /* alto/2 */
transform-origin: -150% 50%;
animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
}
.demo-3 .spinner li:nth-child(3) {
background: #FABE28; /* amarillo */
bottom: 0;
left: 50%;
margin-left: -.1em; /* ancho/2 */
transform-origin: 50% -150%;
animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
}
Mtro. Ivn Ortiz Ramrez

Pgina 17

Cdigos HTML y CSS3

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


background: #88C100; /* verde */
top: 50%;
left 0;
margin-top -.1em; /* altura/2 */
transform-origin: 250% 50%;
animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
}

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; }
}

Ejemplo de Carga N 04:

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">
Mtro. Ivn Ortiz Ramrez

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 */
font-size: 25px; /* 1em */
width: 8em;
height: 8em;
margin: 100px auto;
position: relative;
/* Styles */
border-radius: 50%;
background: rgba(255,255,255,0.1);
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-transform: uppercase;
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);
Mtro. Ivn Ortiz Ramrez

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 {
display: inline-block;
animation: placeholder 1.5s ease-out infinite;
}
.demo-4 .wrapper span:nth-child(1)
.demo-4 .wrapper span:nth-child(2)
.demo-4 .wrapper span:nth-child(3)
.demo-4 .wrapper span:nth-child(4)
.demo-4 .wrapper span:nth-child(5)
.demo-4 .wrapper span:nth-child(6)
.demo-4 .wrapper span:nth-child(7)

{ animation-name: loading-1;
{ animation-name: loading-2;
{ animation-name: loading-3;
{ animation-name: loading-4;
{ animation-name: loading-5;
{ animation-name: loading-6;
{ animation-name: loading-7;

}
}
}
}
}
}
}

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; }
}
@keyframes loading-2 {
28.57% { opacity: 0.3; }
}
Mtro. Ivn Ortiz Ramrez

Pgina 20

@keyframes loading-3 {
42.86% { opacity: 0.3; }
}

Cdigos HTML y CSS3

@keyframes loading-4 {
57.14% { opacity: 0.3; }
}
@keyframes loading-5 {
71.43% { opacity: 0.3; }
}
@keyframes loading-6 {
85.71% { opacity: 0.3; }
}
@keyframes loading-7 {
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.

Ejemplo de Carga N 05:

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>
Mtro. Ivn Ortiz Ramrez

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 */
font-size: 30px; /* 1em */
width: 1em;
height: 1em;
position: relative;
margin: 100px auto;
/* Styles */
border-radius: 50%;
background: #123456;
transform-origin: 50% 250%;
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 */
transform: rotate(45deg);
background: white;
background: rgba(255,255,255,0.6);
}
Y ahora las animaciones. Algunas explicaciones sobre el segundo (parpadeo):
Mtro. Ivn Ortiz Ramrez

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% {
background: rgba(18,52,86,0.6);
box-shadow:
1em 1em #123456,
2em 2em #123456,
1em 3em #123456,
0em 4em #123456,
-1em 3em #123456,
-2em 2em #123456,
-1em 1em #123456;
}
25% {
background: #123456;
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% {
background: #123456;
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% {
background: #123456;

Mtro. Ivn Ortiz Ramrez

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% {
background: #123456;
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% {
background: #123456;
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% {
background: #123456;
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% {
background: #123456;
Mtro. Ivn Ortiz Ramrez

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


Mtro. Ivn Ortiz Ramrez

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 */

Mtro. Ivn Ortiz Ramrez

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" />
Mtro. Ivn Ortiz Ramrez

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 {
text-decoration: none;
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);
display: inline-block;
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
rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
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;
Mtro. Ivn Ortiz Ramrez

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
rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.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
rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.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;
}
Mtro. Ivn Ortiz Ramrez

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>
<!-- definimos la anchura del mapa -->
<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,
Mtro. Ivn Ortiz Ramrez

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;
}
Mtro. Ivn Ortiz Ramrez

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;
text-decoration: none;
}
* 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 */
Mtro. Ivn Ortiz Ramrez

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 */
transform: rotate(360deg);
}
</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">
<img src="galleria/img02.jpg">
<img src="galleria/img03.jpg">
<img src="galleria/img04.jpg">
<img src="galleria/img05.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 {
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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&oacute;n:</legend>
<p>
<label for="hear-about">C&oacute;mo se enter&oacute; de nosotros?</label>
<select name="referrer" id="hear-about">
Mtro. Ivn Ortiz Ramrez

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&oacute;nico</label><br />
<input class="button" type="submit" value="Enviar opini&oacute;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.

Mtro. Ivn Ortiz Ramrez

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 {
Mtro. Ivn Ortiz Ramrez

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;
text-decoration: none;
}
.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;
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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;
border-radius: 16px;
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;
Mtro. Ivn Ortiz Ramrez

Pgina 41

Cdigos HTML y CSS3

-webkit-box-shadow: 1px 1px 1px #fff;


-webkit-border-radius: 0.25em;
vertical-align: text-top;
display: inline-block;
}

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;
background: #353526;
}
Los colores lo pueden podificar a su gusto, cualquier duda o consulta solo dejen un comentario. y el resultado
quedaria asi:

Mtro. Ivn Ortiz Ramrez

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{
display: inline-block;
width: 19px;
height: 19px;
background: url(img/check_radio_sheet.png) left top no-repeat;
}
Mtro. Ivn Ortiz Ramrez

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
input[type="checkbox"]{ display: none; }
input[type="checkbox"] + label span{
display: inline-block;
width: 19px;
height: 19px;
background: url(img/check_radio_sheet.png) left top no-repeat;
margin: -1px 4px 0 0;
vertical-align: middle;
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
input[type="checkbox"]{ display: none; }
input[type="checkbox"] + label span{
display: inline-block;
width: 19px;
height: 19px;
background: url(img/check_radio_sheet.png) left top no-repeat;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor:pointer;
}
input[type="checkbox"]:checked + label span{
background: url(img/check_radio_sheet.png) -19px top no-repeat;
}

Mtro. Ivn Ortiz Ramrez

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>
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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;
}
Mtro. Ivn Ortiz Ramrez

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;
background: #212227;
-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);

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
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;

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
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.
Mtro. Ivn Ortiz Ramrez

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;
Mtro. Ivn Ortiz Ramrez

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-family: Helvetica, Arial, sans-serif;


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>
Mtro. Ivn Ortiz Ramrez

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 {
Mtro. Ivn Ortiz Ramrez

Pgina 51

position: relative;
background: #000000;

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; }
Mtro. Ivn Ortiz Ramrez

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,
Mtro. Ivn Ortiz Ramrez

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 {
Mtro. Ivn Ortiz Ramrez

Pgina 54

width: 60px;
background: #d6d6d6;

Cdigos HTML y CSS3

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {


position: absolute;
width: 0;
top: 0;
left: 0;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
height: 4px;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
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 {
background: rgb(152,152,152);
background: rgba(152,152,152, .5);
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: rgb(0,0,0);
Mtro. Ivn Ortiz Ramrez

Pgina 55

background: rgba(0,0,0, .3);

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-family: Helvetica, Arial, sans-serif;


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.
Mtro. Ivn Ortiz Ramrez

Pgina 56

Cdigos HTML y CSS3

.mejs-controls .mejs-time-rail .mejs-time-current,


.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-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">
Mtro. Ivn Ortiz Ramrez

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>
<span>monthly</span>
<a href="#">Join</a>
</td>
<td class="green">
<p>
<span>$</span>12</p>
<span>monthly</span>
<a href="#">Join</a>
</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>
<td>200GB Almacenamiento</td>
<td>500GB Almacenamiento</td>
</tr>
<tr class="heart-icon">
<td>1TB Ancho de Banda</td>
<td>2TB Ancho de Banda</td>
<td>5TB 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>
Mtro. Ivn Ortiz Ramrez

Pgina 58

Cdigos HTML y CSS3

<td><b>Softaculous</b> es un gran instalador automtico que tiene 270 grandes guiones, 1000
Clases de PHP y seguimos agregando ms.</td>
<td><b>Softaculous</b> es un gran instalador automtico que tiene 270 grandes guiones, 1000
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;
display: inline-block;
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;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: url(img/green_pattern.png) repeat-x 0 0;
}
.pricing-table thead .plan .orange {
color: #fafafa;
text-shadow: 1px 1px 2px rgba(0,0,0, .4);
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 {
Mtro. Ivn Ortiz Ramrez

Pgina 59

Cdigos HTML y CSS3

color: #36611e;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: url(img/green_pattern.png) repeat-x 0 0;

.pricing-table thead .plan .orange {


color: #fafafa;
text-shadow: 1px 1px 2px rgba(0,0,0, .4);
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-transform: uppercase;
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;
vertical-align: middle;
}
Mtro. Ivn Ortiz Ramrez

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;
text-decoration: none;
}
.pricing-table thead .price .green a {
color: #37621f;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
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;
text-shadow: 1px 1px 2px rgba(0,0,0, .3);
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
Mtro. Ivn Ortiz Ramrez

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-family: Helvetica, Arial, sans-serif;
font-size: 11px;
Mtro. Ivn Ortiz Ramrez

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-family: Helvetica, Arial, sans-serif;
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


Mtro. Ivn Ortiz Ramrez

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,
Mtro. Ivn Ortiz Ramrez

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;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
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.
Mtro. Ivn Ortiz Ramrez

Pgina 65

.flexslider {
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;

Cdigos HTML y CSS3

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
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;
text-indent: -9999px;

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
Mtro. Ivn Ortiz Ramrez

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-bottom: 5px solid transparent;
border-left: 5px solid #31611e;
}
Mtro. Ivn Ortiz Ramrez

Pgina 67

Cdigos HTML y CSS3

.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
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 {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;

-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);
Mtro. Ivn Ortiz Ramrez

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-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 20px;
color: white;
background-color: #222222;
background: rgba(0,0,0, .9);

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
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.

Mtro. Ivn Ortiz Ramrez

Pgina 69