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 » »

RGBA es una de las múltiples maneras en que puede declarar un color en CSS. Lo que la hace especial es que también permite establecer la transparencia del color al mismo tiempo. La sintaxis para la notación de color RGBA es:

propiedad: rgba (< valor color rojo >, < valor color verde>, < valor color azul >, < valor de opacidad >);

Los valores de color serán de 0 a 255 y los valores de opacidad de 0.0 a 1.0. Todos los navegadores modernos admiten RGBA, incluyendo IE9. Para las versiones anteriores de Internet Explorer podemos utilizar un fallback, añadiendo el color de fondo en formato hexadecimal.

#sidebar {
        background-color: #ff0000; /* fallback color en hexadecimal */
        background-color: rgba(255, 0, 0, 0.3);
}

Interesante recurso para desarrolladores y maquetadores web. Simpliste es una plantilla HTML5 responsive. Esta plantilla hace que tu sitio responda a la resolución del navegador del cliente: el diseño por columnas se convierte en una columna para los visitantes desde tablets; los elementos de navegación se convierten en elementos de navegación más grandes para los usuarios con smartphones, etc.

Simpliste » »

Este post es una traducción libre del post Manipulating the DOM with jQuery: 10+ useful code snippets, publicado en catswhocode.

Añadir una clase CSS a un elemento
Una forma muy sencilla de cambiar el aspecto y funcionalidad de un elemento es añadirle un clase CSS.

('#mielemento').addClass('miclase');

Eliminar una clase CSS de un elemento
Al igual que es útil conocer como añadir clases CSS, también es interesante conocer como eliminar clases CSS no deseadas.

$('#mielemento').removeClass('miclase');

Comprobar si un elemento posee una clase CSS
Si en tu aplicación o sitio web se añaden y eliminan clases para un elemento en particular, puede ser muy útil ser capaces de comprobar si un elemento contiene cierta clase.

$('#mielemento').hasClass'miclase');

Cambiar de CSS usando jQuery
Tal y como hemos visto en los ejemplos anteriores, añadir o eliminar clases CSS a un elemento es muy sencillo utilizando jQuery. Pero, qué ocurre si lo que queremos es eliminar completamente una hoja de estilos y adjuntar una nueva. Es muy fácil, tal y como se muestra en el siguiente ejemplo:

$('link[media='screen']').attr('href', 'css_alternativo.css');

Anexar HTML a un elemento
Cuando necesitamos anexar html a un elemento, podemos utilizar el método append():

$('#mielemento').append('texto que será añadido');

Comprobar si un elemento existe
Cuando trabajamos con Javascript, a menudo necesitamos comprobar si un elemento existe o no. Usando jQuery y la propiedad length es muy sencillo hacerlo: si length == 0, no existen elementos usados en la página.

if ($('img').length) {
		alert('Se han encuntrado elementos img en la página');
} else {
		alert('No se han encontrado elementos img');
}

Obtener el padre de un elemento
Cuando trabajamos con el DOM, podemos necesitar conocer qué elemento es el padre directo de otro elemento. El método closest() nos permite averiguarlo.

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento
El método sibings() es una herramienta muy útil para obtener los hermanos de un elemento:

$('mielemento').siblings()

Eliminar una opción de una lista desplegable
Cuando trabajamos con listas desplegables puede ser útil actualizar su contenido de acuerdo a las acciones del usuario. Para eliminar una opción de un select, podemos utilizar el siguiente truco:

$("#selectList option[value='2']").remove();

Obtener la opción seleccionada como texto
Útil cuando deseamos conocer que es lo que un usuario ha seleccionado de un lista desplegable.

$('#selectList :selected').text();

Aplicar un efecto “cebra” a las tablas
Cuando usamos tablas, es una buena idea, para mejorar la legibilidad, aplicar un estilo "cebra" a las filas.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento
Si queremos contar cuantos elementos div son hijos de #foo, la siguiente línea nos permitirá saberlo.

$("#foo > div").length

El siguiente snippet permite extraer el último tweet mediante jQuery y JSON.

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

Donde username es el nombre de usuario del que deseamos extraer el último tweet. Por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tweet</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://twitter.com/statuses/user_timeline/webintenta.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});
});	
</script>
<style type="text/css">
#twitter{
	padding:5px;
    font-family: Arial, Helvetica, Sans-serif;
	font-size:13px;
	color:#666;
	background:#E8E8E8;
	border:1px solid #CCC;
    width:300px;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="twitter"></div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Visto en CSS Tricks » »