Las librerías son algo muy útil para los desarrolladores. Hoy en día prácticamente todo se ha hecho ya antes y probablemente alguien halla liberado alguna librería que nos facilite la tarea ahorrándonos mucho tiempo.

En GenvetaDev publican esta web en la que podemos encontrar miles de scripts para cualquier lenguaje y para practicamente cualquier cosa.

A partir de ahora. Antes de comenzar a hacer algo es casi obligatorio, comprobar, que no lo halla hecho alguien antes.

Además de configurar muchas opciones de las entradas personalizadas tenemos que definir un icono para que aparezca al lado del enlace en el menú de administración. En AyudaWordpress me encuentro con un pack de 3.000 iconos listos para usar. Así nos ahorramos tener que diseñar un icono.

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;}

No te olvides, también. de echarle un vistazo al nuevo tema por defecto y al nuevo editor de texto a pantalla completa (Sin distracciones).