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

Botones, iconos y links creativos con CSS

  • 0
Botones, iconos y links creativos con CSS

Botones, iconos y links creativos con CSS

Categoría : Diseño Web

En un post reciente os recomendé dos aplicaciones web para crear sombras y degradados fácilmente mediante CSS 3. Hoy quería seguir profundizando en el tema de los estilos y animaciones, y para ello lo primero que haré será sugeriros otro sitio donde podéis conseguir los mismos efectos anteriormente descritos. Se trata de CSSMatic, un proyecto libre creado por y para desarrolladores, y que lleva detrás la firma de Freepik y Thumbr.

CSSMatic es muy parecido a CSS3gen, pero al editor de sombras, gradientes y bordes redondeados añade la textura suciedad, un efecto muy común en Photoshop al que, eso sí, no es fácil encontrarle un uso práctico. La ventaja que tiene CSSMatic frente al resto de aplicaciones web es que permite más funcionalidades, como subir o bajar la opacidad o elegir el estilo del borde. En el caso del sombreado incluso podemos reproducirlo dentro de la caja.

CSSMatic

Sin embargo, con CSS se pueden lograr efectos mucho más complejos y sofisticados que éstos. Por ejemplo, si queremos un texto animado que aparezca de izquierda a derecha, que parpadee o tiemble o se contraiga o se expanda o se altere de alguna manera, podemos recurrir a esta herramienta que nos permite gran variedad de movimientos y animaciones. Tan sólo tenemos que descargar el documento CSS y luego copiar en nuestra hoja de estilos el código que precisemos. Tan fácil como eso.

Animate CSS

Y aún hay más. Seguro que muchas veces habéis deseado tener estilos llamativos para vuestros enlaces que inviten con tan sólo verlos a un call to action. Si no sois expertos en CSS, no os preocupéis, porque por suerte hay desarrolladores web que comparten de forma generosa y altruista sus creaciones. En Codrops son especialistas en recursos gráficos para bloggers exigentes, y entre otras muchas cosas, podéis encontrar:

  • Estilos para botones con efectos hover y click, ideales, por ejemplo, para formularios de envío o carrito de compra en tienda online.
  • Efectos hover para iconos circulares, muy útiles y vistosos y apropiados para simbolizar las diferentes categorías de nuestra web. Algunos incluso podrían serviros como símbolos para vuestros logos.
  • Links creativos, perfectos para un menú elegante.

Para descargar el archivo CSS de cualquiera de estos estilos tenemos que clicar arriba, donde pone Back to the codrops article, y a continuación Descagar fuente. La Demo es lo que estabais viendo en un principio. La web te indica que no todos los navegadores soportan las transiciones y pseudo elementos con que están diseñados estos estilos, algo que deberemos tener en cuenta.

Botones Creativos CSS


  • 0
Colorize, aplicación para obtener colores reales

Obtener colores “reales” con Colorize

Seguro que en más de una ocasión nos hemos preguntado cuál es el verdadero color del cielo o del océano, no un color aproximado, sino el auténtico (como si dijéramos su PANTONE). El desarrollador web Alex Beals se ha propuesto resolvernos esta duda mediante una sencilla aplicación llamada Colorize. Lo único que tenemos que hacer es teclear una palabra o frase en el recuadro de búsqueda de la parte superior y el programa nos devolverá un color de fondo con su correspondiente código hexadecimal. Si hemos optado por una frase, tardará unos segundos más en mostrarnos el resultado. Aunque el programa está en inglés, admite cualquier idioma.

Colorize, azul océano

El funcionamiento de Colorize es, en el fondo, muy simple. Lo que hace su algoritmo es cotejar las 25 primeras imágenes de la palabra o frase que hayamos introducido y extraer el color resultante. Por supuesto, este color nunca será el “real” (¿existe de verdad un color real?), pero es una buena aproximación.

Así pues, no vayamos a pensar que esto es magia, porque la aplicación es simpática pero está muy lejos de ser infalible, como demuestra el resultado de la búsqueda “abrelink”. Con eso y con todo, es una herramienta que puede sernos útil a la hora de elegir colores para nuestros proyectos de diseño gráfico.

Colorize, Abrelink


  • 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.


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER