// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Artículos relacionados

• 10 extensiones para Firefox con las que mejorar nuestra privacidad
• Mozilla Firefox 3.6 está entre nosotros
• Disponible la RC1 de Firefox 3
• Firefox 3.6 RC2 disponible para descargar
• Firefox 3 RC 2 disponible “extraoficialmente”

(Ver Imagen)

Modo de empleo

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

// HTML
<div id="digiclock"></div>

// Javascript
<script type="text/javascript">
     $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Aquí la configuración
        });
    });
</script>

Configuración

• clockImagesPath: Directorio de imágenes del Reloj
• weatherImagesPath: Directorio de imágenes del tiempo
• am_pm: Booleano para especificar AM/PM
• weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
• weatherMetric: Medición de la temperatura (C/F)
• weatherUpdate: Tiempo de actualización del tiempo

Actualización (13:02):

Artículos relacionados

• Reloj binario en Javascript
• Reloj de la web -2.0 en la web 2.0
• Pon un reloj polar en tu PC
• CSS3 Clock, girando las manillas con CSS3
• ¿quien dijo que el inglés era fácil?

// Mozilla
-moz-border-radius:1em;

// WebKit
-webkit-border-radius:1em;

// W3C
border-radius:1em;

(Ver Imagen)

Código

#wrapper{
 width: 1000px;
 margin: auto;
 position: relative;
}
#circle{
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 0;
 width: 200px;
 height: 200px;
 background-color: #a72525;
 -webkit-border-radius: 100px;
}

#circle1{
 position: absolute;
 top: 105px;
 left: 5px;
 z-index: 1;
 width: 200px;
 height: 200px;
 background-color: #efefef;
 -webkit-border-radius: 100px;
}

Artículos relacionados

• Bordes redondeados en Internet Explorer
• Microsoft Internet Explorer 8 y los prefijos CSS
• Border-imagen en Firefox 3.1
• Bordes redondeados con CSS Sprites
• Firefox + Firebug vs IE8 + Developer Toolbar

(Ver Imagen)

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

Artículos relacionados

• Como crear CSS sprites
• Bordes redondeados con CSS Sprites
• Fechas más elegantes con CSS
• Mejoras el aspecto de tus fechas con CSS
• Mostrar los últimos X posts separados por fechas

Soporte

(Ver Imagen)

Forma de uso

Declarando nuestra fuente

@font-face {
 font-family: miFuente; /* required */
 src: source;                        /* required */
 font-weight: weight;                /* optional */
 font-style: style;                /* optional */
}

Aplicando nuestras fuentes

h3 {
 font-family: miFuente, arial, helvetica, sans-serif;
}

Detectar la propiedad

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 *
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){

    var fontret,
        fontfaceCheckDelay = 100;

		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable.
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement,
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}";
      doc.getElementsByTagName('head')[0].appendChild(st);

      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

if (!!window.CSSFontFaceRule) ...

Alternativas

1. sIFR 2.0
2. cufón
3. P+C DTR
4. FLIR
5. SIIR
6. DTR
7. sIFR 3
8. Typeface.js
9. IFR
10. PHP+CSS DTR
11. CSS Image Replacement [static]
12. swfir

Más información

• Sintaxis de @font-face
• Web Fonts with @font-face
• @font-face - MDC

Artículos relacionados

• Firefox 3.1 incorporará @font-face
• @font-face en profundidad
• @font-face en Internet Explorer
• Detector de Tsunamis para el movil
• FontJazz, usa cualquier fuente en tus aplicaciones web.

// Referencia "lh" + número de 80 a 200 de 10 en 10
// Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"
<div class="lh120"></div>

// Referencia "b" negrita
<div class="b"></div>

// Referencia "i" cursiva
<div class="i"></div>

// Referencia "n" normal
<div class="n"></div>

// Referencia "u" subrayado
<div class="u"></div>

Artículos relacionados

• WordPress 2.0.4 en español
• El Grid que te ayuda a diseñar
• Wordpress 2.3 en Español
• wpTube en Español
• Emastic beta3, framework CSS

(Ver Imagen)

Artículos relacionados

• Another World JS
• Impresionante!!
• Reloj de la web -2.0 en la web 2.0
• Colección de embellecedores y formateadores de código
• 38 menús desplegables con jQuery y CSS

div {
 // IE6 y 7 lo omite (en IE8 se ve bien)
 background-color: rgb(255,0,0);

 // Solución para estos navegadores
 background-color: #fd7e7e;

 // RGBa CSS3
 background-color: rgba(255,0,0,0.5);
}

Artículos relacionados

• Confirmado: Internet Explorer 8 hoy, apartir de las 18:00
• Internet Explorer 8 en 20 idiomas más
• Instala TODAS las versiones de Internet Explorer en tu PC
• Internet Explorer 8, ahora disponible en 43 idiomas
• Internet Explorer 8 beta 2 disponible para descargar

1) CSS: La opción con más estilo (¿lo pillais? :P)

// Añadir el CSS directamente
function removeHTMLEditorCSS(){
 echo '<style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>';
}

add_action('admin_head', 'removeHTMLEditorCSS');

// Añadir un fichero CSS externo
fichero: removeHTMLEditor.css
#editor-toolbar #edButtonHTML, #quicktags {display: none;}

wp_register_style('removeHTMLEditorCSS', '/ruta/css/removeHTMLEditor.css');
wp_enqueue_style('removeHTMLEditorCSS');

2) Javascript: La más rápida

function removeHTMLEditorJS(){
 echo 'jQuery(document).ready(function($) {
         $("#edButtonHTML").remove();
       });';
}

add_action('admin_footer', 'removeHTMLEditorJS');

3) PHP: La más limpia

function my_default_editor() {
 $r = 'tinymce'; // html or tinymce
 return $r;
}
add_filter( 'wp_default_editor', 'my_default_editor' );

// Versión reducida
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

Conclusión

Artículos relacionados

• Wordpress Dashboard Editor, widgets en tu dashboard
• Amplia el editor enriquecido de Wordpress 2.1
• Ampliando más las opciones del editor enriquecido de Wordpress
• Wordpress 2.8 con un editor de código decente
• Nueva funcionalidad de Wordpress 2.9 en la edición de imágenes

Requerimientos

Instalación

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

Selectores soportados

Consideraciones

• Los ficheros CSS deben ser llamados mediante el uso del tag <link /> aunque dentro de ellos podrás usar @import sin problemas. No será posible usar el CSS a nivel de página.
• El fichero CSS deberá estar alojado en el dominio de la página.
• El protocolo file:// para llamar a las CSS no funcionará por temas de seguridad.
• El selector :not() no está soportado
• La emulación no es dinámica, una vez aplicada los estilos los cambios en el DOM no se verán reflejados.
• Es compatible con las versiones 5,6,7,8 de Internet Explorer.

Artículos relacionados

• Domina los selectores CSS avanzados
• Zebra tables con CSS3
• Extendiendo los selectores de MooToos y jQuery
• CSS3 Generando contenidos
• Impresionantes técnicas CSS3 y tutoriales para conseguirlas