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
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