Cajas
CategoríaDistintos tipos de cajas que se pueden realizar con CSS.
Selector de ventanas de Opera Mobile con CSS y Jquery
Con JQuery podemos crear cosas realmente sorprendentes y divertidas, como menús, carruseles o pestañas . Es muy enorgullecedor recrear algo que ya existe y con lo que estás disfrutando, pero realizarlo con otro lenguaje. Con JQuery podemos crear el selector de ventanas de Opera Mobile, así, varias ventanas que están superpuestas una debajo de otra, … Lee más!
Carrousel realizado con Basekit (CSS y HTML)
Desde Basekit he creado un artículo sobre como crear un carrousel de imágenes utilizando la herramienta Basekit, os cito un trozo del artículo y os enlazo hacia él: Hoy en nuestro Blog , tenemos la suerte de contar con uno de los mayores expertos en CSS para compartir sus conocimientos con nosotros. Se trata de … Lee más!
Efecto gaussiano con CSS3
Desafortunadamente CSS3 no dispone de ninguna característica para poder crear efectos gaussianos, pero podemos emularlo de forma sencilla si definimos un color transparente a la propiedad text-shadow. Por ejemplo, con esta estructura: <p>Lorem ipsum dolor sit amet…</p> Añadiendo este código CSS: { text-shadow: 0 0 7px #000; color: transparent; } Como dije anteriormente, … Lee más!
Interesantes perspectivas de las sombras con CSS
La propiedad box-shadow, una de las nuevas opciones de CSS3, se ha convertido en la opción ideal para crear sombras en las cajas. Aplicando sombras a la pseudo-clases ::before y ::after, crearemos útiles perspectivas con la sombra. Allá vamos: Código HTML <div class=”box”> <img src=”cssblog.png” alt=”cssblog” /> </div> Código CSS .box:after { content: ”; position: … Lee más!
Burbujas de texto con CSS
Las burbujas de texto son un efecto popular pero la mayoría de ellas se crean con HTML o Javascript. Este tutorial contiene varios ejemplos de efectos de burbujas de texto creados con CSS 2.1 y personalizados con CSS3. Como dije anteriormente, no contiene imágenes, Javascript y puede aplicarse a tu HTML semántico. Por ahora soporta … Lee más!
CSS: Background-size
Esta es una propiedad CSS3 que aún no está finalizada, puedes seguir su progreso por la W3C. La propiedad background-size te permite ajustar el fondo, estirarlo hasta donde deseemos, por lo que se puede llamar también background stretch. Podemos usarla, aunque únicamente determinadas versiones de navegadores son soportadas hasta ahora. Sería: -moz-background-size (Firefox 3.6) -o-background-size … Lee más!
Ventana de información en hover con CSS
Sohtanaka recientemente ha descubierto un truco para realizar un sencillo efecto muy útil que hará que una determinada caja de contenido muestre más información al pasar el ratón por encima de ella. Es sencillo de construir, y totalmente gratis. A continuación os muestro el proceso, junto con un ejemplo y su descarga. Recordad que si … Lee más!
Bonita caja de búsqueda con CSS3
Son miles las maravillas que podemos hacer con CSS3. Smashing Magazine ha estado investigando y ha creado una bonita caja de búsqueda realizada con CSS3, aplicando degradados con CSS Gradient, creando círculos redondeados con border-radius y aplicando sombra inferior con box-shadow inset. Ahora vamos a comprobar como se crea cada elemento que forma parte de … Lee más!
Crear una vista adaptable estilo Youtube con CSS y JQuery
Desde que Youtube implementó la novedad de “change view” (cambiar vista), permite a los usuarios cambiar entre el modo de vista normal y panorámica y así ampliar/reducir el área del vídeo. A pesar de esta novedad, la accesibilidad no se pierde, lo que es un gran punto a favor. En esta entrada aprenderemos a crear … Lee más!
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. dtsv.dtse_post_3742_permalink = ‘http://www.cssblog.es/tooltip-oculto-css/’; dtsv.dtse_post_3742_title = ‘Tooltip oculto con … Lee más!
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!
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!
