por Omar Benyakhlef | Diseño de páginas web, Trucos CSS, Tutoriales, Usabilidad
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.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
cambiar font-size con javascript
En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.
Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.
A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Background Image
Cada vez son más numerosas las webs y blogs que flotan sobre una impresionante imagen. Este fondo puede ser una imagen única o una más pequeña que se repite horizontalmente, verticalmente o ambas.
Los fondos consiguen dar mayor peso gráfico a la web, y sobre todo, captar la atención del usuario.
A continuación vamos a ver unos ejemplos de web con backgrounds, cómo insertar el código en la CSS y un par de sitios en los que poder descargar buenos backgrounds.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Enlaces visitados con CSS
Buenísimo código CSS para que todos aquellos enlaces que hayan sido visitados aparezcan marcados con una imagen (por ejemplo).
Me parece una utilidad genial, sobre todo para hacer más usable el menú de una web o blog. El usuario siempre sabrá si ya ha pasado por ese enlace o no. El código es el que aquí os apunto, si queréis ir a la página original y ver el código funcionando pulsad los enlaces de la columna derecha de http://www.colly.com/index.php
#sidebar ul { list-style-type:none; padding:3px; }
#sidebar li a { display:block; line-height:150%; width:239px; background:url(ticks_grey.gif); text-decoration:none; }
#sidebar li a:link, a:active { color:#666; }
#sidebar li a:hover { color:#F33; background-position: 0 -20px; }
#sidebar li a:visited { background-position: 0 -40px; }
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Trucos CSS: pie de página fijo
En este caso se trata de hacer un pie de página que siempre está visible, de tal modo que el diseño siempre ocupa el 100% de la altura del monitor.
De todos los ejemplos que circulan por ahí, creo que el mejor es este que os apunto en este post.
Se trata de una práctica no muy aprovechada debido a la altura excesiva que normalmente tienen los sitios, pero para casos en los que se trate de una web no muy grande, como un porfolio o una web de una empresa, se trata de una práctica que puede ser muy útil y visual.
Para todos aquellos que queráis ver el tutorial en inglés este es el enlace. Para el resto, esto es lo que hay que hacer:
(más…)
por Omar Benyakhlef | Diseño de páginas web, Usabilidad
Paginación
Se realiza una paginación cuando consideramos que la cantidad de información que vamos a mostrar al usuario debe der ser fraccionada, para de ese modo ayudarle a encontrarla, bien. Pero si ese es el motivo, hagámoslo bien hasta el final ¿no?.
La paginación no es sólo colocar un siguiente y anterior, o un sin fín de índices de páginas para que el usuario las pulse. Tan importante como la movilidad entre las páginas es la información mostrada en cada una de esas páginas. Vamos a ver el proceso en varios apartados.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacks CSS
Los hacks son «condiciones» que se colocan en la CSS para que cada navegador interprete de modo diferente las órdenes del estilo que nos esté dando problemas, de tal manera que al final consigamos que nuestros diseños no difieran en función del navegador usado por el usuario.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Menús gratis en JQuery, Ajax, CSS,...
Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.
Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.
Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.
En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS, Tutoriales
Código CSS para centrar una web en pantalla
Raro es ya ver una web que no esté centrada horizontalmente, por otro lado, existen webs de poca altura que en algunos casos nos interesa más, verlas centradas verticalmente en el monitor. Por otro lado una tendencia ya muy expandida es el uso de «pies de web«. Aquí os dejo algunos códigos CSS que espero os puedan servir en vuestros próximos diseños para solucionar estos conceptos.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Google, SEO, Usabilidad
Viendo lo fácil que era maquetar con tablas, ¿por qué nos complicamos la vida con las CSS y las capas?. Estoy seguro que para muchos de vosotros es algo obvio, pero sigo escuchando comentarios que siguen pensando que se trata únicamente de un capricho o moda.
Las tablas, gracias a la etiqueta border=»0″, se convirtieron en una rejilla en la que era muy fácil maquetar una web. Además y gracias también a la imagen de un pixel transparente, conseguíamos posicionar todo en el lugar adecuado.
Existen varios motivos por los que es mejor usar capas en lugar de tablas, vamos a detallarlos:
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.
Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.
En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…
dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.
Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.
Sin duda es una web de consulta obligatoria.
