Los tooltips son una herramienta visual de ayuda al usuario que funciona al situar el ratón sobre un elemento, mostrando una ayuda adicional.

Desde designreviver.com nos ofrecen un tutorial para personalizar los tooltips de nuestra web usando jQuery y CSS.

El tutorial, aunque en inglés, proporciona el código necesario para que podamos implementar esta técnica en nuestras páginas sin mayor problema.

Un recurso interesante, para hacer más homogéneo nuestros diseños.

Enlace | jquery css tooltip example

Descubro en webmasters by design una web repleta de tutoriales sobre HTML y CSS: HTMLDog.com. Estos tutoriales se dividen en tres niveles diferentes: básico, intermedio y avanzado.

Como comenta Scott Spear en su web, la página cuenta con un diseño cuidado y muy simple, donde ningún elemento nos distrae de lo importante, que como siempre en esto de internet, es el contenido; en este caso de los tutoriales.

Aparte de seguir al pie de la raya los estándares web marcados por la W3C, también existe un índice de etiquetas para el HTML y de propiedades para CSS, donde se describen al detalle todas sus propiedades, por si tenemos alguna duda al respecto durante la lectura. Además de varios artículos donde se extiende sobre temas puntuales de la codificación en HTML y CSS.

Tanto la web como todos los tutoriales, han sido creados por Patrick Griffiths, colaborador en webs de altura como alistapart.com y cssZenGarden.

Y por si fuera poco, y sois de los que aún preferis tener un buen libro entre manos y no estar con los ojos fijos en la pantalla, todos los contenidos de la web los podeis encontrar en un libro que podreis comprar en Amazon UK.

Como veis, toda una web de referencia tanto para los novatos en codificar una web siguiendo los estándares mediante HTML y CSS, como para los que ya llevamos unos añitos en esto pero que, como no, aún seguimos teniendo nuestras dudas.

HTMLDog, una web para tenerla en tus favoritos, sin ninguna duda. 100% recomendable.

En entradas anteriores, os dejamos un excelente tutorial para crear blockquotes con imágenes de fondo. Hoy encuentro en tutorialblog un artículo donde exponen otra forma de dar estilo al elemento blockquote usando CSS.

Además, a modo de inspiración, nos ofrecen una galería con ejemplos para tomar ideas.

El artículo original podeis encontrarlo aquí: Resources for styling blockquotes

Una útil propiedad de CSS, y puede que desconocida por algunos es text-transform.

Con text-transform podemos controlar las letras de un elemento. Los posibles valores que puede tomar text-transform son:

El valor none dejará el texto tal cual lo hayamos escrito.
Con capitalize, cada letra del texto empezará con mayúsculas.
uppercase convierte todo el texto en mayúsculas.
lowercase convierte todo el texto en minúsculas.

Como veis, text-transform es una propiedad sencilla y facil de utilizar, pero que puede ayudarnos sobre todo cuando trabajamos con varios idiomas, y recojemos los textos de un fichero externo. Supongamos que tenemos el título de una sección (contacto). En la barra de navegación principal queremos tenerlo en mayúsculas, para que resalte más; mientras que en el resto del documento nos interesa que esté en minúsculas. Con un simple text-transform: uppercase ó text-transform: lowercase solucionamos el problema, sin tener que duplicar la entrada en el fichero donde recogemos los datos.

Y vosotros, ¿que otros usos le dais a la propiedad CSS text-transform?

Hace algunos días que ya os hablamos de la estupenda propiedad de CSS3 border-radius.

Bien, me ha parecido interesante dar un repaso más amplio a esta propiedad por las amplias posibilidades que tiene.

Antes de empezar, dejemos clara una cosa: border-radius tan solo funciona en los navegadores más avanzados que han empezado ya a implementar en sus motores características del nuevo estándar para las hojas de estilo en cascada CSS3. Esto quiere decir que solo Firefox con su motor Gecko, Safari con Webkit  y Konqueror con khtml (por citar los más conocidos) son los únicos navegadores en los que funcionará la propiedad border-radius. Ni Opera, ni por supuesto Internet Explorer la soportan todavía.

Como comentamos en la entrada anterior, podemos aplicar bordes redondeados a un elemento haciendo uso de:

-moz-border-radius para Firefox.

