Porcentaje de carga mediante CSS

ByLuis

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.

porcentaje.png

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

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

ByLuis

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

ByLuis

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.
textwrapper.png
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

ByLuis

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:

<div class="page-break"></div>

Advanced CSS Printing — Using CSS Page Breaks

Vía / Posh CSS

Clear de float en CSS

ByLuis

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

<div class="clear"></div>

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

Sitemap mediante CSS

ByLuis

Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de búsqueda.

Para aquellos que quieran incluir el sitemap con un buen diseño puede usar este truco que hemos encontrado.

csssitemap.png

Podemos darle un estilo parecido si añadimos CSS al siguiente sitemap:

<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Sin estilos sería así:

  • Web Root
    • stuff
      • nested-deep
        • nested-deeper
          • nested-deepest
      • nested deep

Y para que quede como la imagen anterior debería tener los siguientes estilos:

#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}

CSS SiteMap

Vía / Posh CSS

Konstruktors: snippets CSS

ByLuis

konstruktor.pngKonstruktors es un lugar dónde podremos encontrar códigos CSS para copiar y pegar. No se trata de ficheros independientes, sino de trozos de código.
Mantener código CSS en ficheros de texto no es difícil, y es conveniente teniendo múltiples llamadas HTTP. Si tenemos bien organizados nuestros estilos, con estos trozos de código podremos modificar los estilos sin mayor dificultad.
Los trozos de código se dividen en uso para grid, aspectos básicos de HTML y menús.
Konstruktors
Vía / Posh CSS

Laboratorio: teclado para pantalla táctil de Iphone o Ipod

ByLuis

Algo de lo que más me gusta del Iphone o el Ipod Touch es el teclado que tiene, el cual muestra la tecla que pulsas por encima de tu dedo. Los que tenemos los dedos un poco grandes y somos un poco patosos, en las pantallas táctiles, a no ser que el teclado que ofrecen sea muy grande, hay veces que no vemos muy bien que tecla estamos pulsando. La gente de Apple nos ha quitado esta duda de un plumazo, resaltar y mostrar por encima de tu dedo la tecla que se pulsa.

ipod.png

Si tenemos que hacer una aplicación web que se vaya a usar en pantallas táctiles, este truco puede seros muy útil. Se trata únicamente de cambiar los estilos a los enlaces cuando están activos (a:active), haciendo que el tamaño de la letra sea más grande, y la caja que ocupa sea más grande y se desplace hacia arriba.

Si tenemos un teclado de la siguiente manera:

<ul>
<li><a href="#ndo">º</a></li>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
...
</ul>

Lo que tendremos que hacer es darle a los li el estilo de bloque y float a la izquierda y los enlaces cuando esten activos cambiarles el estilo, así la tecla flotará sobre las otras:

ul {
clear: both;
}
li {
margin: 5px;
display: block;
width: 50px;
height: 50px;
float: left;
background: #008585;
text-align: center;
vertical-align: middle;
}
a {
background: #008585;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-family: Verdana;
font-size: 175%;
}
a:active {
display: block;
background: #E1E8CD;
color: #008585;
width: 100px;
height: 150px;
position: relative;
top: -100px;
left: -25px;
font-size: 275%;
}

Quien lo quiera probar en la Ipod o Iphone no le va a funcionar, ¿por?, pues no lo sé, quizas el Safari que lleva tiene alguna limitación, o simplemente en Safari no funciona, no lo sé, lo he probado en Firefox nada más.

Ejemplo

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

CSS Clean: optimiza tus CSS

ByLuis

cleancss.pngA la hora de crear nuestras hojas de estilos, podemos crear ficheros css que no sean del todo óptimos, ocupando más espacio de lo debido, entre otras cosas. Por ello CSS Clean nos ayuda a optimizar nuestros css de forma rápida y sencilla.
Basado en CSSTidy, existen varios niveles de compresión, permitiendo desde hacer el css algo ilegible, pero menos extenso, hasta una compresión personalizada, la cual permite quitar los últimos punto y comas, dejar los comentarios, eliminar las propiedades que no sean válidas para una versión de CSS.
Una aplicación que nos puede ser de mucha ayuda y que facilmente puede conseguir un ratio de compresión del 20%.
CleanCSS
Vía / dzone