Crear un sitio con Responsive Web Design Parte-2

Esta es la segunda parte de cómo crear una web con Responsive Web Design, iremos paso a paso, primero con teoría, después teoría y práctica.

Hasta llegar en la parte donde tendremos que hacer nuestro diseño de cómo queremos nuestro sitio web, luego realizaremos la estructura HTML seguido dando el estilo con CSS.

Crear un sitio con Responsive Web Design Parte-1

El diseño web adaptativo, o responsive web design, es una técnica que pretende simplificar el modo de realizar un mismo sitio web para diferentes dispositivos adaptándose perfectamente al ancho de cada pantalla. Como  características los layouts e imágenes son fluidos y se usan media-queries de CSS3. - See more at: http://webysocialmedia.es/2012/que-es-responsive-web-design-o-diseno-web-adaptativo/#sthash.B5Uc5g5e.dpuf

El diseño web adaptativo, o responsive web design, es una técnica que pretende simplificar el modo de realizar un mismo sitio web para diferentes dispositivos adaptándose perfectamente al ancho de cada pantalla. Como  características los layouts e imágenes son fluidos y se usan media-queries de CSS3.

Escalar imagen con CSS

En esta nueva aventura aprenderemos como escalar una imagen,  pero no solamente haremos eso sino le daremos un estilo para adornar la imagen.

Vayan buscando una imagen de tamaño de 400px de alto y ancho, háganlo en google y hay un botón que dice herramienta de búsqueda vallan donde dice tamaño y le dan tamaño exacto.

Como enumerar con CSS

Ademas de enumerar con las listas ordenas UL tambien lo podemos hacer de otra manera utilizando solamente CSS pero dejenme decirle que hacerlo con las listas UL es una mala practica porque las listas unicamente se utilizan con texto cortos.

Este tutorial surge por un trabajo que estaba haciendo en la U me pregunte como se podia enumerar dichos titulo o subtitulos de un documento pero utilizando html y css.

Background estatico o fijo

Como agregar una imagen de fondo en nuestra sitio web y ademas de que manera al momente de ir bajando con el mouse ese misma imagen se quede estatica, fija, sin moverse.

De esta manera podemos agregarle un fodo a nuestro sitio que diga, que les indique a nuestros usuarios o visitantes que es lo que promovemos, tambien al mismo insertar logos de nuestros patrocinadores. 

Como ubicar la posicion del evento hover

Ya habia tardao en publicar un tutorial, pero la espera es buen.

En esta ocacion les traigo un solo ejemplo de hacer multiples hover a un solo elemento y de que posicion queremos que inicie el evento hover. 

Ocuparemos 5 imagenes una de ellas el logo del nuestro sitio web y las otras cuatro para hacer el evento hover.

Menus Horizontal con icono parte-2

Seguiemos con el tutoria del menu con icono esta vez haremos unos cambios a nuestro menu.

Cambiaremos el color de nuestro nav,  tambien el color cuando pasemos nuestro mouse sobre el contenedo del enlace y la imagen.

Menus Horizontal con icono parte-1

Esta ves les traigo otro interesante tutorial, seguimos con la creacion de menu, pero esta ves algo mas interesante ademas del texto tradicional que traen los menu le agregaresmos unos icono a la para de cada link dandole asi un mejor aspecto.

Ademas de los icono utilizaremos transiciones, al pasar el mouse sobre cada link mostrara un background azul el que hemos utilizado en tutoriales anteriores.

Crear menu horizontal desplegable

Bueno seguimos con los menu pero en esta ocacion lo que haremos es un menu desplegable de daremos color algo vistuso para que lo utilizen en su blog o sus practicas.

Este codigo es bastante sencillo pero practico, si tienes poco conocimiento podras adaptarlo a tus necesidades.

Menu Horizontal estatico o fixed con CSS

En esta nueva entrega les traigo como hacer que nuestro menu estatico sin importar la posicion que tenga puede estar horizontalmente o verticalmente.

Por lo genera el menu horizontal estatico o fixed se utiliza cuando un post o la cantidad de post ubicada en la pagina principal o una pagina de X categorio su contenido es extendo.

Bordes redondeados con CSS3

Las esquinas y bordes redondeados son parte natural del diseño web, pero siempre han representado un dolor de cabeza. 

Sin embargo, cada vez esta más cerca la implementación de CSS3 en los navegadores más populares y con ella, la posibilidad de crear bordes redondeados solo con css y sin imágenes.

Efecto Zoom con CSS3

Hoy lograremos llamar la atencion a nuestro visitantes al darle el efecto a nuestra galeria de imagenes,en este efecto lo realizaremos utilizando solo las propiedades que nos da CSS3.

CSS

.zoom{
  transition: 1.5s ease;
   -moz-transition: 1.5s ease; /* Firefox */
   -webkit-transition: 1.5s ease; /* Chrome - Safari */
   -o-transition: 1.5s ease; /* Opera */
 } 

Rotar cualquier elemento con CSS3

Con este tutorial podremos girar, rotar cualquier elemento en nuestro sitio web.

Lo haremos utilizando codigo CSS3,  una imagen o cualquier otro elemento que desemos.

Agregar bordes y sombras a imagen con CSS

Ahora que nos estamos aventurando en lo que es la programacion y diseño web, les traigo este tutorial de como agregar bordes y sombras a cualquier imagen o div utilizando CSS.

Para esto utilizaremos un editor de texto de su preferencia ya sean Sublime text, notepad ++, dreamweaver, phpEditor entre otros.