SimpleGrid es un framework CSS preparado para generar diseños responsive. Está preparado para 4 rangos diferentes de tamaño de pantalla: pantallas con una resolución menor 720px, pantallas con una resolución entre 720px y 985px y pantallas con una resolución superior de 1235px. Los visitantes recibirán un diseño que se ajusta al tamaño de la ventana del navegador.
CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.
CSSrefresh es un pequeño archivo de javascript que controla los archivos CSS incluidos en una página Web. En el momento en que se guarda un archivo CSS, es capaz de implementar los cambios sobre la web, sin tener que actualizar el navegador.
Su uso es muy sencillo, basta con incluir la librería después de los ficheros CSS que deseemos controlar. Por ejemplo:
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<script type="text/javascript" src="js/cssrefresh.js"></script>
</head>
Con el siguiente fragmento de código en CSS podemos voltear una imagen. Imagina el caso de que necesites una flecha hacia la derecha y otra hacia la izquierda. Con este sencillo truco podríamos tener la solución con una sola imagen y por tanto una única petición HTTP al servidor.
img.volt_hoz{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Del mismo modo puede hacerse para voltear verticalmente la imagen:
img.volt_ver {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
Completa lista de hacks para poder actuar específicamente sobre los navegadores que deseemos.
/***** 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 }
/***** 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 */