Tooltip oculto con CSS
Los bocadillos de texto (tooltip) son un recurso muy interesante a la hora de mostrar textos informativos. En esta entrada aprenderemos a crearlos usando HTML, CSS y 3 imágenes. Estos bloques de información quedarán ocultos y únicamente se mostrarán al mover el ratón encima de un enlace.
5 bonitas estructuras de encabezados
En esta entrada os mostraré 5 ejemplos sobre encabezados, esa parte tan importante que aparece al comienzo de un texto. También la entrada sobre tipografías adecuadas para encabezados puede resultaros útil. Generalmente los encabezados contienen 5 elementos: 1- Título del artículo 2- Fecha de publicación 3- Nombre del autor 4- Categoría o etiquetas 5- Número … Lee más!
Eliminar el borde de las imágenes con vínculo
Cuando vinculamos una imagen, si no tenemos aplicada la propiedad border: none; alrededor de la imagen podremos identificar un recuadro azul, si usamos Firefox. Como decía anteriormente, con solo aplicar la propiedad anterior con su valor correspondiente esto se arreglará y el borde quedará eliminado. Esto es muy sencillo pero existe gente que tiene el … Lee más!
Vídeo: CSS orientado a objetos (Object Oriented CSS)
Cada uno tiene su manera de programar y formatear el código CSS. En este vídeo quieren proponer que definamos módulos u objetos como contenedores, atendiendo no a su presentación, si no a su forma. Nicole define estos objetos como Legos, al identificarlo con las piezas de un puzzle. Os enseñarán a usar CSS orientado a … Lee más!
Forzar la barra de desplazamiento vertical con CSS
Alguna vez puede que deseemos mostrar la barra vertical de un bloque (texto, imágenes) de forma forzada. Ocultar la barra de navegación puede ser útil en el caso de tener contenido que no rebase el contenedor, pero si la siguiente página del sitio web es larga y requiere una barra de navegación o si usas … Lee más!
Sintaxis de @font-face
En esta entrada explicaré los mejores métodos para introducir @font-face en nuestro documento. @font-face { font-family: ‘Graublau Web’; src: url(GraublauWeb.eot); src: local(‘Graublau Web Regular’), local(‘Graublau Web’), url(GraublauWeb.otf) format(‘opentype’); } El código de arriba podría ser la mejor opción para aplicar @font-face, pero en IE no nos sirve y necesitamos tener una fuente .EOT, mientras que … Lee más!
Estilizar una lista con 1 píxel
Al igual que podemos estilizar una lista de forma compleja, también se puede hacer de una forma más simple, con sólo una imagen de 1 píxel (Ver imagen). Esta imagen puede dar mucho de sí, ya que con repeat-x podemos crear una línea horizontal y con repeat-y una línea vertical. Con un poco de imaginación … Lee más!
Selector de productos estilo Apple con CSS & JQuery
Si deseamos crear un catálogo en nuestro sitio, podemos hacerlo con este selector de productos realizado con CSS y JQuery que os voy a mostrar a continuación. El selector está inspirado en el que Apple utiliza para sus productos. Lo primero que debemos hacer es descargar este set de efectos JQuery UI. Por supuesto tenemos … Lee más!
CSS Inline-block Cross browser
Podemos aplicar la propiedad inline-block compatible con todos los navegadores (crossbrowser), si aplicamos este código a nuestra lista de items. Esto es gracias a la propiedad display:-moz-inline-stack (sólo Firefox) unida a la compatible por los demás navegadores (display: inline-block) y los comentarios condicionales. Por ejemplo: li { width: 200px; min-height: 250px; border: 1px solid #000; … Lee más!
Superponer contenido con CSS
Cuando queremos superponer un contenido, puede mostrarse el contenido nuevo encima del contenido original, reteniendo información que no deseamos mostrar y quedando un efecto un poco feo. En esta entrada aprenderemos a superponer contenido con CSS, cambiando el contenedor por otro, por lo que el contenido original no se mostrará. Esto puede hacerse con Javascript, … Lee más!
Crear un ribbon con CSS
Un ribbon (como véis en la imagen que ilustra esta entrada) es una cinta o tira que solemos poner en la esquina superior derecha de la pantalla, principalmente para mostrar algún evento del día anterior o un dato importante. El abuso de esto puede molestar a los usuarios, por lo que recomiendo usarlo solo 1 día … Lee más!
Menú vertical con sólo 2 KB de CSS
Tutorialfeed nos envía un menú vertical creado con 2 KB de código CSS, parecido al menú vertical simple que os mostré, aunque un poco más sencillo. Todos los valores de este menú pueden cambiarse. Con un poco de imaginación podremos crear resultados muy buenos.
