Contenido

Rotando texto con CSS

31 jul

+ 8

Jonathan Snook, publica un intersante artículo en el que nos muestra como rotar texto mediante CSS.

text-rotation
(Ver Imagen)

El código está claro que no es estandar y solo funciona en Safari/WebKit, Firefox e Internet Explorer.

//HTML
<div class="example-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>

//CSS
.year {
	/* WebKit, Safari */
	-webkit-transform: rotate(-90deg); 

	/* Firefox 3.5+*/
	-moz-transform: rotate(-90deg);	

	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Una alternativa más estándar, aunque más laboriosa nos la proponen los chicos de CSS-Tricks.

3D Transformations en WebKit

17 jul

+ 0

La gente de WebKit publica un artículo con una serie de ejemplo sobre lo que serán los 3D transforms de CSS. Pese a que mi máquina no baja del 77% de uso del procesador mientras está funcionando ya se comienzan a ver alguna de las posibilidades que nos pueden ofrecer.

Snow Stack, impresionantes efectos CSS 3D con HTML puro y Javascript

14 jul

+ 24

Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio.

snow_stack
(Ver Imagen)

Para probarlo necesitaremos la última versión de WebKit (r45824 o superior) y acceder a esta demo.

Me gustaría tener el pedazo de máquina que debe tener el que ha grabado el video para poder verlo así de fluido, por desgracia no he podido verlo de esa forma, pero ya despunta como una nueva forma de ver Internet.

Los usuarios me avisan

29 jun

+ 2

Via email he recibido un par de artículos interesantes que me parece interesante compartir:

  1. Pautas de diseños en Photoshop [peivem.com]
  2. Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar]
  3. Honda Insight [Vimeo] (Via Hans Christian)

Si quieres compartir algo, solo tienes que hacermelo saber :D

CSS Gradient Tool, añade un degradados con tus CSS

2 jun

+ 10

Ajaxian nos muestra hoy CSS Gradient Tool. Una herramienta que nos permite aprovecharnos de una característica CSS que actualmente solo está disponible en WebKit.

webkit-gradient
(Ver Imagen)

Como podemos ver la característica -webkit-gradient, nos permitirá realizar degradados más fácilmente, aunque estos solo podrán ser vistos en los navegadores que usen WebKit (Safari, Chrome, …).

-webkit-gradient(linear, left top, left bottom, from(#146366), to(#4D5366), color-stop(.6,#142633))

CSS Gradient Tool,  se trata de una herramienta que nos permite generar de una forma visual el código CSS necesario para conseguir que estos degradados sean más sencillos de implementar.

Impresionantes técnicas CSS3 y tutoriales para conseguirlas

22 may

+ 3

En Noupe, nos muestran un recopilatorio de técnicas CSS3 realmente impresionantes y sus respectivos tutoriales para conseguir implementarlas para los navegadores que poco a poco van respetando esta versión del estandar de CSS.

Cubos 3D usando CSS Transformations

8 may

+ 15

Hace ya más de un año hablamos de una serie de propuestas para CSS3 que el equipo de WebKit estaba haciendo sobre las CSS Transformations. A lo largo del año, hemos visto algunas aplicaciones de estas propiedades que ya podemos encontrar en algunos navegadores. La última viene de manos de Paul Hayes, y via Ajaxian, descubro que está montando cubos 3D con CSS transformations.

multiple-cubes-css
(Ver Imagen)

¿Como están hechos?

Para comprender la importancia de esas nuevas funcionalidades del CSS3, veamos como están montados estos cubos que hasta el momento únicamente funcionan sobre Safari, Chrome y Firefox 3.5. Y para los demás navegadores requieren una buena dosis de Javascript.

HTML

El HTML, osea la estructura del cubo es muy sencilla y cada uno de ellos tiene algo similar a esto.

<div class="cube">
        <div class="topFace">
                <div>
                        Content
                </div>
        </div>
        <div class="leftFace">
                Content
        </div>
        <div class="rightFace">
                Content
        </div>
</div>

CSS (Aplicamos la mágia)

El CSS  además de definir el tamaño de las caras del cubo nos define el efecto de 3D que hemos de aplicar a cada una de ellas.

.cube {
	position: relative;
	top: 200px;
}

.rightFace,
.leftFace,
.topFace div {
	padding: 10px;
	width: 180px;
	height: 180px;
}

.rightFace,
.leftFace,
.topFace {
	position: absolute;
}

.leftFace {
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	background-color: #ccc;
}

.rightFace {
	-webkit-transform: skewY(-30deg);
	-moz-transform: skewY(-30deg);
	background-color: #ddd;
	left: 200px;
}

.topFace div {
	-webkit-transform: skewY(-30deg) scaleY(1.16);
	-moz-transform: skewY(-30deg) scaleY(1.16);
	background-color: #eee;
	font-size: 0.862em;
}

.topFace {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	top: -158px;
	left: 100px;
}

Yo no veo nada de Javascript, lo que hace que el navegador se encargue de generar estos efectos de una forma más rápida y eficiente. Un avance hacia una nueva Internet, sin duda.

Técnicas de reemplazamiento dinámico de texto

1 abr

+ 7

En Dezinerfolio recogen todas (o casi) las opciones de las que disponemos para emular la propiedad font-face de CSS3 que nos permitirá usar fuentes descargables y no depender de las que el usuario tenga instaladas en su máquina.

Ejemplo

<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Listado de opciones

  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

Sly, el selector CSS3 bueno, bonito y barato

26 mar

+ 5

Ajaxian nos muestra Sly, un selector CSS3 realmente sorprendente creado por Harald Kirschner.

compare
(Ver Imagen)

La imagen habla por si sola, los resultados son realmente increibles. Siendo más de la mitad más rápido que Slick (el selector de MooTools), casi 3 veces más rápido que Prototype e incluso mucho más rápido que Sizzle de jQuery. Y todo en 3kb.

Los que quieran ver el código, verán que se ha usado la filosofía de MooTools, osea limpio y claro. Una gozada leerlo.

Actualización

Cuando estuve viendo los resultados de Sly, pensé que sería interesante ver un cara a cara contra Peppy y Sizzle (solo el selector) así que configuré SlickSpeed para ver que tal se porta. Además, he añadido la versión nativa que hace uso de document.querySelectorAll().

Crea una galería de polaroids con CSS3 y jQuery

18 mar

+ 2

Interesante desarrollo con jQuery usando las propiedades de CSS3 que dan como lugar a este espectacular galería de Polaroids completamente dinámica. Por el momento únicamente funciona en Safari/Webkit, Chrome y Firefox 3.1.[Demo][Descargar]