Usando jQuery y CSS he creado este pequeño menú desplegable de subscripción donde podemos ofrecer a nuestros usuarios los enlaces a los distintos feeds rss de nuestra página.

El menú es realmente sencillo, no es nada complicado ni nada del otro mundo. Pero, gracias a él podemos darnos cuenta de que con 6 lineas de jQuery y un poco de CSS podemos lograr cosas alucinantes.

Si sabéis jQuery, esto os parecerá muy sencillo y no os enseñará nada. Si por el contrario no sabéis, este código os podrá servir de introducción y os dareis cuenta de que es realmente sencillo hacer cosas con el sabiendo muy poco.

Veamos el código

HTML

Nada que destacar por aqui. Una caja con dos mas dentro, una de ellas es la que se muestra y se oculta que contiene, además, la lista de enlaces y la otra es para la flecha que indica el estado de la caja.

<div id="caja_rss">
	Subscribete
	<div class="flecha cerrado">&nbsp;</div>
		<div class="caja" style="display:none">
			<ul>
				<li><a href="#">Feed RSS</a></li>
				<li><a href="#">Email</a></li>
				<li><a href="#">Comentarios</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

Lo mismo que lo anterior. Si estamos familiarizados con CSS este código no tiene nada de especial. Unos bordes redondeados por aqui, fondo naranja por allí, algunas sombras y poco más.

#caja_rss {
	width: 120px;
	margin: auto;
	text-align: left;
	font-size: 16px;
	padding: 8px 14px 9px;
	color: #fff;
	text-decoration: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);

	cursor: pointer;
	background-color: #ff5c00;
}

.flecha {
	background: url('flechas.png') no-repeat;
	float: right;
	width: 20px;
	height: 20px;
}
.flecha.cerrado {	background-position: 0px -10px;	margin-top: -13px;	margin-bottom: -10px;}
.flecha.abierto {	background-position: 0px 10px;	margin-top: -23px;}

