Contenido

CSS3 Clock, girando las manillas con CSS3

17 Nov

+ 0

Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.

// HTML
<ul id="clock">
   	<li id="sec"></li>
   	<li id="hour"></li>
	<li id="min"></li>
</ul>
// JS
$(document).ready(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css("-webkit-transform", srotate );

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css("-webkit-transform", hrotate );

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css("-webkit-transform", mrotate );

      }, 1000 );

});

Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate(); a los elementos que componen las manillas del reloj.

@font-face en Internet Explorer

4 Nov

+ 3

Hace ya tiempo tiempo, vimos que WebKit integraba una implementación de font-face con la que podríamos definir la fuente que debía mostrarse en nuestras página, hace poco Mozilla anunció que Firefox 3.1 iba a integrar esta opción, incluso encontramos alternativas mediante Javascript que servían como alternativa a sIFR3.

Safari + @font-face

2989691982_01f96c6e84

Internet Explorer 7.0 + @font-face

2989691770_441a92d21f

John Tangerine nos muestra un ejemplo de como conseguir esta funcionalidad en Internet Explorer 6+, eso sí, sin usar el sistema estandar de fichero .otf.

<style type="text/css" media="screen">
h1, h2, h3, p, td{
font-family:'Fontin-Regular', georgia, serif;
}

/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>

/* PARA INTERNET EXPLORER*/
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->

Puedes probar tu mismo el resultado de este código.

Mozilla se sube al carro de las CSS Transform

15 Sep

+ 7

Hace casi 1 año que WebKit anunciaba la incorporación de CSS Transform en el corazón de su navegador. Una propiedad que nos permitía realizar modificaciones a nuestros elementos HTML directamente desde el CSS.

-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */

css-transforms

Hoy Ajaxian anuncia que Firefox se suma a los que implementan esta propiedad.

Borrador CSS3: Background y border

13 Sep

+ 1

Hace unos días Jose Manuel Pita (administrador de Tripix.net) nos informaba de la nueva propuesta de la W3C para el estándar CSS3 que afectaba a los background y los border de nuestras aplicaciones. Estas nuevas propiedades podrían ser los fondos y bordes de nuestros futuros CSS.

Firefox 3.1 incorporará @font-face

13 Sep

+ 8

Hace casi un año, WebKit anunció que soportaba @font-face como parte de la implementación de CSS3 en su navegador. Con esta propiedad nos permite definir una fuente que se descargará al cliente evitando que nuestros diseños se vean de forma diferente dependiendo de que el usuario tenga o no la fuente principal instalada.

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/ »
  kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Ahora Firefox 3.1 nos permitirá usar este código y disfrutar de esta propiedad que la mayoría de diseñadores web estaba deseando disponer.

Microsoft Internet Explorer 8 y los prefijos CSS

9 Sep

+ 8

No soy muy partidario de que los navegadores creen sus propias propiedades CSS, pero de alguna forma tienen que ir mostrándonos las novedades que se van implementando y las propuestas que podrían llegar a implementarse en algún momento.

Esto nos origina una cantidad de propiedades como las que nos podemos encontrar en Mozilla (-moz) o WebKit (-webkit). Ahora Microsoft anuncia que para la nueva versión de Internet Explorer 8 dispondremos de una nueva y que será una muestra de que están haciendo bien su trabajo.

-ms-propiedad

No son milisegundos, sinó que es el nuevo prefijo que los desarrolladores web tendremos que conocer para lidiar con el CSS de este navegador.

Property Type W3C Status
-ms-accelerator Extension
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension
-ms-block-progression CSS3 Editor’s Draft
-ms-filter Extension
-ms-ime-mode Extension
-ms-layout-grid CSS3 Editor’s Draft
-ms-layout-grid-char CSS3 Editor’s Draft
-ms-layout-grid-line CSS3 Editor’s Draft
-ms-layout-grid-mode CSS3 Editor’s Draft
-ms-layout-grid-type CSS3 Editor’s Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor’s Draft
-ms-interpolation-mode Extension
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension
-ms-scrollbar-arrow-color Extension
-ms-scrollbar-base-color Extension
-ms-scrollbar-darkshadow-color Extension
-ms-scrollbar-face-color Extension
-ms-scrollbar-highlight-color Extension
-ms-scrollbar-shadow-color Extension
-ms-scrollbar-track-color Extension
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor’s Draft
-ms-zoom Extension

Como podemos ver, se han implementado muchas opciones y esto nos permite añadir más opciones a nuestros diseños gracias a estas propiedades CSS, el único problema es el resultado en nuestra hoja de estilos:

-moz-border-radius: 1em; // Mozilla
-ms-border-radius: 1em; // Internet Explorer 8
-webkit-border-radius: 1em; // WebKit y Safari
border-radius: 1em; // Para cuando se cumplan los estandares.

¿Un poco feo no?

Anotación

Quiero remarcar el gran trabajo que están haciendo con Internet Explorer 8, dejando a un lado el odio hacia Microsoft, hay que reconocer que esta versión será digna de competir en la guerra de los navegadores, sin duda va a ser muy interesante.

Zebra tables con CSS3

28 Ago

+ 5

