Category Archives: Diseño Web

Las 40 404 más divertidas y originales de la web

Hace tiempo que vengo viendo páginas 404 bastante divertidas y originales que le dan un toque más humano y cercano a la web.

En esta ocasión me topé con este post de inspiration feed

En el cual se encuentra una gran variedad de diseños 404 para nuestra inspiración.

Sin lugar a duda la mejor de todas es esta:


Así nos han encontrado!

  • botones web
  • botones psd
  • botones psd para web
  • botones negros web
  • webs originales 2011
  • botones para web

25 packs de elementos de interface UI para nuestra web

Recopilación de elementos UI para nuestra web en formato PSD. Ideal para aquellos que quieran iniciar su web con un toque de estilo novedoso y sofisticado.

Hace ya un buen tiempo que vi esta recopilación sin embargo hoy os la traigo después de un largo periodo de “vacaciones” forzadas.

Se trata de packs de elementos UI en PSD para crear nuestros botones, barras progresivas, sliders, selects y muchas otras cosas

No están en orden de preferencia, sino de como los abrí desde delicious :P
Espero disfruten.

Sleek Web UI Elements

Botones, tabs, checkbox, desplegables, on/off, buscadores… un poco de todo en negro y azul marino para nuestra web.

Elementos negros para navegación

UI Elements [psd]

Bastante simple pero bastante chulo, al menos a mi parecer.

Elementos de navegación


Así nos han encontrado!

  • psd interface
  • elementos web psd
  • botones web negros
  • checkbox psd
  • interface ui
  • web elements psd
  • elementos para web
  • ui interface

Crear un menu SOLO con CSS3 sin Javascript! [Dropdown Menu]

Estos días he estado revisando tutoriales de la web y dado que he tenido algunas peticiones con el tema de CSS3 pues he decidido crear una categoría de Diseño Web en la que hablaremos de diferentes aspectos o códigos para crear barras de buscadores, formularios o, como en este caso, un menu únicamente usando css3.

Como no soy dado al diseño web he decidido tomar los mejores tutoriales de la red y traerlos a skamasle, como muchos sabrán lo mejor en cuanto a programación suele estar en inglés y esta no es la excepción… así que mi labor en este caso se tratarña de intentar dar el mismo enfoque a los artículos originales.

Así que, manos a la obra!

Vista previa de nuestro trabajo

Esta es una vista previa de lo que nos quedará al final del tutorial:

Para mi gusto está bastante bien, la vista previa la hice con firefox 4.


Así nos han encontrado!

  • menus con css3
  • menus css 3
  • Menu con CSS3
  • menus con css 3
  • crear menu css3
  • menus css3
  • menu css3
  • crear menu con css 3
  • menu ccs3
  • crear un menu con css3
  • crear menu con css3
  • menu con css 3
  • crear menus con css 3
  • crear menus con css3
  • menus en ccs3
  • menus ccs3
  • crear menu javascript
  • menu en css 3
  • menu css 3
  • como hacer un menu con css3

Recursos y puntos a tener en cuenta en el diseño de logotipos

Estos días me ha estado dando mucho por hablar de css.
CSS es un lenguaje de diseño y como siempre ha sido mi punto débil estoy estudiando diferentes aspectos del diseño web.

Uno de ellos, quizá de los más importantes, es el diseño de logotipos.

El logotipo es la imagen que caracterizará a tu empresa, aquel producto visual que cuando lo vean pensarán “ahh si! ya se que empresa es”.

El color, las formas, todo ello suponen importantes recursos a la hora de diseñar nuestro logotipo y, por lo tanto, son factores muy importantes a tener en cuenta.

Siempre debemos pensar en que queremos enseñar y de que forma quererlo y sobre todo estar a gusto con el producto final.

Hacer Tooltips con css3 paso a paso

Las tooltips se utilizan cuando queremos dar una explicación más amplia de un hecho o queremos añadir un texto sin alterar el texto principal.

La mejor forma de hacerlo es utilizando una tooltip.

Porque tooltip y no el atributo title?

Como muchos sabréis en HTML disponemos del atributo title que nos provee con una pequeña tooltip explicativa.
Sin embargo, este atributo no nos permite darle un estilo propio y no podemos usar unos buenos efectos.

Un ejemplo de una tooltip son las que estamos utilizando en skamasle, como Tooltip de muestra de Skamasle.esta sin embargo, hay muchísimos estilos que se pueden crear dependiendo de nuestra web.


Así nos han encontrado!

  • tooltip css3
  • css3 tooltip
  • tooltip css 3
  • tooltips css3
  • tooltips css 3

Firefox se adapta a los estándares de la w3c para css3 (border-radius)

Por todos los maquetadores web que traten con css3 es muy conocido este código:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Para los que no lo conozcan es el código css3 para crear bordes redondeados a un elemento.
Siendo la primera linea para navegadores con el motor chrome y safari entre otros. webkit la segunda para mozilla y la última el estándar de la w3c que utiliza opera e con alguna particularidad… internet explorer

Hace un par de días me encontraba remodelando el theme de este mismo blog para hacerlo un poco más vistoso.
Estaba haciendo algunas remodelaciones a un div… y dado que suelo trabajar sobre firefox como prueba principal, modificaba en todo momento la primera línea del código sin embargo la vista no cambiaba.