CSS Frame Generator: obtener la estructura CSS

ByLuis

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

CSS Frame Generator

Vía / CSS Globe

Similar Posts

hCard con CSS

ByLuis

En 24 ways nos vuelven a regalar un buen artículo sobre cómo mostrar las hCard con estilos.
Claro, el diseño que han realizado quizás no se amolde al nuestro, pero la técnica que usan está bastante bien: usar una imagen de fondo y luego cuatro imágenes para cada esquina.
hcard.gif
Styling hCards with CSS

|

Selectores CSS3 que soportará Opera

ByLuis

http://sentidoweb.com/img/2007/01/opera_logo-thumb.png

En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:

  • :root: selecciona el elemento padre del documento, que normalmente será el <html>
  • :not(s): representa a todos los elementos del documento excepto aquellos que NO coincidan con el selector "s" (ej.: not(#menu) ).
  • :nth-child(n): representa al hijo n de un elemento. Ej.: div:nth-child(2) seleccinará todos los elementos div que sean segundo hijo de cualquier elemento (gracias Federico).
  • :nth-of-type(n): representa al hermano n de un elemento. Ej.: div:nth-of-type(2) seleccinará el segundo elemento del div especificado.
  • :first-of-type: representa al primer elemento que es el primer elemento de su tipo dentro de la lista de hijos del elemento padre.
  • :target

Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados

  • :empty : representa a un elemento que no tiene ningún tipo de hijo.
  • :nth-last-child(n): representa a un elemento que tiene n hermanos después de él.
  • :nth-last-of-type(): representa a un elemento que tiene n hermantos del mismo tipo.
  • :last-child: represetna al ultimo hijo de un elemento.
  • :last-of-type: representa al último hermano de su tipo. Sería lo mismo que :nth-last-of-type(1).
  • :only-child: representa a un elemento cuyo padre no tiene ningún otro elemento hijo.
  • :only-of-type: representa a un elemento cuyo padre no tiene otro elemento hijo del mismo tipo.

Vía / Slightly Ajar

|

Floatutorial

ByLuis

Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:

  • Información general, definición de conceptos, explicación de float y clear.
  • Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
  • Posicionamiento de la imagen y su pie de foto, aplicando bordes.
  • Crear thumbnails.
  • Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
  • Usar listas de elementos para crear pestañas.
  • Crear efecto de letra inicial de párrafo de tamaño superior al resto.
  • Estilo de dos columnas.
  • Estilo de tres columnas.

Floatutorial

Vía / Dzone

|

Cinco consejos sobre CSS

ByLuis

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cómo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

  • Organiza tus estilos según el siguiente formato: primero reune las que correspondan a los contenedores y layouts, después las cabeceras (<h1>..<h6>), seguido iría los párrafos y los enlaces, y por último todas las listas (navegación, …).
  • No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defínelo contenido por bloques (por ejemplo: #contenido a {..}).
  • Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una línea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un código más limpio.
  • En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma función que quieres mostrar, por ejemplo, en vez de usar una capa para el título, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
  • Nombra los estilos según su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
Vía / SkimCSS

|

Laboratorio: crea tu propio CSS Evolution

ByLuis

El otro día hablábamos sobre CSS Evolution, una forma de ver paso a paso el efecto de las CSS sobre nuestra página. Algo que supongo que a la mayoría nos ha gustado y que puede que queramos verlo en nuestra propia web.

cssevolution.png

Os paso el javascript necesario para hacerlo, el cual es posible que no sea del todo eficiente, pero bueno, la falta de tiempo no me ha permitido hacer más, entre otras cosas solo funciona para Firefox.

Lo primero es tener los estilos en un link:

<link rel="stylesheet" type="text/css" media="screen" href="sw-large.css" />

Una vez cargada la página, mostrándose con estilos, se desactivará la etiqueta link y luego se recuperará el texto de todos lo estilos, para volver a activar la etiqueta e ir añadiendo los estilos uno a uno cada cierto tiempo.

// Donde almaceno los estilos para luego ir incluyéndolos uno a uno
var antiguas;
function ini() {
// Se podría hacer para que cogiera todos los links
var link = document.getElementsByTagName("link")[0];
link.disabled = true;
// Avisa para que no te pille despistado
alert("COMENZAR");
// Recupera los textos de todos los estilos
var reglas = document.styleSheets[0].cssRules;
antiguas = new Array();
for (var i=0; i<reglas.length; i++) {
antiguas[i] = reglas[i].cssText;
}
// Quita todos los estilos
for (var i=0; i<reglas.length; i++) {
document.styleSheets[0].deleteRule(0);
}
// Inserta todos los estilos uno a uno
setTimeout("insertaCSS(0)", 500);
link.disabled = false;
}
// Añade los estilos
function insertaCSS(i) {
document.styleSheets[0].insertRule(antiguas[i], i);
if (i+1<antiguas.length) {
setTimeout("insertaCSS("+(i+1)+")", 500);
} else {
alert("FIN");
}
}
window.onload = function() {
ini();
};

Es posible que estéis algún rato sin ver cambios, depende de si vuestros estilos son generales o algo concretos, por lo que no afectarán a ciertas partes de la página.

Por cierto, he encontrado un fallo a la hora de recuperar el texto de los estilos, que cuando el texto es algo así:

p {
color: blue;
}

Debido a la línea vacía, devuelve un estilo undefined. Bueno, tampoco lo he mirado con detenimiento, pero creo que si se da ese error.

Ejemplo

|

Recursos CSS para principiantes

ByLuis

No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquí tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.

  • La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demás de las tablas, filas y celdas.
  • La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itálica, tamaño, separación de letras, alineamiento, …
  • Y por último una lista de colores y su correspondencia RGB.

También es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizás si sepa usar un editor gráfico.

Web development

Vía / dzone