Estructura

Estas ventanas no son más que la creación de una lista. Cada elemento LI puede tener el contenido que deseemos, mientras que el primer LI será la ventana elegida. Esta es su estructura:

<ul id="container">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Definimos el porcentaje de la ventana que se esconde y asignamos una ID a cada ventana:

var itemWidth = $("#container li").width();
// Esconder el 50% de cada ventana
var itemPosition = itemWidth * 50 / 100;
// Deslizar el 60% de la anchura de la ventana
var itemMove = itemWidth * 60 / 100;        

// Movemos ventanas debajo de otra y asignamos una ID a cada una
$("#container li").each(function(i) {
    $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i);
});

Cuando un usuario hace click en una ventana, se determina la posición de la ventana clickada y la elegida previamente. Si la ventana clickada está en el lado izquierdo de la ventana elegida anteriormente, todas las ventanas que hemos clickado antes estarán en el lado de la izquierda y viceversa.

$("#container li").click(function(e) {
    // Obtenemos id's de la ventana actual y la otra sue el usuario ha hecho click
    var currentID = parseInt($(".current").attr("id"));
    var clickedID = parseInt($(this).attr("id"));

    if (currentID != clickedID) {
        if (clickedID > currentID) {
            // deslizar ventanas a la izquierda
        }
        else {
            // deslizar ventanas a la derecha
        }
    }
});

Antes de que deslicemos las ventanas necesitamos eliminar la clase .current de la anterior “elegida” y asignarla a la ventana clickada.

var currentZ = 99;
var current = $(this);
setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500);

También podemos estlizar los enlaces como texto normal así no cabe duda que las ventanas semi-escondidas no se pueden clickar. Así los usuarios pueden acceder únicamente al contenido de la ventana elegida.

Eso es todo, espero que os haya gustado, si tenéis dudas ya sabéis, a los comentarios o al foro.

Ejemplo y descarga

Vía | Jankoatwarspeed

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Selector de productos estilo Apple con CSS & JQuery

• Selector CSS3 muy completo: Sly

• El selector :not() de CSS3

En teoría sería así:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="formato-iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="formato-ipad.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="formato-ipad-horizontal.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="formato-ipad-horizontal.css">

Luego mediante esos documentos podremos estilizar el documento adecuándolo al dispositivo en el que se encuentre el usuario, de forma sencilla.

Vía | O’Reilly

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• 25 excelentes diseños sobre sitios de apps para iPhone e iPad

• Detectar la resolución de la pantalla y aplicarle estilos

• Diseños inspirados para iPhone

// Conseguimos la etiqueta HTML
var htmlTag = document.id(document.documentElement);
// El nombre de la clase se agrega al navegador
htmlTag.addClass(Browser.name);
// Se añade la clase de la versión y el nombre del navegador  ión
htmlTag.addClass(Browser.name + Browser.version);

Por ejemplo, si existe un usuario que ha visitado el sitio y usa Safari, la etiqueta HTML se vería así:

<html class="safari safari5">

Por lo que ahora se puede añadir CSS únicamente para cada navegador, por ejemplo:

.safari .p { color: #000; }

.firefox .p { color #333; }

Vía | EW

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Facilitar la comprobación cross-browser

• CSS Inline-block Cross browser

• Ampliación sobre los comentarios condicionales

Al descomprimirlo se observa una carpeta con dos archivos (image.jpg y jpeg2css.exe). El archivo ejecutable es el encargado de transformar la imagen y crear un tercer archivo (out.html) que contendrá todo el HTML y CSS que se necesita, pero será obligatorio ver el código fuente para aplicarlo (Ctrl + U). La imagen debe estar en esa carpeta y llamarse “image.jpg”.

Vía | Cibermitaños

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Convierte PSD a CSS con PSD2CSS

• Eliminar el borde de las imágenes con vínculo

• Solución a la transparencia PNG en IE 6 (II)

Vamos a ver un ejemplo a continuación:

El ejemplo que os voy a mostrar es sobre la estilización de un widget, para cambiarle el color de la tipografía:

/* el widget llamado widget23 será estilizado*/
*#widget23 {
font-color: #e0a;
}

Sin duda, un paso adelante en la personalización de interfaces gráficas de usuario.

Vía | Bitelia

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Participa y opina: ¿Cómo ves el futuro de Flash?

Está claro que con CSS se pueden hacer maravillas, existen un montón de usos útiles y demostraciones que podemos realizar con CSS. Andrew-Hoyer nos presenta una creación suya, un experimento, en el que se puede comprobar cómo se mueve un hombre (que casualmente es él) gracias a CSS3, nada de Javascript.

Aunque existen fallos en la versión 4.2.1 del iOS, es muy curioso verlo funcionar en un dispositivo Android, iPhone, iPod o iPad. Podemos verlo tanto en versión canvas como en imagen. A continuación os explicaré más detalladamente cómo lo ha creado, resulta curioso ver la imaginación de la mente, y lo flexible que puede resultar CSS, con usos inimaginables.

Se ha creado usando animaciones CSS (-webkit-animation), transformaciones CSS (-webkit-transformations) y HTML simple. Se puede ver correctamente sólo con navegadores basados en WebKit (Safari o Chrome), pero, los que no tengan este navegador, pueden ver un vídeo:

La idea de su estructura es aplicar CSS transformations a un elemento que también lo aplica a sus “hijos”. El código HTML es así:

<div class="torso">

    <div class="left bicep">
        <div class="left forearm"></div>
    </div> <!--brazo izquierdo -->

    <div class="right bicep">
        <div class="right forearm"></div>
    </div> <!-- brazo derecho -->

    <div class="left thigh">
        <div class="left shin">
            <div class="left foot">
                <div class="left toes"></div>
            </div>
        </div>
    </div> <!-- pierna izquierda -->

    <div class="right thigh">
        <div class="right shin">
            <div class="right foot">
                <div class="right toes"></div>
            </div>
        </div>
    </div> <!--pierna derecha -->

</div> <!-- torso -->

Se aplica la propiedad z-index para mostrar el brazo izquierdo al igual que las piernas detrás del torso además de mover las espinillas y los antebrazos detrás de los muslos y los bíceps, respectivamente. Tuvo algunos problemas con esta propiedad y webkit, ya que cuando quería animarlo, se destruía la estructura, así que añadió unas variaciones, que no hizo el código más semántico, pero resolvió todos los problemas anteriores:

<div class='me'>
    <div class="torso">

        <div class="left leg">
            <div class="left thigh">
                <div class="left shin">
                    <div class="left foot">
                        <div class="left toes"></div>
                    </div>
                </div>
            </div>
        </div> <!-- pierna izquierda -->

        <div class="right leg">
            <div class="right thigh">
                <div class="right shin">
                    <div class="right foot">
                        <div class="right toes"></div>
                    </div>
                </div>
            </div>
        </div> <!-- pierna derecha -->

        <div class="left arm">
            <div class="left bicep">
                <div class="left forearm"></div>
            </div>
        </div> <!-- brazo izquierdo -->

        <div class="right arm">
            <div class="right bicep">
                <div class="right forearm"></div>
            </div>
        </div> <!-- brazo derecho -->

    </div> <!-- torso -->
</div> <!-- yo -->

Sólo cambió dos cosas, lo primero fue envolver cada miembro en otro div, que era la solución principal. Después se trasladaron los brazos por encima de las piernas.

Para las animaciones, se hicieron animaciones separadas de la parte izquierda y derecha, usando únicamente los valores 0%, 25%, 50%, 75%, 100%, para evitar cálculos y complicaciones.

Abajo del ejemplo, como podrás comprobar, hay dos enlaces que ocultan y muestras los bordes del elemento. Uno es un enlace “#canvas”, y el otro, “#”. Aprovechando el pseudo-selector, Andy añadió unas cuantas líneas de CSS, quedando un curioso efecto de silueta:

<style type="text/css" media="screen">

    #canvas:target div:not(.overlay) {
        border: 1px solid black;
    }

    #canvas:target div.me div{
        background: rgba(255, 255, 255, 0.25);
    }

</style>

<p style='text-align: center'>
    <a href='#canvas'>Show</a> /
    <a href="#">Hide</a>
    Element Borders.
</p>

El código final sería este:

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Un Pong con CSS Animation

• Crear cubos 3D con CSS

• Simular la realidad con CSS3

La propiedad box-shadow, una de las nuevas opciones de CSS3, se ha convertido en la opción ideal para crear sombras en las cajas. Aplicando sombras a la pseudo-clases ::before y ::after, crearemos útiles perspectivas con la sombra. Allá vamos:

Código HTML

<div class="box">

<img src="cssblog.png" alt="cssblog" />

</div>

Código CSS

.box:after {

content: '';

position: absolute;

z-index: -1; /* Esconder la sombra detrás de la imagen */

/* La sombra */

-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* La mitad del 30% restante */

height: 100px;

bottom:  0;
}

Ejemplo de su funcionamiento

Vía | Tuts

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS: Box-shadow, propiedad

• Sombras en el texto sin usar text-shadow

• CSS: Text-shadow, propiedad

HTML5 y CSS aportan nuevas novedades a los diseñadores, muy útiles y más fáciles de implementar que las de CSS2. Os enseñaré a crear un cubo 3D con CSS, parecido al que os mostré anteriormente. Las letras del cubo son las siglas del logotipo de WebProNews.