.caja {
	background: #EEE;
	margin: 10px -10px -6px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.caja ul {	padding: 5px 10px;	list-style: none;	margin: 0;}
.caja li {	padding: 2px 0;}
.caja a {
	color: #444;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px dotted #888;
}
.caja a:hover {	border-bottom: 1px solid #666;	color: #222;}

La magia, jQuery

Aqui es donde pasa todo.

Como vemos el código jQuery, como siempre va contenido dentro del $(document).ready para evitar que se ejecute antes de terminar la carga.

Luego tenemos un toggle que se ejecuta al hacer clic sobre el elemento #caja_rss. Vemos como dentro de este elemento tenemos dos funciones, cada una de ellas se ejecutará una vez cada una.

1. La primera función sirve para desplegar el menú y eliminar y añadir la clase cerrado y abierto respectivamente
2. La segunda función hace lo contrario para dejar el menu como al principio

$(document).ready(function(){
	$('#caja_rss').toggle(
		function(){
			$('.caja').slideDown();
			$('.flecha').removeClass('cerrado');
			$('.flecha').addClass('abierto');
		},
		function(){
			$('.caja').slideUp();
			$('.flecha').removeClass('abierto');
			$('.flecha').addClass('cerrado');
		}
	);
});

Y esto es todo. Como siempre, dudas y preguntas en los comentarios y si te ha servido de ayuda o te ha gustado comparte la para ayudar a cuantos más mejor.

Esta basado en un sistema de 12 columnas que se adaptan automáticamente dependiendo del tamaño del navegador donde lo carguemos por lo que su uso es similar a sistemas como 960.gs. También incluye una hoja para los textos que nos viene con lo básico y otra para reiniciar los estilos de los navegadores (reset.css).

Además está disponible en dos versiones:

1. Fixed: que se adapta al tamaño del navegador por bloques.
2. Fluid: por el contrario se adapta al navegador aprovechando el máximo de espacio posible.

En la web del framework tenéis las dos demostraciones de como funciona cada uno de ellos.

En la hoja de estilo encontraremos el botón para Twitter, Facebook, Google, GitHub, Yahoo, Windows Live y OpenID. Además todos ellos están en tamaño normal y en grande.

Estos botones se visualizan correctamente en Google Chrome, Firefox 3.5+, Safari 4+, IE 10+ y Opera 11.10+. Dan algunos problemas en IE6 y IE7.

Nosotros creamos nuestra hoja de estilos sin preocuparon por añadir las distintas propiedades de los distintos navegadores. Simplemente añadiendo las propiedades nativas de CSS nos bastará. Luego, tras pasarlo por Prefixr este añadirá el resto.

Por ejemplo, esto:

.container {
   box-shadow: 20px;
   -moz-transition: box-shadow 2s;
   -webkit-border-radius: 4px;
   animation: slide 1s alternate;
   background: linear-gradient(top, #e3e3e3 10%, white);
}

Pasará a ser esto:

.container {
   -webkit-box-shadow: 20px;
   -moz-box-shadow: 20px;
   box-shadow: 20px;

   -webkit-transition: box-shadow 2s;
   -moz-transition: box-shadow 2s;
   -o-transition: box-shadow 2s;
   -ms-transition: box-shadow 2s;
   transition: box-shadow 2s;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

   -webkit-animation: slide 1s alternate;
   -moz-animation: slide 1s alternate;
   -ms-animation: slide 1s alternate;
   animation: slide 1s alternate;

   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e3e3e3), to(white));
   background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
   background: -moz-linear-gradient(top, #e3e3e3 10%, white);
   background: -o-linear-gradient(top, #e3e3e3 10%, white);
   background: -ms-linear-gradient(top, #e3e3e3 10%, white);
   background: linear-gradient(top, #e3e3e3 10%, white);
}

Aunque, el CSS ganará mucho peso también ganaremos en compatibilidad, lo cual, siempre se agradece.

Cada uno de ellos, además, disponen de ejemplos online y una tabla de compatibilidad con los distintos navegadores.

Sin duda, un enlace que todos deberíamos guardar y tener en cuenta.

En esta galería tenemos dies ejemplos de distintas animaciones que podemos conseguir con CSS3. En la demostración, al situarnos sobre las distintas cajas podemos ver las distintas transacciones y transformaciones que generan los distintos efectos.

Formee es un framework esta basado en una especie de 960.gs pero fluido. De esta forma es realmente sencillo estructurar un formulario como podemos ver en la demostración del framework.

Además el código que genera es estándar y sigue las reglas de la W3C.

En este caso tenemos un editor de CSS online y en tiempo real. A la derecha tenemos un cuadro donde veremos todos los cambios que realizemos en el código de la izquierda que está divido en dos secciones, una para el código HTML y otra para el código CSS. Además nos permite también generar un enlace para poder compartir el código o descargarlo.

Entre los logos disponibles podemos encontrar el de Twitter, Adidas, Pepsi, Apple e incluso un pequeño tributo a Steve Jobs y muchos más.

// Codigo para redirigir al primer enlace encontrado
$('elemento').bind('click', function(){
    window.location = $('a:first', this).attr('href');
});

El problema es que no era un enlace real por lo que si hacíamos click central o Mayus + Clic por ejemplo para abrir el enlace en una nueva pestaña, no funcionaba.

Con SuperLink solucionamos esto ya que lo que hace es crear un elemento a posicionado de forma absoluta sobre el elemento con lo cual tenemos un enlace real.

Para usarlo, además de la librería agregamos la siguiente linea:

$('elemento').superLink('a:last');

Tiene algunos problemas como que por ejemplo no podemos usar el :hover del elemento ya que al situar un a encima este no vale de nada.

Los botones usan una sola imagen y vienen en cuatro colores, eso sí. Al ser botones en CSS podemos configurarnos a nuestro gusto. De forma muy sencilla podemos obtener botones redondeados o más cuadrados y de cualquier color según necesitemos.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Fuente

Con esta herramienta podremos generar una hoja de estilos de forma automática a partir de un archivo HTML. La web leerá el archivo y generará una hoja de estilos con todas las clases e id’s de forma ordenada. Solo nos quedará añadir las propiedades para los distintos elementos.

Esto es muy sencillo de hacer. Simplemente tenemos que añadir en el archivo functions.php lo siguiente:

add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );

function devpress_fix_html_editor_font() { ?>

Como vemos, lo unico que hacemos es añadir una nueva propiedad CSS a los elementos #editorcontainer #content y #wp_mce_fullscreen. Podemos personalizar la fuente a nuestro gusto además de el tamaño, color, etc.

Cuando descarguemos Bootstrap nos encontraremos con:

1. reset.css para eliminar los elementos innecesarios.
2. Variables de color y preboot.less mixins para conseguir gradientes, transparencias y transiciones.
3. scaffolding.less elementos básicos y globales para generación de grid, diseño estructural y las diferentes plantillas de páginas.
4. type.less con estilos para el cuerpo de textos, listas y tipologías versátiles.
5. pattern.less elementos para navegación, modales, paneles de advertencias…
6. forms.less estilos para los campos de entrada, formularios y estados de validación.
7. tables.less estilos para maquetar datos tabulados.

Me encanta esta iniciativa por parte de Twitter. No solo ponen a disposición de todos el código si no que también el conocimiento de grandes desarrolladores de los que dispone la empresa. Lo usemos o no, es altamente recomendable echarle un vistazo al código, seguro que aprenderemos algo nuevo.

El diseño esta muy bien conseguido pero además son dinámicas y personalizables por medio de CSS.

Como podemos ver en los ejemplos, la librería incluye validación de formularios, cálculos en tiempo real y manejo de errores. Además se verifica la información de la tarjeta de crédito en los servidores de Recurly entando así uso de nuestra CPU.

Para usar la librería en nuestra web necesitamos llamar a la hoja de estilos, a jQuery y al archivo recurly.js. Después solo nos queda iniciar la librería y definir los parámetros de configuración:

Luego solo nos queda añadir el div donde saldrá el formulario en nuestro HTML.

Con esto debería de ser suficiente para empezar.

Las páginas de errores, aunque no se deberían de ver nunca, también hay que cuidarlas. Es importante que sea atractiva. Ya que se ha producido un error hay que intentar que el usuario no abandone la página y si podemos llamar la atención positivamente, mejor.

En .net nos proponen crear una página de error 404 usando animaciones CSS3. El resultado es muy bueno.

Botones estilo Gmail: Demo – Código

Los nuevos botones que vienen en el rediseño me han encantado. Son unos botones grandes en tonos grises con unas transiciones muy suaves al situarnos sobre ellos. Con la idea de usarlos algún día he recreado los botones.

Os dejo el código por si os han gustado tanto como a mí y queréis usarlo: Se trata solo de CSS y un poco de HTML, no ha hecho falta javascript.

Código Html

Inicio
Nuevo


Archivar
Eliminar
Responder
Spam

Código CSS

.grupobotones { float: left; }
.boton {
    transition: border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition:border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

    background-color:#F1F1F1;
    border: 1px solid rgba(0, 0, 0, 0.0976563);
    color: #666;
    display: inline-block;
    font-weight: bold;
    height: 28px;
    margin: 0 5px;
    outline: 0px none #666;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: white 0px 1px 0px;
}
.boton:hover {-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; border-color:#747474; outline-color: #333;}

.boton a { color: #666; text-decoration: none; cursor: default; display: block; padding: 7px 10px 7px 12px;}
.boton:hover a {color: #333;}

.boton.primero {margin-right: -1px; border-radius: 2px 0 0 2px;border-right-width: 0;}
.boton.centro {margin-right: -1px;margin-left: -2px; border-radius: 0; border-right-width: 0;}
.boton.ultimo {margin-left: -2px; border-radius: 0 2px 2px 0;}

.boton.primero:hover,
.boton.centro:hover {border-right-width: 1px;}
.boton.primero:hover a,
.boton.centro:hover a {padding-right: 9px;}

.boton.naranja {
	background-color: #dd493b;
    background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    background-image: linear-gradient(0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    background-image: -moz-linear-gradient(0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    border-color: #B0281A #B0281A #AF301F #B0281A;
    text-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 0px;
}
.boton.naranja:hover {background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DD4B39), to(#C53727)); background-color:#dd493b;}
.boton.naranja a {color:#fff;}

Ahora podemos usar WhatFont un marcador que abriendolo desde el navegador nos permitirá averiguar de que fuente se trata situándonos sobre ella. Además nos dirá si está en negrita, cursiva, el tamaño, etc.

También existe un plugin para Chrome y otro para Safari.

Para ello tenemos otros selectores, no tan conocidos, pero igualmente útiles. A continuación listo 8 de los que consider más útiles y desconocidos. Hay muchos más, estos son solo una selección.

1. X + Y

Este selector afectará a Y solo cuando este vaya inmediatamente después de X. En el ejemplo siguiente, el primer parrafo que vaya justo acontinuación de ul será color rojo. El resto no se verá afectado.

ul + p {
   color: red;
}

2. X > Y

Con este selector se afectará solo a los hijos directos de un elemento. En el ejemplo inferior se verá afectado aquellos elementos que pertenezcan directamente a un div. Si por ejemplo dentro del div ponemos un parrafo (p) y dentro de este una lista ul esto no será afectado ya que no es hijo directo de div.

div > ul {
  color: red;
}

3. X ~ Y

Este selector es parecido a X + Y pero más permisivo. En este caso el elemento Y se verá afectado siempre que siga al elemento X.

ul ~ p {
   color: red;
}

4. X:not(selector)

Este es sencillo, pero útil. El ejemplo a continuación afecta a todos los divs excepto al que contenga la id container, en este caso.

div:not(#container) {
   color: red;
}

5. X[href="http://guiabreve.com"]

Simple. Afectará a todos los enlaces que tengan como href la dirección indicada.

a[href="http://guiabreve.com"] {
  color: red;
}

6. X[href*="guiabreve"]

Al añadir el asterisco afectará a todas los elementos en cuyo href contenga el siguiente fragmento. No es necesario dar la url exacta.

a[href*="guiabreve"] {
  color: red;
}

7. X[href^="http"]

De esta forma afectaremos solo a los enlaces externos, por lo que estos será de color rojos mientras los internos no cambiarán.

a[href^="http"] {
   color:red;
}

8. X[href$=".jpg"]

Con el simbolo $ afectaremos a los elementos cuyos href terminen por la cadena contenida entre comillas, en este caso, .jpg.

a[href$=".jpg"] {
   color: red;
}

Espero haberlos explicado bien y que no haya dudas. Como siempre, si hay alguna duda dejad un comentario e intentaré explicarme mejor.