webintenta

Menú animado con CSS3

Thu, 24 May 2012 18:26:20 +0000

El siguiente ejemplo nos vuelve a mostrar las posibilidades que nos ofrecen las transiciones
de CSS3.

HTML:

 <ul>
        <li>Botón 1</li>
        <li>Botón 2</li>
        <li>Botón 3</li>
        <li>Botón 4</li>
        <li>Botón 5</li>
</ul>

CSS:

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

Ver ejemplo en funcionamiento » »

Cita 23-05-2012

Wed, 23 May 2012 20:22:13 +0000

La primera regla de la optimización de software: no lo hagas.
La segunda regla de la optimización de software (¡sólo para expertos!): No lo hagas todavía.

Michael A. Jackson

Tabla con filas de colores alternos unicamente con CSS

Sun, 20 May 2012 20:29:17 +0000

El siguiente ejemplo muestra una aplicación práctica de la pseudo-clase nth-child. CSS3 proporciona cuatro poderosas pseudo-clases que permiten al diseñador CSS seleccionar múltiples elementos según su posición en el DOM. La utilización de estas pseudo-clases puede ser un poco confusa al principio, pero es fácil una vez que se ha comprendido su funcionamiento. Las pseudoclases son:

:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)

El argumento N, puede ser una palabra clave, un número o una expresión numérica tipo an + b. Estas pseudo-clases aceptan la palabra clave "odd" para seleccionar elementos pares y "even" para seleccionar elementos impares. Si el argumento n es un número, representa la posición ordinal del elemento seleccionado. Por ejemplo, si el argumento es 5, se seleccionará el quinto elemento. El argumento N también puede darse como an + b, donde a y b son números enteros (por ejemplo, 3n + 1).

Veamos un ejemplo utilizando "odd" y "even" para dar un estilo cdistinto a las filas pares e impares de una tabla. Supongamos la siguiente tabla:

<table id="miTabla">
    <tr>
        <td>IE</td>
        <td>Download</td>
    </tr>
    <tr>
        <td>Firefox</td>
        <td>Download</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>Download</td>
    </tr>
    <tr>
        <td>Safari</td>
        <td>Download</td>
    </tr>
    <tr>
        <td>Opera</td>
        <td>Download</td>
    </tr>
</table>

Para que las filas tengan un estilo "cebra" o de colores alternos tan sólo necesitaríamos el siguiente CSS:

#miTabla tr:nth-child(odd) {
   background-color: #DDD;
   color:#777
}

#miTabla tr:nth-child(even) {
   background-color: #666;
   color:#FFF;
}

Ver ejemplo en funcionamiento » »

Si el argumento N es dado mediante una expresión an+b, en esa expresión, el número b representa la posición ordinal del primer elemento que queremos hacer coincidir y el número a representa el número ordinal de cada elemento queremos hacer coincidir después de eso. Por ejemplo, la expresión 3n+1 hará coincidir el primer elemento despúes de cada tercer elemento: el primero, cuarto, séptimo, décimo y así sucesivamente. El valor de la palabra clave "odd" (impar) es equivalente a la expresión 2n+1.

Si a y b son iguales, o si b es cero, b puede omitirse. Por ejemplo, las expresiones 3n+3 y 3n+0 equivalen a 3n — se refieren a cada tercer elemento.

La pseudo-clase :nth-last-child busca coincidencias con elementos de acuerdo a sus posiciones dentro de la lista respecto a un elemento padre, empezando a contar desde el final. Es decir, selecciona el enésimo hijo de su elemento padre empezando a contar del último al primero.

Por ejemplo, este selector seleccionará el último párrafo contenido dentro de un elemento con identificador "micaja":

#miCaja p:nth-last-child(1) {

}

La pseudo-clase :nth-of-type busca elementos, del mismo tipo, de acuerdo a sus posiciones respecto a un elemento padre. En este ejemplo se seleccionará la primera imagen dentro de un párrafo:

p img:nth-of-type(1){

}

La pseudo-clase :nth-last-of-type selecciona el enésimo elemento de su tipo, empezando a contar del último al primero. El siguiente ejemplo busca las tres últimas imágenes que se encuentran dentro de un elemento cuyo identificador es "gallery":

#gallery>img:nth-last-of-type(-n+3){

}

Cita 20-05-2012

Sun, 20 May 2012 11:49:28 +0000

Una impresora consta de tres partes principales: la carcasa, la bandeja de papel atascado y la luz roja intermitente.

Desconocido

"Tucked Corners" en CSS

Sat, 19 May 2012 18:53:17 +0000

Este ejemplo muestra cómo realizar un efecto denominado "tucked corners" o esquinas metidas con CSS. Lo mejor, para comprender de que estamos hablando, es ver el resultado final.

Ver ejemplo en funcionamiento » »

HTML:

<div class="tucked-corners top-corners">
    <span class="tucked-corners bottom-corners">
             Contenido....
    </span>
</div>

CSS:

div.tucked-corners {
    background: #f6f6f6;
    height: 380px;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
    background: #999;
	font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    color:#FFF;
    display: block;
    height: 380px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}

/* Top Corner Effect */

.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index: 10;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* Bottom Corner Effect */

.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    bottom: -25px;
    width: 100px;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

Ver ejemplo en funcionamiento » »

Visto en playground.genelocklin.com » »