Si conocen algún otro sitio que merezca estar dentro de esta categoría por favor manden sus comentarios para anexarlo dentro de esta selección.

Cornerd

Youzee

Ben the Bodyguard

Eric Johansson

Curious Generation

Siguiendo con nuestra línea de tutoriales relacionados con Jquery, HTML & CSS, ahora vamos a ver la manera de crear un control de hojas de estilo para nuestro sitio, en este caso tomaremos de ejemplo un Theme que estamos realizando para el sitio ThemeForest.

En este ejemplo vamos a realizar el diseño del control por medio de Photoshop y después le agregaremos el código necesario para que pueda cambiar de un estilo (.css) a otro de manera sencilla sin necesidad de cargar de nuevo la página.

Diseño de nuestro control en Photoshop

Comenzamos creando un cuadro con nuestra herramienta de formas, en este caso el tamaño no importan lo pueden crear tan grande como crean más conveniente para su sitio.

Después le vamos a agregar algunos Estilos a nuestro layer. Primero agregamos un “Inner Glow” el cual ponemos en modo “Normal” y lo cambiamos a color #000000. Después vamos a agregar un estilo de gradiente que va a ir de un colo obscuro #242424 a un color más claro #666666.

Listo, ya tenemos nuestra base para el control, ahora vamos a hacer un efecto “letter press” para poder agregar los botones de los diferentes colores que vamos a manejar para nuestro sitio. El efecto letter press siempre se manejan de la misma manera y solo ocupan dos tipos de estilos: “Inner Shadow” y “Drop Show”, con el primera damos la sensación de profundidad y con la sombra damos el efecto de borde, con un color más claro.

Para hacer esta sección también creamos un rectángulo o cuadrado y le damos los siguientes estilos. En este punto la clave para lograr este efecto es cambiar la opción “Fill Opacity” de nuestro layer a 0.

Este debe de ser nuestro resultado hasta ahora:

Listo ahora solo agregamos el titulo y los colores que podemos manejar, en mi caso solo son tres los tipos de estilos que se pueden manejar para este sitio.

Nuestros Estilos CSS & HTML

Comenzamos a darle estilo a nuestro control, cabe mencionar que no desarrollaremos las hojas de estilo para el sitio, si no que nada mas daremos estilo a nuestro control y después anexaremos el funcionamiento de este por medio de Jquery.

Este es el HTML para nuestro control.

<div class="controlbox">

	<h2>Available Colors</h2>

	<ul class="menucolors">

		<li><a href="#" title="Blue" id="blue">Blue</a></li>
		<li><a href="#" title="Red" id="red">Red</a></li>
		<li><a href="#" title="Green" id="green">Green</a></li>

	</ul>

</div>

Tomamos las imágenes de nuestro archivo en Photoshop, solo vamos a necesitar dos imágenes, la de fondo y la de nuestros colores.

Ahora agregamos un poco de CSS

.controlbox { width: 211px; height: 102px; background: url(../images/control_bg.png) no-repeat; position: fixed; top: 100px; left: 150px;}  /*"Posistion Fixed lo utilizamos para dejar estático nuestro control en una sección definida*/