Para empezar, necesitamos 3 imágenes separadas, cada imagen de 100 x 100 píxeles, degradado de claro a oscuro. Incluye las letras W, P y N en cada imagen respectiva, después añade dos píxeles de borde. Tendría que quedar así:

Código CSS

Ahora que tenemos nuestras imágenes, vamos a empezar a crear el código CSS.

.cube {

	position: absolute;
	top: 100px;
	left: 100px;
}

El contenedor de nuestro cubo se llamará .cube, no necesitamos aplicarle altura y anchura, pero es recomendable aplicarle posición absoluta.

.face {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

Después necesitamos crear una característica global para cada cara de nuestro cubo. En esta parte si será necesario utilizar el posicionamiento absoluto. Indicaremos una altura y anchura de 100 píxeles, y ocultaremos el overflow para que si las imágenes son más largas, no destruyan el cubo.

.top {
	top: 0;
	left: 89px;
	background: #ffffff;
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

Ahora posicionaremos la imagen superior del cubo con top y left. Después añadiremos el color de fondo, que no es necesario pero queda mejor. La siguiente parte seguramente sea la más importante, la nueva propiedad CSS3 transform. Muchos navegadores ya soportan esta propiedad, por lo que no tendremos problemas. Necesitamos incluir dos líneas extra para navegadores basados en webkit y para Firefox con el objetivo de que se muestre correctamente. Rotaremos el cubo 45º en el sentido de las agujas del reloj, 15º en posición oblicua para hacerlo coincidir con las otras caras del cubo.

.left {

	top: 77px;
	left: 44px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(15deg) skew(15deg, 15deg);
	-moz-transform: rotate(15deg) skew(15deg, 15deg);
}

La cara izquierda del cubo está establecida muy cerca que la superior, por lo que únicamente deberemos moverla 77 píxeles desde la parte superior del contenedor y 44 píxeles a la izquierda. Después necesitaremos rotar la cara 15º y mantenerla oblicua como la superior.

.right {
	top: 77px;
	left: 133px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
	-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Después debemos construir un espejo de la cara izquierda con la derecha, es decir, las mimas propiedades de forma invertida.

Código HTML

La parte de HTML es la más sencilla, el formato sería así:

Con HTML estructuraremos las imágenes. El ejemplo final sería así:

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crear cubos 3D con CSS

• Espectacular animación 3D de Creative Commons con CSS3 y HTML5

• Simular la realidad con CSS3

Las burbujas de texto son un efecto popular pero la mayoría de ellas se crean con HTML o Javascript. Este tutorial contiene varios ejemplos de efectos de burbujas de texto creados con CSS 2.1 y personalizados con CSS3. Como dije anteriormente, no contiene imágenes, Javascript y puede aplicarse a tu HTML semántico.

Por ahora soporta Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+ e Internet Explorer 8+.

Varios modos de crear burbujas

Con HTML tan simple como <div>Contenido</div> o <p>Contenido</p> puedes producir efectos de burbujas como este:

Añade un elemento hijo y tu obtendrás burbujas como estas:

Puedes usar los pseudoelementos :before y/o :after para producir formas básicas. Aplicando propiedades como border-radius y transform puedes producir formas complejas y orientaciones.

Código de ejemplo

Este es un ejemplo de como crear una burbuja de texto básica. Para ver más ejemplos mira la página de ejemplos completa.

/* Burbuja con un triangulo isosceles
------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creamos el triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Cabe destacar que los navegadores que no sean totalmente compatibles con CSS3 o algunos efectos de CSS 2.1, no mostrarán la burbuja “deforme”, si no que simplemente no tendrás los efectos completos.

Advertencia sobre Firefox 3.0

Firefox 3.0 soporta los pseudo-elementos de CSS 2.1 pero no el posicionamiento del contenido generador, así que si vas a implementar este efecto en tu sitio, ten en cuenta que Firefox 3.0 lo soporta parcialmente.

Ejemplos

Vía | Nicolasgallagher

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Text-stroke, borde en el texto con CSS3

• Bocadillos de texto con CSS

• Grabado de texto con CSS

CSS-JS-Booster es un script PHP que optimizará la carga de tu sitio web, que cuenta con interesantes características:

• Combina múltiples archivos CSS dando como resultado un menor número de consultas al servidor
• Reduce el código CSS necesario
• Etiqueta las imágenes menores de 24 KB como data-URI o MHTML (para IE <= 7)
• Comprime el CSS resultante en GZIP

Requiere PHP 5, y es totalmente gratuito. Pronto hablaré más profundamente sobre este script, permaneced atentos.

A continuación la página oficial, con el enlace de descarga e información avanzada:

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Comprime ficheros CSS con PHP

• Emular los pseudo selectores de CSS3 en IE 5-8

• Las 22 tipografías gratis más usadas por los diseñadores profesionales