UI-playground-CSS3

200 íconos basados en CSS3

CSS3 Icons es un proyecto Web que permite—y sobre todo comparte—la sencilla forma de dibujar íconos mediante la técnica en CSS. Los desarrolladores se han esforzado por mantener estas declaraciones en CSS lo más limpia y clara posible. De esta forma sólo han utilizado 2 etiquetas span para crear cada ícono.

El uso de esta técnica tiene 3 grandes beneficios.

  1. Minimiza las solicitudes al servidor
  2. Permite que el diseño Web se lleve a cabo sin el uso de imágenes; del tipo JPG, PNG o GIF
  3. Son menos archivos, y menos KB que el servidor tiene que entregar al cliente.

Iconos basados en CSS3

El proyecto, que incluye 200 íconos está presentado de manera muy inteligente. Es necesario hacer click sobre el ícono que nos interesa y rápidamente es posible acceder a la siguiente información.

  • miniatura de la imagen
  • compatibilidad y número de versión menor en la cual el CSS se muestra adecuadamente
  • declaraciones de CSS
  • marcado estructurtal en HTML

CSS3 Icons
CSS3 Icons

Los íconos basados en CSS3 evitan llamadas al servidor ya que se generan del lado del cliente

Es de rescatar y resalto la forma en que toda la información es presentada.

Se demuestra y hasta entusiasma el hecho de llevar a cabo este tipos de diseños.

Sitio Web | CSS3 Icons

—Gracias Sulaman por compartirme la novedad sobre este sitio Web

Como aplicar estilos CSS inmediatamente

Como aplicar estilos CSS inmediatamente

Cualquiera que lleve a cabo modificaciones en la visualización del sitio Web—mediante CSS—habrá comprobado lo tedioso que resulta estar actualizando (aka refresh) la ventana del navegador cada vez que se modifica la hoja de estilos.

CSS Refresh es un pequeño script, no intrusivo, que se encarga de detectar modificaciones en el archivo CSS y actualizar en forma automática la página; muy útil, cuando se están llevando modificaciones “en línea”, en tiempo de diseño.

Como aplicar estilos CSS inmediatamente

Sólo es necesario instalar el archivo Javascript en la página Web o, de otra manera, utilizar el bookmarklet que el autor provee.

La nota importante, antes de la inclusión del script en la página, es que sólo los archivos CSS declarados antes de la inclusión del script serán tenidos en cuenta para el refresh.

Además, como CSS Refresh trabaja mediante XMLHttpRequest para determinar cambios en la fecha del archivo CSS; sólo trabajará con archivos alojados en el servidor; no en local.

Sitio Web | CSS Refresh

Impress - un script para presentaciones

Impress – un script para presentaciones

Impress es un script escrito por bartaz quien se ha insiprado en las posibilidades de prezi.com; de esta manera, Impress se presenta como un framework que simplemente explota las posibilidades de CSS3 en cuanto a transformación y transición.

Impress - un script para presentaciones

Para saber más, sólo hay que mirar el código fuente

Hay que mirar el código fuente

Este script está basado en las posibilidades de rotación, zoom, etc. que provee CSS3; por eso, sólo es completamente soportado por Google Chrome y Safari. Firefox 10 e Internet Explorer 10 debieran soportarlo también. De otra manera, con cualquier otro navegador o versión; el contenido se visualiza de forma simple.

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>It's a <strong>presentation tool</strong> <br/>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-600" data-rotate="300" data-scale="1">
<p>and <b>tiny</b> ideas</p>
</div>

Sitio Web | Impress

Bordes redondeados con CSS

Bordes redondeados con CSS

Border radius es un generador de código CSS; se trata de una sencilla aplicación que de manera práctica; sólo requiere informar el número por esquina en pixels para aplicar el borde redondeado correspondiente.

Bordes redondeados con CSS

En mi ejemplo para un div 90, 5, 90, 5 la aplicación ha generado (ver imagen) la siguiente declaración en CSS:

-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 90px;
-webkit-border-bottom-right-radius: 90px;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 90px;
-moz-border-radius-bottomright: 90px;
border-radius: 5px;
border-top-left-radius: 90px;
border-bottom-right-radius: 90px;

Sitio Web | Border radius

Gradientes en CSS a partir de una imagen

Gradientes en CSS a partir de una imagen

Como generar fácilmente un degradado—en CSS3—a partir de una imagen

Codear un gradiente complejo en CSS3 no es sencillo, y menos aún si toma como punto de partida e inspiración una imagen.

No obstante, con una herramienta adecuada como Gradient Scanner la cosa se pone bien sencilla.

Gradientes en CSS a partir de una imagen

Gradient Scanner es un aplicación Web íntegramente escrita en Javascript que nos permite subir una imagen y seleccionar luego un área de reproducción para que mediante técnicas de CSS pueda reproducirse el mismo resultado que el área angosta seleccionada.

[youtube XafYlc5Kps0 620 380]

El CSS generado es compatible con todos los navegadores modernos.

Sitio Web | Gradient Scanner