-webkit-border-radius para Safari.

-khtml-border-radius para Konqueror.

Pero, ¿que pasa si queremos que tan solo las esquinas inferiores del elemento sean redondeadas, y las superiores rectangulares?

En ese caso, debemos especificar que esquina es la que queremos redondear, y con cuantos pixeles. Sería así:

Para Firefox (Gecko):

Para Safari (Webkit):

Para Konqueror (khtml):

Como podeis ver, Webkit y khtml usan la misma nomenclatura, mientras que Gecko crea la suya propia.
Con esto, podemos aplicar diferentes radios a las esquinas de cada capa.

¿Las posibilidades? Infinitas. Ahora tan solo queda esperar a que todos los navegadores implementen estas propiedades, para dar un paso adelante en temas de maquetación, y olvidarnos de muchos problemas con imágenes, javascripts y demás…

Sin embargo, no dudes en usar estas propiedades si realmente las necesitas, siempre que la versión resultante para los navegadores “no tan avanzados”, sea igualmente accesible y usable. Es simplemente, mejorar la experiencia del usuario que utilice el navegador adecuado.

Y vosotros, ¿ya usais -border-radius en vuestros proyectos? ¿No? ¿Y a qué esperáis?

Vía noupe.com, nos ha llamado la atención una magnífica recopilación de más de 47 formularios de contacto realizados en CSS, utilizando Ajax.

Como comenta el autor del post, con AJAX es posible informar al usuario en tiempo real de los posibles errores ocurridos durante el envío del formulario de contacto.

Esto es un gran avance, sin duda, pero siempre tenemos que tener presente a la hora de crear estos formularios que AJAX es un recurso para ayudar, y que no debe monopolizar el formulario de contacto.

¿Que quiero decir con esto? Pues que debemos pensar también en aquellos usuarios que no tienen javascript activado (bien por el dispositivo que usan para acceder a la red, o bien por el tipo de navegador), y que nuestro formulario tenga más cualidades usando AJAX, pero que siga siendo accesible y usable sin él. Así de fácil.

La inspiración, la podeis encontrar aquí: 47 excellent ajax css forms

En cssaddict.com me encuentro con un estupendo artículo sobre los formularios de contacto de las páginas web. Estos formularios, que según el autor son una parte importantísima de nuestra web (ya que es casi el único medio de contacto entre el usuario y nosotros), están muy olvidados y no se les presta la atención que merecen, tanto en el diseño web como en la programación (ya sea AJAX, PHP, o cualquier otra tecnología).

Por eso, el autor nos ofrece una recopilación de formularios de contacto que han llamado su atención para inspirarnos, además de una extensa lista generadores de formularios de contacto, y de los documentos CSS para darles ese toque especial.

Una entrada para echarle un vistazo, y de paso reflexionar si, como yo, dejas siempre el formulario de contacto de la web para el final, cuando estás deseando terminar ya el proyecto, y no le prestas la atención que deberias.

El artículo lo puedes encontrar aquí: generating inspirational css web forms

Estupenda galeria de ideas en css y flash.

Enlace: http://cssflash.com/

Hoy en el trabajo, necesitaba dar formato a una cita de texto y hacerlo de una manera bastante visual y atractiva. Buscando en Google (como siempre), he encontrado una forma fácil, bonita y que valida al 100%.

La idea, es hace algo similar a esto:

El CSS necesario es el siguiente:

Sencillo, ¿verdad? La etiqueta blockquote lleva una imagen de fondo (las comillas que abren), y indenta el texto para que no tape el texto.

Dentro del blockquote, pondremos el texto dentro de un párrafo (<p>), que también llevará una imagen de fondo (en este caso, las comillas que cierran).

Y poco más… valida tanto el HTML como el CSS, y cumple con su función.

El post original, es este: Inline image quotes (en inglés), y podeis ver una demo aquí.

Desde 3point7designs, nos ofrecen un tutorial para crear un menú animado para nuestra web, usando simplemente CSS e imágenes GIF.

Desde hace varios años, y proporcionalmente a la inclusión del PNG, nos hemos ido olvidando de los GIF. Con este tutorial, veremos como sacarle partido a este tipo de imagenes, explotando su parte más interesante… la animación.

Mas info, después del salto…

Read More »