En muchas ocasiones, cuando insertamos o hacemos un ‘embed’ de un vídeo de Youtube, nos pone un tamaño fijo, algo que como ya sabréis no es muy recomendable, debido a que si este contenido se visualiza desde otros dispositivos, es bastante posible que no se vea correctamente. Por ejemplo, el problema más común es que […]

Las reglas horizontales por defecto (<hr>) en HTML son bastante feas, con el siguiente código CSS le podremos dar un aspecto de difuminado bastante elegante. Nos quedaría una regla horizontal como ésta: Vamos con el código CSS HTML Y así de fácil y sencillo obtenemos una elegante regla horizontal (<hr>) con unas pocas líneas de […]

Hoy vamos a compartir nueve estupendos estilos y efectos para Tooltips. Los Tooltips se usan para aportar alguna información extra y se pueden encontrar en la mayoría de las páginas web. Estos pequeños ayudantes nos ofrecen una gran oportunidad para añadir algún efecto único y sutil al diseño de nuestra web. Por lo que hoy […]

Las Media Queries son realmente últiles para personalizar nuestros estilos para los distintos dispositivos que acceden a nuestra web y visualizan nuestro sitio con distintas resoluciones, a esto hoy en día se le conoce como diseño responsive. Para resolver este problema, os vamos a dejar una lista con las Media Queries más comunes y utilizadas […]

Para utilizar el efecto de desenfocado (también conocido como Blur) en CSS3 tan sólo necesitaremos unas pocas de líneas. Este efecto se puede aplicar tanto a imágenes, como a divs y demás elementos.   Primero tenemos que crear el archivo blur.svg con el siguiente contenido: Y ahora en nuestro archivo CSS creamos la clase blur […]

Muchas veces no sabemos qué color elegir para nuestros diseños, buscamos un color nuevo, fresco o especial. Pues para cuando nos ocurra ésto y no sepamos a donde acudir, aquí os dejo cuatro páginas web donde encontraremos cientos de colores listos para copiar y pegar los códigos HEX o RGBs. Fat UI Colors Colours por […]

Payment Webfont es una práctica colección de fuentes web (Webfonts) en SVG con los logotipos de las empresas más conocidas en la gestión de pagos electrónicos. Esta colección incluye los iconos de Mastercard, Maestro, Visa, Visa Electron, American Express, Postepay, Cartasì, Diners Club, Discover, Union Pay, Electronic Cash, TrustE, Amazon, JCB Google Wallet, Stripe, Square, […]

Simptip es un sencillo tooltip en CSS creado con Sass. Puedes crear un tooltip en diferentes direcciones (arriba, izquierda, abajo y a la derecha). También puedes tener un Tooltip con diferentes colores como «success», «info», «warning» y «danger». Y finalmente otras características y efectos como «soft edge», «hafl arrow», «movable effect», «fade effect», «multiline tooltip». […]

iHover es una impresionante colección con más de 30 efectos «Hover» (al pasar el ratón por encima) desarrollado únicamente con CSS3, sin ninguna dependencia y que funciona bastante bien con Bootstrap 3.   Se ha desarrollado utilizando Scss CSS (el archivo viene incluido), el cual es fácil de modificar con variables. Además el código es […]

En este artículo encontrarás 15 tablas de precios (pricing tables) en HTML y CSS 3 listas para su rápida implementación.   Lo bueno de estas tablas de precios es que incluyen tutoriales (en inglés) que podrás utilizar para crear tus propias tablas de precios.   A continuación os dejo las 15 tablas de precios:   […]

Para aquellos que no se conforman sólo con los iconos que trae el framework Bootstrap 3, les presento Font Awesome. Font Awesome es un paquete que contiene 369 iconos de alta calidad en CSS listos para usar en Bootstrap 3. Lo único que hay que hacer es cargar su código CSS de su CDN o […]

Esta semana os traigo un recopilatorio de artículos bastante prácticos, sin más rodeos, vamos a verlos: Colección de estilos para separadores Ver ejemplo Efectos de etiquetas sobre imágenes Ver ejemplo Efectos creativos para enlaces Ver ejemplo Barra de progreso al estilo Youtube Ver ejemplo Pestañas animadas con CSS3 Ver ejemplo