Tema: CSS | Sentido Web

Menú radial mediante XHTML

Fri, 20 Jun 2008 11:45:00 +0000

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:

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

Javascript Tutorial - Radial Menus Part 1

Guía de estilos CSS para e-mails

Tue, 17 Jun 2008 11:00:00 +0000

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

Uso excesivo de capas y estilos en CSS

Thu, 29 May 2008 18:00:00 +0000

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:

My site name

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?

No es semántico: solo están puestos allí para maquetar.
No es bueno para SEO: los buscadores hacen uso de las etiquetas de cabecera para obtener datos significativos.
Sobran

El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:

Menu Item Menu Item Menu Item Menu Item

CSS Diseases: Divitis & Classitis

Vía / CSS Globe

Letras capitales mediante CSS

Thu, 10 Apr 2008 16:45:00 +0000

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

Nice Drop caps with CSS

Vía / Posh CSS

CSS Frame Generator: obtener la estructura CSS

Tue, 08 Apr 2008 11:00:00 +0000

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

Consejos para estructuras tus CSS

Thu, 13 Mar 2008 10:15:00 +0000

Buenos consejos para realizar tus estilos CSS bien estructurados.

Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, ...)
Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

CAPTCHA DHTML y CSS con PHP

Wed, 12 Mar 2008 17:45:00 +0000

Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.

La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas.

DHTML and CSS CAPTCHA

Efecto fadding como en Flash con jQuery

Thu, 06 Mar 2008 12:00:00 +0000

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.

El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.

El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.

Todo el código en el post original.

Creating a fading header

Vía / CSS Globe

GlassBox: bordes transparentes mediante Javascript y CSS

Thu, 28 Feb 2008 17:45:00 +0000

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

GlassBox

Vía / CSS Globe

Render más rápido de las tablas con CSS

Tue, 19 Feb 2008 09:45:00 +0000

En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.

La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table { 
  table-layout: fixed; 
} 

.auto_table { 
  table-layout: auto; 
}

El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.

El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.

Use the table-layout CSS property to speed up table rendering

Vía / Posh CSS

Porcentaje de carga mediante CSS

Mon, 21 Jan 2008 11:00:00 +0000

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

Usando este código HTML:

50%

y estos estilos:

#box{
  width:250px;
  border:1px solid #000;
  height:17px;
}
#bar{
  width:50%;
  background:#000 /* u otro background */;
  height:14px;
  color:#fff;
  text-align:right;
  padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS

Recopilación de técnicas CSS

Tue, 15 Jan 2008 19:15:00 +0000

Interesante recopilación de técnicas CSS que se han usado desde siempre. Cada vez es más importante realizar diseños que cumplan estándares, y si queremos que a parte de cumplir estándares, también tenga un diseño atractivo, es necesario usar muchas de las técnicas que nos ofrece el recopilatorio.

Entre las técnica que nos enseña o recuerda encontramos:

CSS Sprites
Esquinas redondeadas
Reemplazar texto por imágenes
Tabuladores
Colocar texto alrededor de una imagen
Misma altura en capas
Transformar una lista en una barra de navegación
Cabeceras
Sombras
Transparencia

101 CSS Techniques Of All Time- Part 1

Vía / CSS Globe

Modificar el contorno del texto mediante CSS

Thu, 10 Jan 2008 09:30:00 +0000

CSS Text Wrapper te permite modificar el contorno de los párrafos de texto de nuestras páginas web, ya sea creando círculos, zig-zags, o cualquier otra figura.

Hay dos formas de poder aplicarlo: mediante estilos o mediante un javascript. Existe un editor que nos ayuda mediante la creación de puntos, configurar el contorno de nuestro párrafo.

CSS Text Wrapper

Vía / WebAppers

Saltos de página en CSS

Tue, 08 Jan 2008 12:00:00 +0000

Las hojas de estilos son importantes tanto para mostrar en una pantalla común, como para mostrarlos en otros dispositivos, por ejemplo al imprimirlos.

A la hora de imprimir una página web es necesario para que la lectura sea más cómoda, pensar en los saltos de página. Para lo cual existe la propiedad page-break-before, la cual nos permite saltar de página antes del elemento.

Para ello deberemos añadir en nuestras hojas de estilo:

@media all  {  
  .page-break { display:none; }  
}  
@media print {  
  .page-break { display:block; page-break-before:always; }  
}

Y en nuestra página web lo siguiente:

Advanced CSS Printing — Using CSS Page Breaks

Vía / Posh CSS

Clear de float en CSS

Thu, 13 Dec 2007 11:30:00 +0000

Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:

existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.

Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.

#container:after
{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#container
{display: inline-block;}

/* Oculta para IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}

Clear Your Floats - The Right Way