Instalación

<script src="//rezitech.github.com/syze/syze.min.js"></script>

syze.sizes(320, 480, 768, 1024, 1920);

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Artículos relacionados

• TwitterWeek – 2012-01-08
• Colección de utilidades Javascript
• El estado de Acid3 en la actualidad
• Browser Shooter, dispara navegadores con Javascript
• Flash VS Ajax

• font-size
• color
• -webkit-font-smoothing
• rotation

Artículos relacionados

• Usamos.es, informes de usabilidad y accesibilidad gratis
• JSSS, las CSS hechas JSON
• DOM Inspector para Internet Explorer y Firefox
• JSONPath, usando XPath con nuestro JSON
• Aún no sabes que es Hijax

1. color
2. direction
3. font-family
4. font-size
5. font-style
6. font-weight
7. list-style-position
8. table-layout
9. text-indent
10. word-wrap

1. background
2. background-attachment
3. background-color
4. background-image
5. background-repeat
6. background-position
7. border
8. border-collapse
9. border-color
10. border-style
11. border-width
12. clear
13. cursor
14. display
15. float
16. font
17. font-variant
18. height
19. left
20. right
21. bottom
22. top
23. letter-spacing
24. line-height
25. list-style
26. list-style-image
27. list-style-type
28. margin
29. overflow
30. padding
31. page-break-after
32. page-break-before
33. position
34. text-align
35. text-decoration
36. text-transform
37. vertical-align
38. visibility
39. white-space
40. width
41. word-spacing
42. z-index

Artículos relacionados

• Tabla de compatibilidades CSS3/HTML5 en los diferentes navegadores
• Compatibilidad entre diferentes versiones de javascript y los navegadores
• Truco para centrar nuestra página en (casi) todos los navegadores
• Tripoli, una CSS genérica para mejorar nuestras aplicaciones
• Listado de api’s

Instalación

<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]-->

Artículos relacionados

• Zebra tables con CSS3
• Domina los selectores CSS avanzados
• 6 motivos por los que IE6 debe morir
• Extendiendo los selectores de MooToos y jQuery
• ie-css3.js: Pseudo selectores CSS3 en Internet Explorer

Artículos relacionados

• Cambia la apariencia de tu Textmate
• Krunch, comprime ficheros online
• Convierte textmate en tu editor de blogs
• Ecoder, el editor de PHP escrito en Javascript
• $script.js, otra librería de Javascript ondemand

(Ver Imagen)

(jQuery convertido a PNG :D)

La idea

var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = "",
        c = d.createElement("canvas"),
        t = c.getContext("2d"),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data;
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

¿Como se crean esas PNG's?

def string2png( string, output )
  image = Magick::Image.new 1,string.length
  for i in 0 .. string.length
    color = '#%02X0000' % string[i]
    pixel = Magick::Pixel.from_color color
    image.pixel_color 0, i, pixel
  end
  image.compression = ZipCompression
  image.write("png8:"+ output)

  image = nil
end

¿Por que usar esto?

Conclusiones

Artículos relacionados

• Canvas 3D, gráficas 3D basadas en Canvas y Javascript
• Bomomo, dibuja con Canvas
• Canvas para WordPress, disponible
• Tutorial de Canvas
• Increible canvas 3D

(Ver Imagen)

// HTML
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
// CSS
h1 { font-family: 'Crimson Text', arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Javascript

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Artículos relacionados

• Listado de propiedades CSS compatibles con todos los navegadores
• Feliz 2008 a todos
• Insertar fuentes en tu página web
• La W3C le mete mano al Ajax
• Páginas de about: en Google Chrome

(Ver Imagen)

(Ver Imagen)

Artículos relacionados

• Links para hacernos la vida más facil.
• Crea estructuras de forma semántica
• Javascript Developer Tools
• jQuery Tools, herramientas para usar con tu jQuery
• Herramientas para ayudarnos con el día a día

.box {
 -moz-border-radius: 15px; /* Firefox */
 -webkit-border-radius: 15px; /* Safari and Chrome */
 border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

 -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
 -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

 behavior: url(ie-css3.htc); /* Activamos el soporte para IE */
}

Artículos relacionados

• Selectivizr, añade pseudo-clases y atributos CSS3 a IE6-8
• Curioso bug de RGBa en Internet Explorer (¿como no?)
• OpenSearch en Internet Explorer 8
• Confirmado: Internet Explorer 8 hoy, apartir de las 18:00
• 6 motivos por los que IE6 debe morir

¿Como participar?

<?php
function is_naked_day() {
	$start = date('U', mktime(-12,0,0,04,09,date('Y')));
	$end = date('U', mktime(36,0,0,04,09,date('Y')));
	$z = date('Z') * -1;
	$now = time() - $z;
	if ( $now >= $start && $now < = $end ) {
		return true;
	}
	else {
		return false;
	}
}
if ( is_naked_day() ) {
	echo "<!--
	Hoy es el Naked Day, dia sin CSS.
	Visita http://naked.dustindiaz.com para tener más información
	-->";
}
else {
	?>
	<style type="text/css">
	<!--
	@import"/css/your_style_sheet.css";
	-->
	</style>
	<?php
}
?>

<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a> website for more information.</p>

<h3>¿Que ha pasado con el diseño?</h3>
<p>Para conocer más acerca de por que están deshabilitados los estilos de esta página, visita 
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a>.</p>

Artículos relacionados

• CSS Naked Day 2009
• Comienza el 2do. Naked Day
• Un superviviente al Naked Day
• Día del CSS desnudo (05/04/06)
• Naked Day (III)