Si les agradan los Menú animados para sus proyectos online, y específicamente el menú que vemos en el sidebar del sitio oficial de mootools, quizás este post Mootools animated sidebar menú les pueda ser útil. Es un tutorial del cual podremos descargar los ejemplos listos para ser usados en nuestros proyectos online. El pack de este menú basado en Mootools, contiene todo el código fuente, moofx.js y todo archivo que permitirá obtener los efectos visuales.
Si acabas de darle un nuevo aspecto a tu blog quizás debas dar un paseo por Flipmydesign una galería de diseños CSS que permite a los usuarios mostrar el talento creativo puesto en el rediseño de sus sitios. Un antes y un después en el diseño de tu blog. Para enviar nuestros diseños, simplemente deberemos dirigirnos a la opción Add your site, llenar el formulario y adjuntar una imagen de 550px por 377px de tu sitio con el aspecto de antes (before) y después (after). Una vez enviado, en el lapso de 48 horas nuestros diseños estarán online. Otro punto a favor de Flipmydesign, es que permite a todo diseñador poder exponer y promover sus trabajos con el fin de atraer nuevos clientes potenciales.
Enlace Flipmydesign
Seguramente recordaran este articulo Adornar nuestros títulos con CSS que escribimos hace meses atrás, una técnica muy sencilla que nos permitía mediante CSS hacer que nuestros títulos obtengan un estilo desgastado o degrade utilizando una imagen Gif en position: absolute y una etiqueta vacía < span >. Webdesignerwall me vuelve a recordar ese post, y si bien la técnica es prácticamente similar, aquí se utilizara una imagen PNG para crear textos con efecto gradientes, algo que será muy bueno, ya que estos degradados serán sin duda de mayor calidad, y lo mejor aun, es que se corregirán los errores que Internet Explorer nos pueda generar con este formato de imagen.
Todo lo que se necesitara es una etiqueta < span > vacía en el titulo, como hicimos anteriormente, y a la imagen de fondo aplicarle la superposición mediante css, lo que seria position: absolute para que flote sobre nuestro titulo.
USO:
Añadimos las etiquetas vacías
Y nuestro CSS:
Como IE6 no soporta correctamente las transparencias de los PNG-24 necesitaremos corregirlo, entonces añadimos el siguiente código dentro de la etiqueta < head > … < /head >
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
Accordion v2.0 una librería basada en prototype y scritpaculous que nos permitirá crear acordeones para nuestros proyectos online, y lograr con ellos resaltar ciertas secciones particulares en tales proyectos, mas haya del contenido que debamos introducir. Accordion v2.0 nos permite generar tanto acordeones Verticales como Horizontales y personalizarlos es realmente sencillo. Es muy liviano y en cuanto a efectos este acordeón, al igual que otros, son por lo general siempre bonitos. En el sitio encontremos un demo listo para descargar, utilizar y conocer su funcionamiento.
Enlace Accordion v2.0
Via feedmyapp
Facebox 1.0 un nuevo script basado jQuery que nos permitirá realizar agradables Lightbox. Los efectos de estos Lightbox es como solemos conocerlos, solo puede variar un poco en cuanto a diseño, pero los Lightbox siguen siendo Lightbox y los resultados siempre los imaginados. Aunque Facebox 1.0 nos permite resaltar algunos puntos interesantes o diferentes con respecto a otros, ya que puede ser implementado o utilizado en imágenes desde una sección o mediante la URL a una imagen en si. Pero algo que me ha agradado de Facebox es que nos permite capturar DIV que se encuentren en nuestra web, y mostrar el contenido de ese DIV en forma Lightbox.
Ver Demo - Descarga demo - Web Facebox 1.0 - Via informatica-practica
Uso
Descargamos el script Facebox 1.0 y jquery. Descomprimimos cada uno de los archivos y los alojaremos en nuestro servidor, posteriormente realizaremos la llamada a cada uno de ellos, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.
Implementar estos Lightbox en nuestro contenido es realmente sencillo, simplemente lo haremos usando el atributo rel=" facebox " donde deseemos dar los efectos.
Por ejemplo si deseamos que en una imagen cuando hagan click sobre ella se produzca efecto Lightbox, lo haremos de este modo.
Si lo deseamos hacer solo utilizando una url hacia una imagen.
Y por ultimo: Si deseamos crear una especie de galería, introduciremos un poco de CSS, y luego la estructura
li {
padding: 2px 5px;
}
#capturas a {
border: none;
}
#capturas img {
padding: 3px;
border: 1px solid #ddd;
background: #000;
}
La estructura: (que podran ver en el demo)
Ver demo - Descarga Ejemplo - web Lightview - via diariothc
Uso
Descargamos el script Lightview junto con prototype y scriptaculous. Alojaremos cada uno de ellos en nuestro host, posteriormente realizaremos la llamada correspondiente, introduciendo en nuestro encabezado, dentro de las etiquetas < head > …..< /head > el siguiente código.
Utilizarlo en nuestro blog: Lo haremos usando el atributo rel=" lightview ". También en el atributo "title" podremos agregar el titulo de la imagen junto a una breve descripción que ira luego de los dos puntos.
Ejemplo Utilizado en imagen individual
Para agrupar imágenes que luego podremos visualizar mediante el sistema de navegación que nos ofrece el mismo lightbox usaremos ' lightview[setname] '
Ejemplo
25 porfolios Minimalistas: Cssjuice nos muestra una bonita colección o selección de bellos porfolios con diseños minimalista. Sitios muy frescos o limpios y con una estructura muy agradable donde han decidió mostrar todo su porfolio como diseñadores. Los diseños minimalista bien trabajados son realmente bellos de ver online, no solo en blog personales sino también en porfolios o empresas online relacionadas al diseño, supongo que es uno de los motivos por los cuales la mayoría de los estudios prefieren diseños minimalista para sus Web, a su vez que con ello logran que los usuarios se concentren en sus diseños fácilmente.
18 Themes WordPress con diseño minimalista Free: Otra lista realizada por Cssjuice esta vez enfocada en Themes WordPress gratuitos con diseño minimalista. La lista podría ser enorme, y sin duda es difícil abarcarlos a todos, fuera de ellos esta selección de 18 themes es muy acertada.
25 diseños minimalistas Parte I by vandelaydesign: Este blog que conocí hace solo meses ha realizado una bonita recopilación de diseños minimalistas, seleccionado tanto blog personales como porfolios. La idea central de la selección ha sido ver como cada diseñador interpreta de formas diferentes el Significado Minimalista en sus diseños.
25 diseños minimalistas Parte II by vandelaydesign: Luego de unos meses de presentada la primera selección, han realizado otra recopilación tomando oros 25 diseños minimalistas tan agradables como la primer entrega. Si figura unos de tus diseños, pues, felicidades.
CSS-website es un sitio que no puede faltar en este post. CSS-website es una galería de diseños para inspirarnos a la hora de crear diseños minimalistas. CSS-website solo selecciona diseños simples, limpios (minimalistas) para incluir en la galería, algo que es toda una ventaja si necesitamos ver ejemplos o bellas técnicas. De todas formas encontraremos diseños con diversos tonos, mas haya del blanco, pero siempre respetando la base del sitio, diseños muy minimalista. Si aun no lo conocían, creo que es hora de hacerlo.
Saliendo un poco de lo Minimalista pero si un artículo muy recomendable, encontramos el Top 50: blogs de diseño en español, una bonita recopilación de sitios Web en español con una temática muy similar a xyberneticos, Diseño, desarrollo y demás cositas que seguramente serán de tu agrado. Ulises (el50) se ha tomado todo el trabajo de recopilar, lo que el llama el TOP 50 de blog en español sobre esta temática. Desde ya, es un agrado que en esta lista xyberneticos figure. Si desean conocer nuevos blog para recomendar a amigos, los invito a visitar cada uno de los blog incluidos.
COPASO en una nueva herramienta online presentada en Colourlovers. COPASO Básicamente nos permitirá editar o mejor dicho generar nuestras propias paletas de colores en simples pasos y bajo un entorno muy agradable. Tan simple como ir arrastrando nuestro ratón por el casillero de los tonos, e ir guardándolos uno a uno en un recuadro destinado a ello. COPASO automáticamente nos generara los códigos HEX, RGB y demás de ese color en particular, y cada una de las paletas generadas por nosotros podrán ser guardadas, para en el futuro volver a editarlas. Si acostumbras a usar una aplicación en tu ordenador para este tipo de cosas, y de la cual estas conforme, COPASO posee una ventaja. Cuando debas formatear tu disco duro, tus paletas de colores están muy bien guardas en tu cuenta online bajo COPASO y podrás acceder a ellas vayas a donde vayas, y suceda lo que suceda en tu ordenador.
Enlace COPASO
Via Cosas Sencillas
Siguenos desde tu lector de feeds favorito.
Recibe los artículos en tu casilla de correo electrónico.
Set de Iconos para organizar todos tus archivos WP en tu ordenador Formato .Ico y Png
Set de Iconos con estilo Jeans, para resaltar los RSS de tu blog. Formato Png y en varios Px
Set de Iconos para tus RSS inpirados en la Marca Levis. Formato Png y en varios Pixeles.
