Creando un Elemento Web E-Commerce con CSS3

Creaando un Elemento Web E-Commerce con CSS3

Online | 0.2 Mb | Código Fuente  | Publicación:2013 | Pass:www.detodoprogramacion.com

Descripción:
En este tutorial usted aprenderá cómo crear un elemento web muy popular entre los sitios web de comercio electrónico.Lo pueden adaptar segun su necedidad y gusto para asi usarlo donde mas le parezca.

Paso 1: Formato HTML
En primer lugar, incluir esta línea 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 información sobre el producto (información) y el último contiene detalles adicionales, como la calificación de el producto:
<div class="block"> <div class="product"> <img src="img/product.jpg"> <div class="buttons"> <a class="buy" href="#">Añadir a la cesta</a> <a class="preview" href="#">Ver artículo</a> </div> </div> <div class="info"> <h4> AB COASTER cs 2000</h4> <span class="description"> Resultados inmediatos!!! Abdominales perfectos de una manera rápida 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 básico
Vamos a empezar con el contenedor principal: lo haremos 295 píxeles de ancho y vamos a añadir esquinas redondeadas, un fondo blanco y una sombra sutil.
.block { display: block; 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 también 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 continuación, los divs que contienen la información 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 están contenidos por el div con los botones de la clase. Cuando la imagen en miniatura del producto se cernía, los botones deben aparecer con una transición. En primer lugar, vamos a cuidar de la div, que contará con un fondo blanco semitransparente cuando la imagen de vista previa se cernía:
.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; -o-transition: opacity .25s ease-in; transition: opacity .25s ease-in; } .product:hover .buttons, .product:hover a { opacity: 1; }

A continuación, algunos estilo básico 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 botón individualmente. En primer lugar, el "Añadir al carrito" botón. El botón tiene un fondo negro semi-transparente y será colocado en posición vertical utilizando porcentajes, porque las imágenes 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; -moz-transition: background .2s ease-in; -o-transition: background .2s ease-in; transition: background .2s ease-in; }

En hover, el fondo será un poco más claro:
.buy:hover { background: #515151; background: rgba(45, 45, 45, .85); }

Ahora, vamos a configurar el icono de fondo de pseudo-elemento del botón añadir  a cesta:
.buy::after { background: url("img/cart-icon.png"); background-repeat: no-repeat; background-position: 12px 18px; }

Vamos a añadir un poco de estilo al botón "Ver artículo" también. Como te habrás dado cuenta, el botón "Añadir al carrito", cambia su fondo en vuelo estacionario con una transición. Por desgracia, este botón tiene un gradiente de fondo, pero las transiciones no funcionará con gradientes. Así que, ¿cuál es la solución? Bueno, vamos a aumentar el tamaño del fondo, así que será más grande que el botón real, entonces vamos a utilizar background-position para desplazar el degradado de fondo en vuelo estacionario. También, el botón 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; } .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 descripción del producto
Como habrá podido observar en la vista previa, hay un pequeño triángulo en la parte inferior de la imagen del producto / artículo. Crearemos ese triángulo con un pseudo-elemento del div con la información de clase. El triángulo 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 continuación, vamos a añadir un poco de estilo al nombre del elemento. Además, vamos a añadir una línea 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; letter-spacing: -1px; } .info h4::after { display: block; position: absolute; bottom: 0px; content: ""; width: 40px; height: 2px; background: #3b86c4; }

Ahora, vamos a formatear un poco la descripción 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 botón "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); 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(Valoración)
En el paso final, nosotros nos encargamos de los detalles adicionales, como el momento en que se añadió el producto o la clasificación 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 calificación 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 clasificación de cuatro estrellas, los primeros cuatro elementos de la lista tendrán la clase calificada y una estrella amarilla como fondo. Vamos a empezar por la creación de una imagen de sprites para las estrellas las cuales serán 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; }

A continuación, los elementos de la lista. Nosotros mostraremos ellos en línea 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; }


Y el Resultado final es este y  pueden ver en el demo.

Cualquier duda o consulta dejen su comentario, saludos.