css

Porcentaje de carga mediante CSS

ByLuis January 21, 2008

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:

<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

css

Invierte tu email mediante CSS para evitar el spam

ByLuis June 22, 2009

Curioso truco para evitar que los spammers lean tu email, ya que lo escribes al revés y mediante CSS lo inviertes.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Reverse Your Email with CSS and Prevent Spam

Vía / @jlantunez

Javascript

DLayer: script jQuery que nos ayuda a maquetar diseños

ByLuis July 16, 2010

Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.

La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.

Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.

Espero que os sea útil

jquery-dlayer

API

gotApi: colección de APIs

ByLuis November 6, 2006

Ya hace tiempo hablamos de una web de referencias para programadores, y como cuanta mÃ¡s variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasiÃ³n os mostramos un directorio de APIs, que accediendo a las pÃ¡ginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho mÃ¡s que va creciendo poco a poco.
Lo que mÃ¡s me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar tambiÃ©n en xulplanet.com.
gotAPI.com
VÃa / dzone

css | How to

21 cuestiones sobre block, inline y floating en HTML

ByLuis August 2, 2006

Una colecciÃ³n con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los mÃ¡rgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
VÃa / Pixel Groovy

css

Saltos de página en CSS

ByLuis January 8, 2008

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

css

CSSeasy: layouts CSS

ByLuis June 11, 2007

Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseÃ±o inicial de la estructura de la pÃ¡gina (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseÃ±os, 4 estÃ¡ticos y 4 fluidos. Siendo los 4 diseÃ±os para los dos diferentes tipos los siguientes: 1 columna sin navegaciÃ³n, 1 columna con navegaciÃ³n arriba, 2 columnas con navegaciÃ³n izquierda y 2 columnas con navegaciÃ³n derecha.

Lo que se echa en falta es una explicaciÃ³n mÃ¡s detallada, ellos recomiendan ver el cÃ³digo fuente y experimentar con Ã©l, el cÃ³digo estÃ¡ algo comentado, pero quizÃ¡s no sea necesario para gente que se estÃ© iniciando en el diseÃ±o web o que pasen de diseÃ±o con tablas a diseÃ±o sin tablas.
CSSeasy.com
VÃa / Digg

Similar Posts