Tag Archives: css3

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

Que hay de nuevo en firefox 5? la pregunta que todos se hacen

Que hay de nuevo en firefox 5? Probablemente es lo que se hayan preguntado muchos usuarios al momento de actualizar el navegador y no ver ningún tipo de actualización, pero ellas están ahí, ocultas entre la maleza. En este post vamos a averiguar que hay de nuevo en firefox 5!

Al actualizar nuestro “viejo” firefox 4 a la última versión firefox 5 podemos preguntarnos: y… ¿que hay de nuevo en firefox 5? Es una pregunta muy corriente, la interfaz es la misma, los widgets son los mismos, la navegación es la misma… entonces, que cambia?

Empecemos a desglosar los anuncios oficiales de mozilla para convertirlo en algo comprensible por el ser humano de a pie.

  1. Entrada al sistema de desarrollo rápido
  2. Tanto chrome como mozilla anunciaron hace un tiempo que empezarían un nuevo tipo de desarrollo rápido sacando actualizaciones de versiones cada 15 días o 1 mes. Firefox 5 es la primera etapa de este nuevo sistema, a partir de ahora será corriente ver actualizaciones cada poco tiempo.

  3. Soporte para animaciones CSS
  4. Lo más destacado por mozilla es su nuevo soporte para animaciones CSS3. Las animaciones en CSS3 son una nueva característica que aún no había sido implementada al 100% por todos los navegadores.

    Podemos ver este ejemplo para darnos una idea a que se debe (solo se ve bien con firefox 5 obviamente).

    De estas hablaremos más adelante cuando tenga el tiempo suficiente para hacer pruebas y documentarme ;)

  5. Nuevo sistemas de plugins
  6. No se han pronunciado mucho al respecto sobre esta actualización. Pero pude leer en el blog de mozilla que habían habilitado un nuevo sistema de desarrollo de plugins que permitía CSS, HTML y Javascirpt. Enseguida me vienen a la cabeza los plugins de google chrome.

  7. Actualizaciones de bugs y usabilidad
  8. Hay muchísimos … voy a hacer una lista resumida a continuación del post de aquellos que nos deberían interesar como desarrolladores webs.


Así nos han encontrado!

  • que hay de nuevo en firefox 5
  • nuevo firefox 5
  • lo nuevo de firefox 5
  • lo nuevo en firefox 5
  • que tiene de nuevo el firefox 5
  • que tiene de nuevo firefox 5
  • nuevo en firefox 5

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

Como armar una página web

Cuando uno se inicia en la programación web lo primero que se pregunta es: Como armar una página web? que necesito saber? donde puedo subir mi web? etc…
Entonces, empecemos por el principio.

Conocimientos para armar una página web

Antes de plantearnos todas estas dudas requeriremos de los conocimientos.

Así que lo primero y principal es aprender HTML y CSS. Ambos son bastante fáciles de aprender y no requieren de conocimientos previos, como recomendación personal también agregaría XML y XHTML.

Más adelante os daréis cuenta de la importancia de los estándares.
Sabiendo HTML y CSS seremos capaces de armar una página web estática, maquetar, crear plantillas, pasar diseños de photoshop a html.

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.