|

Presentando CSS World Awards

ByLuis

css-world-awards-logo.gif En CSS Manía acabamos de anunciar el primer certamen que premiará a los mejores diseños en CSS.

Desde el primer día que lanzamos CSS Manía, teníamos en mente el galardón. Pensábamos organizarlo mediante votación popular pero sabiendo del lío que se podría montar qué mejor opción que contar con un prestigioso y relevante jurado como el que forman: Andy Budd, Cameron Moll, Molly E. Holzschlag, Roger Johansson y Sergio Villareal donde la calidad y el valor de los futuros premiados obtiene mayor reconocimiento.

¿Por qué CSS World Awards?

Para premiar el trabajo bien hecho de los profesionales que a diario construyen websites en CSS.

Para que la comunidad siga concienciando a las compañías con presencia en Internet que apuesten por los estándares web.

Reglas

  1. Las webs participantes son las que están en nuestro archivo entre los meses de mayo de 2005 a mayo de 2006.
  2. Las categorías de los premios corresponden a las 9 categorías principales + el premio gordo que será la web del año, por tanto 10 categorías. Queda excluída la categoría de nacionalidades de web developers ya que sólo premiaremos a los mejores profesionales sin diferenciar procedencia dentro de la categoría web design.
  3. El lunes 5 de junio, CSS Manía seleccionará y dará a conocer 15 nominados por categoría. Por tanto, 150 nominados en el que el jurado tendrá que elegir a los 3 premiados por categoría que serían un ganador y dos finalistas.
  4. Ninguna web de Blogs Media ni del jurado entrará en juego.
  5. El fallo del jurado se dará a conocer a principios de Julio.

Los premios los daremos a conocer en los próximos días ya que estamos barajando diferentes opciones. Además de que esperamos que con la presentación el abánico de opciones, aumente.

Toda la información en: CSS World Awards.

Vía / CSS Manía

Similar Posts

Recopilación de técnicas CSS

ByLuis

Interesante recopilación de técnicas CSS que se han usado desde siempre. Cada vez es más importante realizar diseños que cumplan estándares, y si queremos que a parte de cumplir estándares, también tenga un diseño atractivo, es necesario usar muchas de las técnicas que nos ofrece el recopilatorio.

Entre las técnica que nos enseña o recuerda encontramos:

  • CSS Sprites
  • Esquinas redondeadas
  • Reemplazar texto por imágenes
  • Tabuladores
  • Colocar texto alrededor de una imagen
  • Misma altura en capas
  • Transformar una lista en una barra de navegación
  • Cabeceras
  • Sombras
  • Transparencia

101 CSS Techniques Of All Time- Part 1

Vía / CSS Globe

$fx(): librería javascript para animaciones

ByLuis

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

|

Crea una guía de estilos

ByLuis

Un gran consejo que deberíamos llevar todos a cabo, es crearnos una guía con los estilos que tiene nuestra aplicación. No solo si trabajamos en nuestro propio diseño, porque siempre se nos acaban olvidando y podemos caer en el error de crearnos estilos repetidos, sino también para cuando trabajamos en proyectos grandes y o bien los estilos ya están creados pero no los conocemos, porque una cosa es leer un css y otra es adivinar que pinta tiene, o bien porque creamos alguno para que se sepa que existe.
cssguide.png
Uno de esos documentos que odiamos hacer, pero que siempre echamos de menos tener.
Creating a Style-Guide for your site
Vía / SitePoint

Saltos de página en CSS

ByLuis

Las hojas de estilos son importantes tanto para mostrar en una pantalla común, como para mostrarlos en otros dispositivos, por ejemplo al imprimirlos.

A la hora de imprimir una página web es necesario para que la lectura sea más cómoda, pensar en los saltos de página. Para lo cual existe la propiedad page-break-before, la cual nos permite saltar de página antes del elemento.

Para ello deberemos añadir en nuestras hojas de estilo:

@media all  {
.page-break { display:none; }
}
@media print {
.page-break { display:block; page-break-before:always; }
}

Y en nuestra página web lo siguiente:

<div class="page-break"></div>

Advanced CSS Printing — Using CSS Page Breaks

Vía / Posh CSS

| | |

Apps Mania, un Techcrunch en formato CSS Mania

ByLuis

Hoy hemos lanzado, Apps Mania, la cuarta nanopublicación de Blogs Media (la tercera en inglés).

Captura de Apps Mania

¿Qué es Apps Mania?

Nos gusta decir que es un Techrunch en formato CSS Mania. Es decir un showcase de aplicaciones web.

Hacía meses que teníamos la idea en mente y después de múltiples retrasos hoy ve la luz siendo conscientes de que mientras tanto han aparecido sitios similares que no pasan de ser meros directorios, ya que no tienen el nivel de actualización que tendrá Apps Mania ni incluyen información que nosotros sí contemplamos como: descripción, Elevator Pitch, URL Demo, URL API, tags…

Al igual que en CSS Mania, solo aceptaremos publicidad contratada. La sinergia entre ambas propuestas, puede resultar interesante.

Apps Mania.

Suscripción: feed de Apps Mania

Porcentaje de carga mediante CSS

ByLuis

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

porcentaje.png

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

y estos estilos:

#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS