css

Gráficas mediante CSS

ByLuis April 10, 2007

Una buena colecciÃ³n de herramientas para generar grÃ¡ficas (de barras, progreso, de tarta, …):

Ajax MGraph: desarrollado en XHTML u CSS, es una grÃ¡fica interactiva que funciona en Firefox, IE y Opera. Incluye integraciÃ³n PHP y de la base de datos.
PlotKit: grÃ¡fica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
CSS Javascript Bar Charts: grÃ¡fica de barras sencillo.
Vertical Bar Graphs with CSS and PHP: grÃ¡fica de barras con CSS y PHP.
CSS For Bar Graphs: grÃ¡fica de barras usando los tanto por ciento que ofrece CSS.
CSS Vertical Bar Graphs: grÃ¡fica de barras de forma sencilla.
Displaying Percentages with CSS: barra de progreso mediante CSS.
Dynamic Pie Chart with CSS: grÃ¡fica de tarta dinÃ¡mica.

10 Free CSS Graph Resources

VÃa / Intenta

Javascript

$fx(): librería javascript para animaciones

ByLuis January 16, 2009

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

css

Comprender el posicionamiento con CSS en 10 pasos

ByLuis March 30, 2006

Una forma sencilla de mostrar las distintas formas de posicionamiento mediante CSS: position:static, position:relative, position:absolute y float.
Learn CSS Positioning in Ten Steps
Vía / Vecindad Gráfica

css | Grafismo | XHTML

Cómo crear márgenes según un contorno

ByLuis April 3, 2006

Hace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.

Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.

css | Laboratorio

Laboratorio: mostrar que thumbnails has visitado

ByLuis March 23, 2007

Una de las cosas que mÃ¡s me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaÃ±o original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

Para hacerlo es sencillo, creas una capa con un tamaÃ±o especÃfico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que serÃ¡ el thumbnail en sÃ.

Dentro de la capa incluyes un enlace que se mostrarÃ¡ como un bloque (display: block) y que no mostrarÃ¡ nada, bueno, en este caso si mostrarÃ¡ un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verÃ¡, esto lo hacemos asÃ para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}

<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo

css | Javascript

CSSUtilities: librería Javascript para obtener datos CSS

ByLuis April 9, 2010

CSSUtilities es una librería que permite entre otras cosas:

encontrar todos los estilos que aplican a un elemento
indica qué estilo es propio y cuál heredado
soporta el estándar de la W3C y las propias de Internet Explorer
admite CSS1, CSS2 y CSS3

Algo muy parecido a lo que nos ofrece Firebug

CSSUtilities

Vía / DZone

css | How to | PHP

Selecciona tu hoja de estilos mediante PHP

ByLuis August 29, 2006

En 456 Berea Street nos muestran una forma muy interesante para poder mostrar tu pÃ¡gina con diferentes hojas de estilo. Tiene el inconveniente de que solo admite dos estilos entre los que elegir.

Funciona aunque el javascript estÃ© desactivado, pero no cuando estan desactivadas las cookies, pero no darÃa error, tan solo visitarÃamos siempre la misma pÃ¡gina.

El funcionamiento es sencillo, disponemos de dos directorios, cada cual con las hojas de estilo que nos interesa. HabrÃ¡ un enlace a una pÃ¡gina que cuando accedemos a ella nos cambiarÃ¡ de directorio, guardarÃ¡ el valor en una cookie y nos devolverÃ¡ a la pÃ¡gina a la pÃ¡gina desde la que hemos hecho la llamada o a la raÃz si no existÃa esa pÃ¡gina. Y luego en cada pÃ¡gina deberemos obtener el valor del directorio de las cookies y usarlo para recuperar la hoja de estilo correspondiente.

El script que se encarga de cambiar de directorio es el siguiente:

<?php
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";
setcookie("layout", $layout, time()+31536000, '/');
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";
header("Location: $ref");
?>

Y luego en cada pÃ¡gina tendremos que incluir lo siguiente:

Para recuperar el directorio.

$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";

Para seleccionar el estilo correcto.

<style type="text/css" media="screen,projection">
@import '/css/<?php echo $layout; ?>.css';
</style>

Build your own PHP style sheet switcher

Similar Posts