.controlbox h2 { color: #ffffff; font-size: 18px; text-align: center; margin: 20px 0 0 0;}

.menucolors  { margin: 18px 0 0 25px;}

.menucolors li { float: left; margin: 0 5px 0 0;}

.menucolors li a { width: 27px; height: 27px; display: block; background: url(../images/colors.png) no-repeat; text-indent: -999999px;}

.menucolors li a#red { background-position: 0 -54px;}

.menucolors li a#green { background-position: 0 -27px;} /*Si tienes alguna duda de como crear estos botones, puedes ver nuestro tutorial de "CSS SPRITES"*/

Si tienes alguna duda sobre este código dejanos tu comentario y trataremos de resolverla a la brevedad.

Algo de magia de Jquery

        <!-- Switcher CSS -->
	<script type="text/javascript">
	$(document).ready(function() {
	// red
	$("#red").click(function() {
	$("link[rel=stylesheet]").attr({href : "style_red.css"});
	});

	// blue
	$("#blue").click(function() {
	$("link[rel=stylesheet]").attr({href : "style_blue.css"});
	});

	// green
	$("#green").click(function() {
	$("link[rel=stylesheet]").attr({href : "style_green.css"});
	});
	});
	</script>

Con esto terminamos, recuerda que podemos manejar diferentes tipos de estilos, no dudes en dejarnos tu comentario.

Por esta razón nos dimos a la tarea de buscar dentro de los mejores sitios de ecommerce en el mundo, para presentarles 5 ideas diferentes de como se puede conjuntar un buen diseño con una gran experiencia de usuario.

Dandy Frog

Ca c'est Gang

Hunter’s Wines

Chicago L-Shirts

Suitopia

Para poder diseñar en estilo “one page”, se pueden utilizar diferentes técnicas o tipos de animación, en este post vamos a utilizar un plugin de Jquery llamado “Scroll To”, este nos permite hacer la animación de recorrido tanto en horizontal como en vertical, podemos utilizarlo de diferentes maneras de acuerdo a nuestro diseño.

Te mostraremos como lograr este efecto de un manera fácil y rápida.

Vamos a comenzar con la creación de un fondo, el cual nos va a ayudar a para que quede el diseño de nuestro animación. En este fondo pondremos las 3 sección de las cuales constará nuestro recorrido.

Esta es la imagen que tendrá cada una de nuestras secciones ahora comencemos con lo básico, lo primero que debemos hacer agregar la liga a nuestro Jquery y a el plugin ScrollTo en nuestro archivo HTML, el pllugin lo podemos descargar desde su página oficial o ya viene incluido en los archivos de descarga de este tutorial.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>

Código HTML

Ahora vamos a definir cada uno de los elementos contenidos dentro de nuestro sitio, en este caso nuestro HTML queda de la siguiente manera

     <div id="nav"> <!-- Menu de nuestro sitio -->

        <ul>
            <li><a href="#">Sección Uno</a></li>
            <li><a href="#">Sección Dos</a></li>
            <li><a href="#">Sección Tres</a></li>

        </ul>

    </div>

    <div id="contenedor"> <!-- Contenedor para nuestra información -->

        <div id="uno" class="cont"><!-- Contenedor 1 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

        </div>

        <div id="dos" class="cont"><!-- Contenedor 2 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

            <a href="#">Volver al menu</a>

        </div>

        <div id="tres" class="cont"><!-- Contenedor 3 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

            <a href="#" class="regresar">Volver al menu</a>

        </div>

    </div>

La primera parte es donde creamos nuestro “menu” al cual definimos con un ID “nav”, después creamos un “Contenedor”, en este vamos a definir nuestro fondo y el contenido por secciones que necesitamos. En mi caso lo dividí en 3 pequeños contenedores los cuales me servirían para agregar el contenido necesario a mi portal, es importante agregar un ID para cada uno de nuestro contenedores y menú, ya que este es el que nos ayudará a activar nuestra animación.

Un poco de forma con CSS

/*Definimos la anchura de nuestro menu y contenedor y los centramos*/
#contenedor, #nav,{ width:960px; margin:0 auto;}

        /*Agregamos el Bacground de nuestro contenedor*/
	#contenedor { background:url(bg.jpg) no-repeat;}

        /*Aqui definimos cada uno de nuestros contenedores: ancho y alto*/
	.cont { width:960px; height:600px;}

	#nav { height:50px;}

        /*Es importante definir una separación considerable para que se note nuestra animación*/
	#uno, #dos {margin:0 0 650px 0;}

        /*Esta parte es para la creación del menu*/
	#nav ul { float: right;}

	#nav ul li { float:left; list-style:none; margin:0 20px 0 0;}

	#nav ul li a { text-decoration:none; color:#fa2a00; background:url(bg_btn.png) no-repeat; width:125px; height:44px; display:block; padding:15px 0 0 0; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

	#nav ul li a:hover { color:#333333; }

        /*Creamos nuestro boton de regreso*/
	.regresar { background:url(regresar.png) no-repeat; height:63px; width:50px; display:block; text-indent:-99999px; float:right; margin:30px 0 0 0;}

	.regresar:hover { background-position:bottom;}

La parte mas importante de nuestra hoja de estilos es el definir un espacio entre cada uno de los contenedores, esto es importante para que se note nuestra animación de lo contrario no alcanzaríamos a percibirla.

Dándole vida con Jquery y ScrollTo

Ahora que ya pasamos la parte mas larga, solo debes de agregar un pequeño código a cada uno de nuestros botones y LISTO!!!

            <li><a href="javascript:$.scrollTo('#uno',800);">Sección Uno</a></li>
            <li><a href="javascript:$.scrollTo('#dos',800);">Sección Dos</a></li>
            <li><a href="javascript:$.scrollTo('#tres',800);">Sección Tres</a></li>

Los ID #uno, #dos y #tres definen el lugar o contenedor al que queremos que se desplace, y el numero 800 es la duración que le hemos asignado a nuestro recorrido.

De la misma manera le agregaremos el codigo a nuestro boton de regreso

        	<a href="javascript:$.scrollTo('#nav',800);" class="regresar">Volver al menu</a>

Este plugin cuenta con diferentes variables que se le pueden asignar, si te interesa conocer mas sobre ScrollTo visita la página oficial

Algunas de las técnicas que veremos a continuación para la creación de estas páginas trataremos de revelarlas más adelante en la sección de Tricks.

Ahora les presentamos los 5 mejores diseño de una solo página.

Sage Media

Client Contest 2010

Compal

Fuel Brand Inc

Orman Clark

Vamos a crear una tabla de precios y buscaremos resaltar una columna en especifico, esto para dar la idea que de todos los servicios que ofrecemos el mas importantes es el que esta resaltado, estos tipos de tablas se pueden usar en diferentes ejemplos, pero principalmente son utilizados para mostrar paquetes o planes de algún tipo de servicio

Comenzamos por generar nuestra imagen, en este caso nosotros ya la tenemos definida, es una tabla de precios que vamos a diseñar para el portal Teko Estudio.

Ahora necesitamos exportar las imágenes necesarias para nuestra tabla, nuestra carpeta “images” debe de contener los siguientes archivos.

En este caso en particular se exportaron como “.png” para respetar las transparencia y poder ser consistentes con el diseño.

Código HTML

Para nuestro código HTML, diseñaremos cada una de las tablas, nuestro código quedara de la siguiente manera:

                <!-- Comienza plan -->

                <div class="column">

                    <div class="titprice">
                        <h2>Uno</h2>
                   	</div>

                    <div class="price">
                        <h3>3,000</h3>
                        <p class="small">Pago único</p>
                    </div>

                    <ul class="detalles">
                        <li>Diseño PSD (photoshop)</li>
                        <li>HTML &amp; CSS</li>
                        <li>1 página</li>
                        <li>Formulario Contacto</li>
                        <li>Implementación Jquery</li>
                        <li>Wordpress (CMS)</li>
                        <li>Google Analitycs</li>
                    </ul>

                    <p>
                        <a href="#" class="orange"><span>Solicitar</span></a>
                    </p>

                </div> 

                <!-- Termina Plan -->

Este tutorial esta diseñado para personas con niveles básicos de HTML y CSS, si estas atorado en esta parte, quiere decir que necesitas revisar un poco las bases de continuar

El código que utilice esta muy simple, tenemos un div llamado “column” que es el que encierra toda nuestra información, adentro de de este tenemos 4 secciones más, la primera es el titulo del producto, la segunda es el precio y una leyenda de “pago único”, en la tercera sección tenemos los detalles del tipo de plan, este esta a manera de lista desordenada y cada elemento “li” nos muestra un detalle de nuestra tabla de precios y por utlimo contamos con un párrafo el cual encierra nuestro botón.

Ya que tenemos nuestra primera columna solo debemos de copiar y pegar este código para crear el numero de paquete o planes que necesitemos, en el caso del precio principal nuestro código tiene algunas pequeñas variantes, que mencionare a continuación.

                <!-- Comienza plan -->

                <div class="columnp">

                    <div class="titprice">
                        <h2>W Prime</h2>
                       </div>

                    <div class="price">
                        <h3>$3,000</h3>
                        <p class="small">Pago único</p>
                    </div>

                    <ul class="detalles">
                        <li>Diseño PSD (photoshop)</li>
                        <li>HTML &amp; CSS</li>
                        <li>1 página</li>
                        <li>Formulario Contacto</li>
                        <li>Implementación Jquery</li>
                        <li>Wordpress (CMS)</li>
                        <li>Google Analitycs</li>
                    </ul>

                    <p>
                        <a href="#" class="blue"><span>Solicitar</span></a>
                    </p>

                </div> 

                <!-- Termina Plan -->

Como pueden ver en el código anterior lo único que cambia son dos clases, la clase “orange” y “column”. La clase orange la sustituimos por “blue” para poder dar un color de botón diferente en el precio, y la clase column ha sido modificada por “columnp” para poder cambiar el fondo de la columna principal.

Ahora que ya tenemos nuestro código HTML podemos comenzar con la magia del CSS

CSS de nuestra tabla de precios

Lo primero que vamos a hacer, es darle estilo a nuestra clases.

    .column {
        background:url(images/tabla_normal.png) no-repeat; /*Definimos el fondo de nuestra columna*/
        width:169px; height:313px; /*Definimos las proporciones alto y ancho para la columna*/
        float:left; /*flotamos a la izquierda para generar el contenido en horizontal*/
        }

    .columnp {
        background:url(images/tabla_principal.png) no-repeat; /*Definimos el fondo de nuestra columna*/
        width:174px; height:317px; /*Definimos las proporciones alto y ancho para la columna*/
        float:left;
        }

    .columnp, .column {
        margin:0 4px 0 0;
        padding: 10px;
        }

    .titprice {
        padding:0 0 10px 0;
        font-size:20px;
        }

    .titprice, .price, .detalles {
        text-align:center;
        border-bottom:#d2d2d2 solid 1px;/*Borde que separa los contenidos*/
        }

    .price {
        padding:10px 0 10px 0;
        }

    .price h3 {
        font-size:38px;
        text-align:center;
        color:#000000;
        font-weight:bold;
        letter-spacing:-1px; /*Reducimos el espacio entre cada letra*/
        }

    .price p.pagounico {
        font-size:10px;
        margin:0 0 10px 0;
        }

    .detalles {
        margin:10px 0 10px 0;
        padding:0 0 5px 0;
        }

    .detalles li {
        margin:0 0 5px 0;
        list-style:none;
        }

    .orange { /*Aqui comienza el css sprite*/
        background:url(images/botones.png) no-repeat;
        width:167px;
        height:46px;
        display:block;
        text-indent:-99999px;
        }

    .blue { /*Aqui comienza el css sprite*/
        background:url(images/botones.png) no-repeat bottom;
        width:167px;
        height:46px;
        display:block;
        text-indent:-99999px;
        }

Clase column y columnp, con estas definimos el fondo y tamaño de cada una de nuestras columnas.

Con la clase titprice y price determinamos el tamaño de letra para nuestro producto y precio, al mismo tiempo definimos que forma y espacios va a tener nuestra lista desordenada, esta la modificamos por medio de la clase detalles.

Y por ultimo solo tenemos que hacer un CSS Sprite para agregar nuestros botones.

Recuerden que la clases colump y blue son las que le dan formato a nuestro precio principal

Cerative Mints

Twitter

Epic Agency

Tomas Pojeta

NFLUK

El uso de sprites en CSS es una práctica muy común en los desarrolladores web, esto se hace para poder reducir el tiempo de carga de imágenes en el portal que estas desarrollando. Ahora vamos a ver como funcionan los sprites y que necesitas hacer para poder crear el tuyo.

En este caso vamos a comenzar con el diseño de un botón y vamos a hacer el código necesario para su buen funcionamiento.

Vamos a diseñar nuestro botón en photoshop y va a ser solamente una base de gradientes y lineas , para comenzar creamos un forma de esquinas redondeadas, las proporciones del botón depende del diseño que ustedes necesitan, en mi caso lo voy a hacer de 360 x 110 px y esta será la base que tomare para el código CSS.

Ahora le aplicaremos algunos estilos para dar volumen y forma a nuestro botón

Este es el resultado que debemos de obtener después de haber aplicado nuestros estilos.

Escribe lo que te gustaría que llevara el boton y agregale la fuente y estilos apropiados para tu diseño, en este caso yo usaré la letra Cambria y los siguientes estilos:

Este es el resultado que hemos obtenido.

Selecciona el botón y el texto, arrastralo mientras presionas las teclas ALT y SHIFT para duplicarlo. Alinea el botón duplicado justo debajo del botón original, respetando la sombra que le asignamos. Modifica los estilos del botón superior para darle un fondo de diferente color. Por ultimo utilizaremos la herramienta TRIM para ajustar el lienzo al tamaño de nuestra imagen

Oculta el fondo y guarda la imagen presionando ALT, CTRL, SHIFT y la tecla S, recuerda que debemos de guardar la imagen como PNG para que nos respete las transparencias del fondo.

Abre tu aplicación favorita para el desarrollo de código y creamos un simple HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Sprite CSS</title>

</head>

<body>

<div id="btncss">

<p><a href="#" class="btn">Sprite CSS</a></p>

</div>

</body>
</html>

Para crear el boton agregaremos un pequeños parrafo y dentro de el un anchor que es el que nos va a dar el enlace para nuestro botón, la clase para este anchor va a ser “btn”

<p><a href="#" class="btn">Sprite CSS</a></p>

Ahora empezaremos con la magia del CSS.

#btncss p a.btn {
background-image: url(btn_css.png);/*Asignamos el fondo*/
background-position: top; /*Definimos la posición del fondo*/
text-indent: -9999px;/*Desaparecemos el txt "Sprite CSS"*/
display: block;/*Lo mostramos en bloque, para poder definir width y height*/
width: 364px; height: 114px; /*Definimos medidas del boton*/
}

#btncss p a.btn:hover {
background-position: bottom; /*Definimos la posición del fondo*/
}

Como lo comentamos al principio del tutorial, las medidas de nuestro botón se definieron de 360 x 110px y le agregamos 4px por el efecto de sombra que le hemos aplicado.

La descripción de cada linea esta en el código anterior, recuerda que siempre que trabajes con anchor o el tag “a” debes de definir en que manera lo quieres desplegar, en este caso lo haremos en bloque para poder asignar una altura y anchura determinada.