Diseño de páginas web en Bilbao y Bizkaia

Crear sombras y degradados fácilmente con CSS 3

  • 0
Sombras y degradados CSS 3

Crear sombras y degradados fácilmente con CSS 3

Categoría : Diseño Web

Hasta hace relativamente poco tiempo, cuando un diseñador web quería crear una sombra o un degradado tenía que recurrir por necesidad a programas de diseño gráfico y retoque fotográfico como Photoshop. No había forma de conseguir tales efectos mediante código, por lo que era obligatorio construir imágenes (y es bien sabido que cuantas más imágenes tiene una web, más tarda en cargar). Esto cambió, por suerte, con la llegada de CSS 3.

Crear sombras y degradados con CSS 3 es muy sencillo, y cualquier desarrollador web conoce la técnica. Sin embargo, no todos los bloggers entienden de HTML y hojas de estilo en cascada, por lo que quería recomendaros aquí dos sitios web que nos ofrecen herramientas para obtener estos efectos de forma fácil, rápida e intuitiva.

1- Ultimate CSS Gradient Generator de ColorZilla

Gradient Generator ColorZilla

El primero de ellos tal vez os suene, porque está emparentado con una extensión de Google Chrome, ColorZilla, de la que os hablé en su día. Con esta herramienta (Ultimate CSS Gradient Generator) podemos crear degradados fácilmente. La paleta de colores es casi infinita. Tenemos unos gradientes predefinidos, pero si buscamos algo más específico, podemos sustituirlos por el color que queramos. Los colores en sí los podemos buscar por código hexadecimal o RGB. También nos permite configurar el tamaño y cambiar la orientación del degradado a vertical, horizontal, diagonal o radial. A los gradientes que generemos les podemos dar un nombre y guardarlos, y lo que es aún más interesante (y de lo se trata, en el fondo), podemos copiar el código CSS resultante de la elección del degradado y pegarlo luego en nuestra hoja de estilos. En este punto conviene aclarar, para quien no esté familiarizado con CSS 3, que el programa nos ofrece el código adaptado para los diferentes navegadores, porque cada uno de ellos requiere un código específico. Me explico, para que funcione en Firefox necesitaremos que ponga -moz-linear-gradient, y para que funcione en Chrome, -webkit-linear-gradient.

2-CSS3gen

CSS3gen

La siguiente aplicación web de la que quería hablaros también tiene una herramienta para crear degradados, entre otras muchas utilidades. Se trata de CSS3gen, una completa guía para generar sombreados, gradientes, botones y bordes redondeados. Yo recomiendo especialmente usar Box Shadow, para cajas, y Text Shadow, para textos. La mecánica es la misma: tenemos que introducir los valores para el ángulo, la distancia, el difuminado, el color RGB y la opacidad de la sombra. Con esos datos generará el código CSS con el sombreado, y lo adaptará, igual que vimos en el anterior caso, para Firefox y Chrome. Por supuesto, si entendemos un poco de CSS, al código que nos proporcione le podremos definir la fuente tipográfica.

La propiedad Border Radius se utiliza para redondear las esquinas, un efecto que solemos ver en muchas webs y que tal vez nos interese. Su funcionamiento es, si cabe, más simple que en los anteriores casos: lo único que tenemos que hacer es darle un valor a cada una de las esquinas, que por defecto aparecen con 5 px. No hace falta que diga que cada una puede tener un número diferente.

En el caso del generador de gradientes, me parece menos interesante y completo que ColorZilla, y en cuanto a los botones, decir tan sólo que están en claro desuso, aunque la herramienta en cuestión está muy trabajada, y te permite configurar numerosos parámetros como el padding, el radius, el background, el drop shadow y el text shadow, así como añadirle un enlace con ahref.

El abanico de opciones para un diseñador web es casi ilimitado con CSS 3, y además de los aquí expuestos, hay otros muchos efectos dinámicos y animaciones que podemos lograr jugando con las propiedades transform y transition en combinación con hover, tales como giros (rotate) y cambios de tamaño (scale). Ahora bien, recordad que si abusáis de estas transiciones CSS probablemente lo que conseguiréis es una página sobrecargada que maree y sature al usuario. En otro post os hablaré más detenidamente de ello.


  • 0
Think with Google

Think with Google: cómo optimizar tu web para dispositivos móviles

Aquí os hemos hablado en muchas ocasiones de la importancia de tener la web optimizada para dispositivos móviles, lo que técnicamente se conoce como diseño responsive. Desde hace tiempo Google pone a disposición de cualquier webmaster su Prueba de optimización para móviles, que te indica si tu página está correctamente adaptada, y de paso te muestra una captura de pantalla a escala.

Pues bien, ahora también podemos, a imitación de PageSpeed Insights (de hecho, emplea su tecnología), probar el grado de optimización de nuestra web a multidispositivos a través de la herramienta Test my Site Think with Google. Sólo tenemos que introducir la URL de la web de marras y nos ofrecerá en una pantalla dinámica los resultados para Optimización para dispositivos móviles, Velocidad en dispositivos móviles y Velocidad en computadoras de escritorio, en una escala de 1 a 100. Si hay aspectos a mejorar (cosa harto probable), podemos solicitar un informe gratuito que nos enviarán a la dirección de correo electrónico que les facilitemos en un plazo aproximado de 24 horas.

En Think with Google nos recuerdan que 9 de cada 10 personas utilizan el móvil para reservar vuelos o realizar compras y que casi la mitad de los usuarios abandona un sitio web si tarda más de 3 segundos en cargar. De ahí la necesidad de tener tu página optimizada para multidispositivos y además que sea rápida.

Think with Google


  • 0
Ventanas Bilbao

Ventanas Bilbao

Ventanas de Aluminio y PVC

Empresa situada en Bilbao (Bizkaia) y dedicada a el diseño, fabricación y colocación de ventanas en aluminio y PVC. Servicios a particulares y empresas. Además se realizan reformas integrales con coordinación de gremios.

Web con explicación de los servicios, imágenes de trabajos realizados, datos de contacto y formulario para elaboración de presupuestos. Optimizada para posicionamiento web.

http://www.ventanas-bilbao.com


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER