CSS3 la revolución del diseño web !!!

CSS3

CSS3

En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la “batalla entre navegadores”, la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.

Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.

Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…

CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.

CONTINUAR LEYENDO “CSS3 la revolución del diseño web !!!” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Diseño Web Horizontal

Diseño Web Horizontal

Diseño Web Horizontal

Hace ya tiempo que tenía ganas de hablar del diseño web horizontal.

Lejos de las creencias de los llamados “gurús” de la usabilidad, han ido proliferando muchas web relacionadas con el diseño, fotografía, revistas,… En las que en lugar de tener que desplazarse verticalmente por el sitio web, el desplazamiento se hace de modo horizontal.

En este tipo de webs nos encontramos con algún problemilla.  El primero es que lo normal es que nuestro ratón sólo tenga scroll vertical, por lo que tendremos que ir desplazando manualmente el scroll de la barra del navegador, pero vamos a ver algún ejemplo en el que esto se soluciona de un modo perfecto.
El segundo y quizás el más importante, es que debemos de indicar de algún modo al usuario, que se encuentra en una web distinta, que si quiere más contenido tendrá que desplazarse horizontalmente.
Una solución, sería hacer un corte en la página, de modo que se dejase ver que hay más contenido hacia la derecha, por ejemplo, con un contenido cortado por la resolución de pantalla, pero tendríamos que tener presente las distintas resoluciones de pantalla para que esto funcionase. Así que lo normal es encontrarnos con unas flechas dibujadas que nos indican el desplazamiento.

En estos ejemplos podréis ir viendo cómo ha ido evolucionando este tipo de webs, desde el Html con tablas, hasta el uso de CSS.

CONTINUAR LEYENDO “Diseño Web Horizontal” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

La mejor CSS

Optimizar la CSS al máximo

Optimizar la CSS al máximo

Cuando hacemos un diseño web, tenemos que tener muy en cuenta cómo luego vamos a  optimizarlo de la mejor manera,  para que que no pese demasiado.

En el post anterior, Gabriel, me preguntaba cómo optimizar la CSS, espero que este post, os sirva de algo.

Hace un par de años, recuerdo volverme loco para hacer páginas que no superasen en ningún caso los 100kb de peso, era una auténtica pesadilla, ya que sólo la gráfica te llevaba casi la mitad.
Hoy en día las velocidades de carga son más rápidas, pero eso no significa que podamos permitirnos hacer nuestras páginas sin optimización alguna.

Además, cada vez son más, los usuarios que nos conectamos con un terminal de bolsillo, por lo que se agradece muy mucho, el poder navegar con fluidez sobre una página “ligera”.

Tendremos pues que intentar optimizar al máximo nuestras imágenes, el Html y los archivos que mandamos cargar al navegador cuando lee nuestro código, como los .js y los .CSS

En este post vamos a tratar de conseguir la mejor CSS para nuestra web.

CONTINUAR LEYENDO “La mejor CSS” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

CSS: ancho de una capa (DIV)

ancho de capas con CSS

ancho de capas con CSS

Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.

Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.

Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …

Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:

  • margin - es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
  • padding - es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.

Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin,  (padding: 0px; margin: 0px; border; 0px). Yo,  para no tener problemas con los navegadores, coloco los bloques “contenedores” con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los “contenedores” sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

CSS Más y más trucos

CSS Trucos

CSS Trucos

La evolución en el diseño web ha venido de la mano entre otros, pero sobre todo, de las nuevas CSS. Además de conseguir ahora páginas más ligeras, hemos podido añadir efectos especiales que antes sólo eran imaginables con flash. Son varias las tecnologías que ahora nos permiten dar movimiento a capas, movimientos suaves, incluso con efectos de aceleración.

Los menús que antes había que hacer con imágenes de sustitución, ahora se pueden hacer con una única imagen que cambia su posición mediante cambio de coordenadas.

En este post voy a dejar unos cuantos ejemplos sorprendentes de la cantidad de efectos y utilidades que se pueden hacer con CSS.

CONTINUAR LEYENDO “CSS Más y más trucos” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This