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

Hoy en nuestro Blog , tenemos la suerte de contar con uno de los mayores expertos en CSS para compartir sus conocimientos con nosotros. Se trata de Pedro Corchero Murga , programador y creador del conocidoCSSblog.es . Como muchos ya sabéis , Basekit es un editor web orientado a diseñadores, una de sus características es la capacidad de modificar el código CSS de vuestras páginas web de forma directa. A continuación Pedro nos enseña como hacerlo a través de un  atractivo efecto para nuestros carruseles de imágenes.

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:

• Basekit, de Photoshop a página web dinámica [No hacen falta invitaciones]

• La importancia del CSS

• Bonito menú realizado con CSS & JQuery

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

Instalación de la extensión

Cuando hayas descargado la extensión, únicamente será necesario incluirla en el sitio y realizar una referencia a ella:

@import "fancy_3d_buttons";

Configurando las variables

f3d_button(background color, font size, font weight, line height, border radius, border top, border left)

Como podéis comprobar, existen muchas variables, pueden elegirse las que se deseen.

Para declarar las propiedades del botón, basta con seguir estas reglas, cambiando los valores y propiedades por las que se deseen, claro está:

a.green{
@include f3d_button(#63bb4a);
}
a.blue{
@include f3d_button(#2992DF, 50px, bold, 1.5em, 10px, 2px, 2px);
}

Ejemplo y descarga

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:

• Crea degradados CSS fácilmente con Ultimate CSS Gradient Generator

• Crear botones CSS estilo Wii

• Crea animaciones impresionantes con CSS3 mediante Sencha Animator

Por ejemplo, con esta estructura:

<p>Lorem ipsum dolor sit amet...</p>

Añadiendo este código CSS:

{
    text-shadow: 0 0 7px #000;
    color: transparent;

}

Como dije anteriormente, la importancia reside en el color, que está definido en transparente. Puedes controlar la suavidad del efecto desde el valor de la propiedad text-shadow (en el ejemplo está a 7px).

Internet Explorer 5.5-8 no soporta RGBA, por lo que usaremos el filtro de degradado:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

Este efecto funciona en los navegadores Internet Explorer versión 8 y 9, Firefox, Safari y Chrome. Podemos ver a continuación un ejemplo de su funcionamiento o descargar el ejemplo:

Vía | Martin Ivanov

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:

• Bonita caja de búsqueda con CSS3

• Lista de trucos con CSS3

• Text-stroke, borde en el texto con CSS3

Es muy fácil hacer borde en un texto con imágenes, con Photoshop, pero, ¿y si queremos hacerlo con CSS? Una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {
-webkit-text-stroke: 3px black;
color: white;
}

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

Si deseas opciones más avanzadas de personalización, mira Modernizr.

Ejemplo de su funcionamiento

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

Vía | Nettuts

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: Text-shadow, propiedad

• Sombras en el texto sin usar text-shadow

• Ocultar mensajes en un texto con CSS

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

Esta es una propiedad CSS3 que aún no está finalizada, puedes seguir su progreso por la W3C. La propiedad background-size te permite ajustar el fondo, estirarlo hasta donde deseemos, por lo que se puede llamar también background stretch.

Podemos usarla, aunque únicamente determinadas versiones de navegadores son soportadas hasta ahora. Sería:

• -moz-background-size (Firefox 3.6)
• -o-background-size en (Opera 9.5)
• -webkit-background-size (Safari, Google Chrome)
• -khtml-background-size (Konqueror 3.5.4)

Admite valores de ancho y alto tanto en píxeles como en porcentajes. Los valores, obviamente, pueden ser cambiados a los que deseemos.

Ejemplo

Un ejemplo muy sencillo sería este (debajo el código):

div#bgsize {  
  width: 100%;  
 background: url(http://www.misitio.es/imagenes/imagen.gif) no-repeat;  
 background-size: 100%;  
-moz-background-size: 100%;  
 -o-background-size: 100%;  
 -webkit-background-size: 100%;  
 -khtml-background-size: 100%;
}

Puedes ver más ejemplos como este en esta dirección externa.

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: Color y Background

• Firefox 3.6 añade background clipping

• Varios Background en Firefox 3.5