|

30 scripts para galerías, presentaciones y lightboxes

ByLuis

Una gran colección de scripts que nos ayudarán a incluir nuestras galerías de fotos, presentaciones y lightboxes. 30 scripts en total, organizadas por:

  • Galerías y lightboxes en Ajax.
  • Galerías de imágenes basadas en Ajax.
  • Galerías CSS+Javascript.

De las 30 me gustaría destacar unas cuantas que son las que más me han gustado:

  • JonDesign’s SmoothGallery : usando mootools v1.0 para su desarrollo, se trata de un script de tan solo 16k, que añade fade, transparencias, thumbnails, vistas preliminares y todo ello con un diseño muy sencillo y llamativo.galeria1.png
  • Couloir.org: otra galería de imágenes en forma de presentación, con fade, redimensionamiento de la ventana y sonido.galeria2.png
  • Lightbox2: uno de los mejores y de los más conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imágenes.galeria3.png
  • TripTracker: muy parecido a los anteriores, en este caso permite también acceder a la primera y última y enviar por email la ruta de la imagen en cuestión.galeria4.png
  • Cross Browser Multi-Page Photograph Gallery: Increible galería basada totalmente en CSS de la que ya hemos hecho referencia anteriormente, pero que siempre merece una mención.galeria5.png

30 Scripts For Galleries, Slideshows and Lightboxes

Similar Posts

|

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

$fx(): librería javascript para animaciones

ByLuis

$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

| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

12 técnicas básicas de plantillas CSS

ByLuis

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorías, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
csstemplates.png
Se pueden descargar los diseños cuando los visualizas.
12 Basic CSS Templates
Vía / Digg

|

Crear nuestros propios checkboxes y radio buttons mediante CSS

ByLuis

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}

Y por último, los estilos para los distintos estados del input son los siguientes:

input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}

Styling Checkbox and Radio Graphics With Only CSS

Vía / Digg