Interesante aplicación de CSS3 para, mediante el uso de sucesivas sombras de texto, obtener un texto en 3D.

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

3D Text » »

Zardi es un fichero CSS que nos permite crear botones con una gran variedad de formas y colores.

Zardi » »

CSS3 ha supuesto la aparición de nuevas propiedades y una multitud de nuevas posibilidades a la hora de desarrollar un sitio web. En este post han recopilado unos cuantos generadores CSS3 que nos pueden ayudar a trabajar o implementar ciertas propiedades de CSS3.

15 Best CSS3 Generators For Lazy Designers » »

Interesante código en javascript que testea el soporte de la propiedad CSS3 que se le especifique. Cuando se pasa la propiedad se debe omitir el guión. Por lo que si deseamos testear "border-radius", deberemos pasar "borderRadius" o "BorderRadius".

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }
      return false;
   };
})();

// EJEMPLO DE USO
if( supports('borderRadius')) {
  alert('Tu navegador soporta la propiedad border-radius');
}

Visto en » »

Con las nuevas posibilidades de CSS3 se pueden crear botones con un diseño atractivo con tan sólo un poco de código. En el siguiente enlace podemos encontrar una recopilación de recursos relacionados con la realización de botones en CSS3: ejemplos, tutoriales, generadores, etc.

20 Useful CSS3 Button Resources and Tutorials » »

Colección de botones realizados con CSS3. Podemos acceder a la descarga de los mismos en el siguiente enlace: http://github.com/ubuwaits/css3-buttons

CSS3 Buttons » »

Selectivizr es una pequeña utilidad Javascript que emula pseudo-clases y selectores de atributos de CSS3 para Internet Explorer. Funciona para las versiones 6,7 y 8 de Internet Explorer. Simplemente hay que incluir el siguiente código en las páginas web y selectivizr se encarga del resto.

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> 

Selectivizr requiere para funcionar una de las siguientes librerías: jQuery, Mootools, Dojo, Prototype, YUI, DOMAssitant o NWMatcher. En función de la librería el soporte de los selectores CSS variará. En el sitio web podemos acceder a una tabla con los selectores soportados por cada librería de Javascript.

Selectivizr » »

CSS3Menu es una aplicación gratuita muy interesante que permite generar menús de navegación atractivos, sin imágenes y sin javascript. El menú generado aprovecha las propiedades border-radius y animation de CSS3, por lo que funciona perfectamente con las últimas versiones de Firefox, Opera y Safari. El menú también funciona en los navegadores no compatibles con CSS3 como IE7 pero algunas características como las esquinas redondeadas o las sombras se pierden.

Para más información y acceder una demostración: CSS3Menu » »

Botones realizados con CSS3 a partir de un mínimo marcado HTML y aprovechando todas las posibilidades de CSS3. Se puede personalizar el tamaño, el color y la apariencia.

BonBon Buttons » »