CSS3 está a la vuelta de la esquina, gracias a la implementación por parte de los navegadores, este estandar poco a poco va haciéndose más real y van apareciendo perlas como estas del equipo devOpera.

En el artículo, nos muestran como usar el pseudo-selector nth-child , un selector que nos permitirá crear tablas estilo zebra con una sola línea.

tr:nthchild(2n+1) {
  background-color: #99ff99;
}

Al selector le debemos indicar el número de líneas a los que ha de aplicar el estilo, en este caso, cada 2 líneas empezando en la posición 1 (comenzan en el 0).

Más información

El selector :not() de CSS3

25 Ago

+ 4

Es un selector del que no se ha hablado mucho y que realmente dará mucho juego en un futuro. Este selector, nos permite negar las busquedas que hasta ahora estabamos haciendo.

La mejor forma de comprender lo que :not() nos ofrece es mediante un ejemplo:

//CSS
/* Todos los elementos input */
input {
        border:1px red solid;
}

/* El elemento con id #phone */
input#phone {
	background-color:yellow;
}
/* Todos los elemento no #phone*/
input:not(#phone) {
	background-color:green;
}

/* Todos los elementos que no sean Submit */
input:not([type="submit"]) {
	font-size:3em;
}

// HTML
<form id="comments_form" action="" method="post">
	<fieldset>
		<p>
			<label for="name">Nombre: </label>
			<input name="nombre" value="" type="text" id="name" />
		</p>
		<p>
			<label for="surname">Apellido: </label>
			<input name="apellido" value="" type="text" id="surname" />
		</p>
		<p>
			<label for="phone">Teléfono: </label>
			<input name="telefono" value="" type="text" id="phone" />
		</p>
		<p>
			<input type="submit" value="Enviar" />
		</p>
		</fieldset>
</form>

Como podemos ver, nos ofrece otra posibilidad más con la que seleccionar nuestro elementos.

Usando CSS Animations

18 Ago

+ 0

Una de las novedades que WebKit integra y que Mobile Safari tambien se aprovecha son las CSS Animations, una propuesta del equipo de desarrollo de webkit con el que podemos definir animaciones asociadas en nuestros ficheros CSS.

.divSlide {
        -webkit-animation-name: "slide-me-to-the-right";
        -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
        from { left: 0px; }
        to { left: 100px; }
}

Este código es el que produce la mágia que podemos ver en este ejemplo de MyDailyPhoto (Requiere iPhone 2.0). En el podemos ver que mediante la integración de los eventos touch del iPhone/iTouch va cambiando las clases de los elementos a los que se les aplican los estilos.

Destripemos un poco más el código:

.CLASS {
        -webkit-animation-name: "ANIMATION_NAME";
        -webkit-animation-duration: 1s;
}

Por un lado definimos la animación con -webkit-animation-name, y la duración de la animación con -webkit-animation-duration. Una vez definida la animación debemos definir le cuerpo de la animación:

@-webkit-keyframes "ANIMATION_NAME" {
        from { left: 0px; }
        to { left: 100px; }
}

En este caso la animación animación modifica el left del elemento al que le hayamos específicado la class CLASS para desplazarlo 100px.

Gracias a las posibilidades que las CSS Animations nos ofrecen podemos hacer cosas como estas:

// Giramos a la izquierda
.flip-left {
    -webkit-animation-name: "flip-left";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-left {
    from { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform:  rotateY(0deg); }
}

// Giramos a la derecha
.flip-right {
    -webkit-animation-name: "flip-right";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-right {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform:  rotateY(180deg); }
}

// Hacemos aparecer el elemento
.show {
    -webkit-animation-name: "show";
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes show {
    from { opacity:0; }
    to { opacity:1; }
}

Usando estas propiedades y un poco de PHP he montado una pequeña galería de imagenes (solo hay 3 fotos) a modo de prueba para que veais los chulo que puede quedar.

Más información

Desde Wayne Pan descubro una función JS con la que encontrar una animación fácilmente.

var findAnimation = function(name) {
      var ret_rule = null, sheets = document.styleSheets;
      for(var i = sheets.length - 1; i >= 0 ; i--) {
        var sheet = sheets[i];
          for(var j = sheet.cssRules.length - 1; j >= 0; j--) {
            var rule = sheet.cssRules[j];
              // 7 means the keyframe rule
              if(rule.type === 7 && rule.name == name) {
                ret_rule = rule;
                break;
              }
            }
      }
      return ret_rule;
    }
  findAnimation('shrink-n-grow-animation').findRule('50%').style.height = '25px';

Desde Ajaxian presentan Transformie, un plugin de jQuery que nos permite disfrutar de estas transformaciónes en IE, para ello hace uso de DXImageTransform.Microsoft.Matrix.

fensteraufnahme-1

Border-imagen en Firefox 3.1

13 Ago

+ 5

John Resig anuncia que en la proxima versión de Firefox 3, la 3.1. Dispondrá de la capacidad de usar el atributo de CSS3 border-image. Con él podremos especificar una imagen que hará de border al elemento al que se lo indiquemos.

border-image1

border-image: url(border.png) 27 27 27 27 round round;

border-image2

border-image: url(border.png) 27 27 27 27 stretch stretch;

Para los más impacientes, podemos hacer nuestras pruebas con la ultima nighty release disponible para descargar.