Como hacer un fondo degradado en un div con CSS

Para hacer buenos diseños en nuestras páginas web, nos va a ser muy práctico poder utilizar fondos con un degradado de color que vaya progressivamente de un tono a otro. Para ello antes no teníamos más remedio que poner una imagen de fondo en el div que previamente havíamos hecho en Photoshop pero ahora, gracias a las nuevas propiedades del CSS3 lo podemos hacer muy fácilemnte con código para integrar en nuestro HTML.

La propiedad se llama Gradient Background (fondo degradado) y se puede aplicar en cualquier div o tabla (aunque no lo recomiendo en tablas). Se trata de una transición de color suave entre dos o más colores. La ventaja es que no solo ahorramos tiempo, sino que también tiempo de descarga y ancho de banda, con lo que utilizando fondos degradados en un div con CSS hacemos que nuestras páginas web vayan más rápidas.

Continuar leyendo

Compartir

¿Qué es LESS? Como utilizar less para mejorar nuestro CSS3 (Less.js)

(Primera parte)

LESS es una pequeña y gran herramienta que extiende las posibilidades del CSS añadiendo variables, mezclas, operaciones y reglas anidadas. Esto significa que con LESS podemos escribir código ligero y óptimo de forma muy rápida. LESS (less.js) también nos va a ser muy útil para simplificar algunas del las propiedades avanzadas del CSS3, y sobretodo para combinar varias propiedades en una sola orden.

LESS es un compilador o un previo que procesa las instrucciones previamente para facilitar luego las cosas y hacer que nuestro CSS sea más fácil de mantener, más límpio, más personalizable y más extensible. A primera vista puede parecer que nos complica las cosas, pero en realidad nos va a facilitar la vida si nos gusta el CSS y estamos acostumbrados a trabajar con él.

Continuar leyendo

Compartir

2 maneras de crear un fondo transparente para un div

Muchas veces es interesante jugar con fondos semi-transparentes en nuestros elementos de la página web para hacerla más atractiva y funcional.

Para ello os propongo dos maneras muy sencillas:

Continuar leyendo

Compartir

Como hacer una sombra con CSS3 (Box-shadow)

Una de las propiedades interesantes que nos ofrece CSS3 es la capacidad de crear y configurar el efecto de sombra con código CSS. Nos podemos olvidar de crear imágenes con Photoshop y ponerlas como background.

Entre otras cosas, podremos elegir el color, tamaño, desenfoque y desplazamiento de la sombra (drop shadow). En este artí­culo, veremos como implementar este efecto para que sea compatible con todos los navegadores (Mozilla Firefox, Safari, Chrome, Internet Explorer, etc…).

Vamos directo a la materia:

Continuar leyendo

Compartir

Como resetear el CSS de los navegadores para que no alteren tus estilos

Para que nuestro código CSS sea lí­mpio y afecte de igual manera en todos los navegadores, lo primero que tenemos que hacer es resetear el CSS propio de cada navegador.

Esto hará que nos ahorremos un montón de problemas en la maquetación de nuestra web.

Para ello solo tienes que incluir este código al principio de tu hoja de estilos CSS principal:

Continuar leyendo

Compartir

Como hacer cantos redondeados (redondos) con HTML5 y CSS3 (esquinas redondeadas)

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /usr/home/dissenyaweb.com/web/blog/diseno_web/wp-content/plugins/highlight-source-pro/highlight_source_pro.php on line 128
Compartir