Efecto POP en cajas con CSS
Si deseas lograr un efecto POP en las cajas de texto, en este artículo te enseñaré cómo debes hacerlo. Viendo a Chris Coyier quise compartir este artículo, en el que aprenderás a crear este llamativo efecto con las cajas de texto realizado integramente con CSS, como el de Pop Agency. Ejemplo en Codepen Las cajas … Lee más!
Limpiar floats con overflow
Uno de los problemas más comunes cuando usamos floats es que el contenedor wrapper que envuelve a los demás elementos no se expande a la altura de los elementos hijos. La solución típica a esto es añadir un elemento con clear float después de los elementos flotantes o un clearfix al wrapper. Otra solución, vía … Lee más!
Mostrar imagen al hacer click en botón con CSS y JS
Hace unos días tuve que ayudar a una compañera de facultad para que pudiera realizar un trabajo de fin de carrera. Se trataba de mostrar una imagen que en principio se encontraba oculta, al hacer click en un botón. Algo bastante simple pero que muy poca gente sabe hacer de manera correcta. A continuación, te mostraré … Lee más!
Falso subrayado con CSS
Seguro que muchos de vosotros habéis subrayado alguna vez una frase o palabra para darle importancia. Bien, con CSS se puede hacer, una es mediante text-decoration: underline;”, la otra es creando un borde inferior (border-bottom), esta última sería un subrayado falso. ¿Cómo sería el ejemplo? Muy sencillo. Un subrayado real, sería de esta forma: Código HTML … Lee más!
CSS Transparencia cross-browser
La transparencia (CSS Transparency) es una de las propiedades más polémicas y que requieren un montón de propiedades y valores para asegurar la compatibilidad en todos los navegadores (cross-browser). Aunque, por lo menos cada línea para cada navegador no se interfieren las unas con las otras, si no que si usamos una propiedad indicada para … Lee más!
Crear diseño responsive en 3 pasos
Actualmente se habla mucho de los diseños responsive, de hecho hace poco publiqué una lista de frameworks responsive y de plantillas responsive. Aunque, los más novatos pueden tener dudas acerca qué es el diseño responsive, y a ellos va dirigido este artículo, en el que aprenderás a diseñar de manera responsive en 3 simples pasos, … Lee más!
9 bonitos efectos con box shadow
Hace tiempo hice un artículo en el que explicaba qué era box shadow. Ahora, he pensado que sería ideal hacer uno para gente más avanzada, con el que aprenderán a realizar efectos con box shadow, para que sus diseños queden novedosos y sofisticados, de forma simple y sencilla. Todos los efectos son completamente funcionales … Lee más!
10 frameworks responsive gratis
En el artículo anterior vimos 10 plantillas responsive gratis que os ayudarán a que tu diseño se adapte a los distintos tamaños de pantalla. A continuación mostraré una útil recopilación de responsive CSS Frameworks que te harán la vida más fácil y sencilla cuando estés diseñando sitios web. Estos frameworks vienen con layouts, grids y media … Lee más!
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!
