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.
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 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.
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…
