Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}Equal Height Columns with jQuery
Vía / CSS Globe
CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.
Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.
CSSRound
Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.
El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.
Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.
El HTML sería el siguiente:
<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>Y los estilos:
ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}Extensa guía de propiedades CSS que permiten los clientes de correo a la hora de presentar los emails en formato HTML.
El trabajo que han realizado es impresionante y va siendo actualizado cada cierto tiempo. Nos muestra las propiedades CSS y si se ven el los clientes de correo de escritorio o los clientes web.
CSS support in email clients
Vía / WebAppers
Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.
10 Coding Guidelines for Perfect Findability and Web Standards
Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:
<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>Se puede sustituir por:
<h1>My site name</h1>con estos estilos
h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}¿Por qué evitar estos usos incorrectos?
El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>CSS Diseases: Divitis & Classitis
Vía / CSS Globe
Es curioso como el uso del pseudo-elemento :first-letter no es muy usado en la web, mientras que en papel si se suele usar con frecuencia. En este caso se trata de crear letras capitales mediante este pseudo-elemento. Para ello habrá que usar un fondo común para todas y luego modificar la letra inicial para que encaje en el marco.
p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}Vía / Posh CSS
Buena herramienta que nos devuelve la estructura CSS básica que deberíamos usar para darle estilos a un HTML. Aunque no todos los estilos van a sernos necesarios, si es útil para obtener la estructura inicial y así poder trabajar con algo inicialmente.
Indicando un HTML obtendremos un CSS (vacío) como el siguiente:
#root { }
#content { }
#top { }
#logo { }
#logo a { }
#top p.version { }
#top div.balloon { }
#top div.balloon h2 { }
#top div.balloon p { }
#top div.balloon p strong { }
#top div.balloon p em { }
#more.box { }
#more.box h2 { }
#more.box p { }
#more.box ol.properties { }Vía / CSS Globe
A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.
Buenos consejos para realizar tus estilos CSS bien estructurados.
Write a well structured CSS file without becoming crazy
Vía / CSS Globe