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

Archivo de Categorías: Diseño Web

  • 0
Plantillas WordPress

Plantillas WordPress profesionales gratis

Para cualquier diseñador web, tener a mano una buena colección de plantillas es algo que facilita mucho las tareas. Si hablamos de WordPress, el CMS o gestor de contenidos por antonomasia, el abanico donde elegir es realmente amplio. La ventaja es que muchos de estos themes o templates son gratuitos, y además tienen un aspecto profesional, con poco que envidiar a los de ThemeForest o ElegantThemes, las dos webs de referencia. Algunos de ellos incluso traen incorporado el efecto parallax, que difumina la planitud del fondo creando una sensación dimensional que puede ser muy útil, por ejemplo, para hacer storytelling. En la mayoría de los casos son, asimismo, fáciles de personalizar (100% customizables), aunque también es común que algunas de sus prestaciones se vean limitadas, como los plugins o widgets. Por esta razón, y aunque todo lo gratuito suene muy tentador, en ocasiones conviene pagar por un theme Premium, ya que el gasto suele ser mínimo (una media de 60$), y según las necesidades de cada cual, quizás nos interese hacer un pequeño desembolso si luego vamos a poder elegir una plantilla más adaptada a la imagen que buscamos y que tenga una velocidad de carga optimizada, punto éste a tener muy en cuenta.

Colorlib Themes

Comoquiera que sea, si no estás dispuesto a rascarte el bolsillo, por suerte existe una gran variedad de plantillas con licencia gratuita de las que, bien usadas, puedes sacar un extraordinario rendimiento. Aquí te dejo tres enlaces con 160 themes para WordPress responsive y totalmente gratis, todos ellos nuevos, de 2016:

Como podéis comprobar, en los tres casos os deja la opción de ver la Demo de la plantilla, y además permite visualizarla en varios formatos de imagen, desktop, tablet y dispositivos móviles. Adicionalmente, muchos de estos templates te dejan cambiar el color y el número de columnas. Las descargas suelen ser desde el Theme Directory de WordPress.org. Algunos de estos themes, aunque admiten una descarga gratuita, también tienen una versión Pro que viene a costar lo que cuesta una plantilla Premium. Habréis observado que algunas se repiten, pero hay más que suficientes y con temáticas lo suficientemente heterogéneas (fotografía, restaurantes, construcción, moda, deportes, música, etc.) como para tener una buena colección para nuestros proyectos.

Athemes, plantillas WordPress


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