Si hay algo que me apasiona además del diseño gráfico es “Cssâ€, aunque si nos ponemos a pensar, para lograr manejar correctamente este lenguaje hay que ser muy creativo y saber diseñar de la mejor forma la hoja de estilo, por lo tanto yo creo que cualquier persona que sepa utilizar este lenguaje de algún modo es un diseñador.
Si tienes ganas de convertirte en un “diseñador Css†o te gustarÃa perfeccionarte en distintos aspectos sobre este hermoso lenguaje, aquà tienes una recopilación de 92 tutoriales y recursos que te serán muy utiles.
Menus & Buttons
El propósito de esta entrada es demostrar el poder que CSS tiene y que sinceramente no aprovechamos. Quiza sea algo difÃcil, pero creanme que vale la pena terminar y ver algo que funciona en casi cualquier ordenador sin importar su navegador, soporte de CSS, resolución, etc…
This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu…
Is there any harm in documenting a seemingly rudimentary and obvious CSS technique? I tend to think not, and so the following may (or may not) turn out to be enlightening for you, depending on the level of your CSS-ness…
…Seguir leyendo
Gracias a este sencillo/liviano script (1KB) en el menú central del blog funciona el efecto hover en cualquier navegador que se imaginen, y en esta entrada les enseñare como hacerlo.
Si ustedes saben ingles pueden acceder aquà tienen el link hacia el sitio oficial donde enseñan como emplearlo, pero si no saben pueden seguir con mi explicación: Me gustarÃa señalar que con este poderoso script seremos capaces de añadir el estado Hover a cualquier elemento (y sin perder la valides del código, tanto Html como Css), lo primero que debemos hacer es insertar este el script en nuestro Head, entre las etiquetas head /head:
sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Como verán …Seguir leyendo
Muchas veces cuando tengo tiempo libre o tengo ganas de llenar mi cabeza con cosas nuevas suelo visitar esta clase de sitios, en lo personal me resulta una gran fuente de inspiración y aprendizaje. Como todos sabemos existen miles de sitios de este tipo, pero para este artÃculo compile los que mas visito.
La colección esta dividida en 2 grandes grupos: Web y Gráfico. También encontraran un pequeña intro de cada sitio para orientarse mejor.
Web
Esta fue la primer galeria que empeze a leer, con actualizaciones diaras y un exlente material.
Esta galeria me gusta mucho, y se distingue por mostrar diseños unicamente del mundo oriental.
Enorme galeria de sitios Flash con un nivel increible, reconocida muldialmente.
…Seguir leyendo
Antes de comenzar a preparar la programación, debemos tener preparado el layout en donde ubicaremos nuestras tabs para asà poder mostrar el contenido deseado. Para ello será necesario descargar el siguiente archivo: [Descargar – 3,04KB] es un archivo comprimido con extensión .rar, dentro encontraremos el domtabs.html, style.css, domtab.js [pagina oficial] y la imagen utilizada de fondo.
Tut: ArtÃculos destacados y ArtÃculos recientes separados en tabs en wordpress
Explicación del CSS: aquellas personas que ya tengan conocimientos de CSS pueden saltearse esta parte, ya que es puramente explicativa y no hace falta leerla para llevar a cabo el tutorial.
Abrimos el archivo style.css, en primer lugar nos encontraremos con un Mini reset:
/* Mini Reset */
* { margin:0; padding:0; } /* Normalizamos todos los margenes y paddings del sitio*/
body { background:#fff; font-family: Tahoma, Geneva, Arial, Verdana; font-size:11px; }/* Fondo del sitio color blanco, font: Tahoma y 11px de tamaño */
a { outline-style:none; text-decoration:none; } /* Links sin bordes ni subrayado */
/* ******* */
…Seguir leyendo
Con bien lo indica el tÃtulo, este post ira dedicado a los nuevos aspectos que encontraremos en la nueva versión de wydblog.
Primero y principal cabe destacar que uso wordpress. El nuevo diseño es súper liviano, aproximadamente lleva unas 7 u 8 imágenes, de las cuales la mas pesada (el logo que ven arriba a la izquierda) pesa 5,76 KB, todo lo demás esta hecho en CSS y es perfectamente funcional en Firefoxs, IE 6, IE 7, Safari, etc. y para el correcto funcionamiento del mismo, no es necesaria la instalación de ningún plugin.
Nuevas Herramientas y apartados
DOMtabs es un sistema de tabs mediante CSS y la librerÃa DOMscripting. Luego de probar varias tabs en jquery o mootools, no termine de convencerme, ya que estas presentaban algunas incompatibilidades con wordpress, como por ejemplo el mal funcionamiento de algún plugin o algo por el estilo, también eran un poco pesadas.
Luego de probar DOMtabs me di cuenta que era lo que buscaba, y después de modificar el “único†script (un archivo javasctipt) que hace falta para hacerlo funcionar, puede tener unas tabs perfectamente compatibles con wordpress y todos los navegadores, por tan solo 5 KB y un poco de CSS. [Demo - Descarga]
*Nota: En próximos post explicare a modo tutorial como hacer las tabs que tengo en el sidebar, junto con el script de 5 KB.
…Seguir leyendo
Después de mucho tiempo sin escribir nada, sentà que era una pena dejar de lado todo esto. Tras pensar un buen rato, llegue a la conclusión de que lo mejor seria reconstruir el blog y comenzar todo de cero nuevamente, pero ¿porque todo de nuevo?, en realidad tengo el backup de la base de datos anterior, y pienso ir re-subiendo aquellos post que realmente valen la pena leerlos… pero aparte de eso, el blog comenzarÃa de cero, con un “nuevo diseño†(atención, esta preparado para estar lleno de contenido, por ese motivo ahora puede verse un poco extraño), una orientación un poco distinta a la anterior y nuevos aspectos que buscan facilitar/mejorar el uso de Wydblog.
Imagen cortesia de http://cabel.name
…Seguir leyendo
El otro dÃa me puse a pensar que es lo que prefiero a la hora de diseñar mis webs, entonces recurrà a la memoria y comencé a pensar como habÃa empezado todo… Fue una tarde de lluvia (no me acuerdo muy bien el dÃa) que decidà bajarme el famoso editor de páginas web: Dreamweaver 7.0. Al abrir por primera vez el programa, me di cuenta, que iba a ser más costoso de lo que creÃ, luego de varios dÃas de leer por doquier: tutoriales, códigos, tips, etc. Comencé a entender el amistoso Html y su funcionamiento, con mis nuevos conocimientos adquiridos decidà hacer mi primera página de práctica, maquetada al 100 x 100 con tablas xD (en aquel entonces no tenia idea del mágico Css).
Continuando con mi incursión en este nuevo mundo decidà probar suerte en otras áreas,
Asà fue como conocà las Cascading Style Sheets (Css), al principio no me gusto nada la idea de tener que estructurar una web enteramente con div´s, resulto muy difÃcil al principio y me trajo muchos problemas, pero con el tiempo uno se acostumbra y llega a amar a estas hojas de estilo.
La historia todavÃa no se acaba aun, un buen dÃa un amigo me dice: “Lucas, tu pagina se ve horrible en Firefoxs…†y yo pensé: ¿Qué es eso?… lo primero que hice en ese momento fue bajarme el preciado navegador (el cual ahora uso todos los dÃas, sin falta alguna) y visitar mi pagina a través de él, me di cuenta que mi pagina tenia muchos errores no detectados por el #$%â€Â¡/% IE pero si por MF, asà comenzó mi odio por el Internet Explorer (creo que a todos nos debe haber pasado lo mismo).
Siguiendo mi incursión por nuevos mundos, decidà investigar sobre la programación, ya que me sentÃa muy limitado al no poder implementarla en mis páginas, entonces comencé a leer sobre el Php y su base de datos Mysql, asà fue como me baje mi primer Localhost y mis primeras bases de datos aparecieron.
Me sentÃa muy contento con mis conocimientos, pero seguÃa faltando algo… “El diseñoâ€, no tenia idea de como hacer un botón en PSD, una cabecera animada en Flash, una presentación interactiva… ni siquiera un “simple degradado de fondoâ€, es decir, no sabia nada. Entonces decidà bajarme el FireWorks 7.0, el cual me fue muy sencillo de aprender a usar e implementar en las webs, sin embargo, seguÃa limitado en ese aspecto, ya que el FireWorks no te ofrece tantas herramientas como el PSD o el AI, sin quedarme de brazos cruzados, me baje aquellos programas junto con el Flash 8 y aprendà a usarlos, no a la perfección, pero me siento capacitado como para hacer un degradado xD.
…Seguir leyendo
Agregar a Google Reader
Agregar a My Yahoo!
Agregar a Bloglines
Agregar a Netvibes
Agregar a Delicious
