junio 14, 2008
Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:
a[href $='.pdf'] {padding-right: 20px;background: url(icono-pdf.gif) no-repeat right;}
Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librerÃa jQuery.
- Descargamos la librerÃa y hacemos el llamado entre las etiquetas <head> y </head>.
<script type="text/javascript" src="jquery.js"></script> - Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana.
<script type="text/javascript">$(document).ready(function(){ //Definición de clases para cada tipo de archivo. $("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass("zip"); $("a[@href$=doc]").addClass("doc"); //Estilos y atributos a los enlaces externos. $("a:not([@href*=http://blogandweb.com])").not("[href^=#]") .addClass("externo") .attr({ target: "_blank" }); });</script> - Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique:
.pdf {padding-left: 20px;background: transparent url(icono-pdf.png) left top no-repeat;} .zip {padding-left: 20px;background: transparent url(icono-zip.png) left top no-repeat;} .doc {padding-left: 20px;background: transparent url(icono-doc.png) left top no-repeat;} .externo {padding-left: 20px;background: transparent url(icono-ext.png) left top no-repeat;}Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.
- Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo:
<div id="enlaces"> <p><a href="documento.pdf">Archivo PDF</a></p> <p><a href="documento.zip">Archivo ZIP</a></p> <p><a href="documento.doc">Archivo DOC</a></p> <p><a href="http://btemplates.com">BTemplates - enlace externo</a></p> <p><a href="http://serturista.com">Ser Turista - enlace externo</a></p> <p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p> <p><a href="#enlaces">Enlace local #</a></p></div>
junio 14, 2008
Para hacer un sitio web o un blog más dinámica es necesario darle control al usuario. Control como el hecho de decidir que quiere elementos quiere ver y cuales no y se lo podemos otorgar gracias jQuery y un sencillo script gracias a Web desginer wall.
El script y la librerÃa te permitirán hacer desaparecer cualquier elemento de la página al cliquear en un botón. Por ejemplo, podemos colocar una nota en la barra lateral de la página con un aviso y colocar un botón para que desaparezca si le estorba al lector. (Ver demo)
- Como siempre, lo primero es descargamos la librerÃa y hacemos el llamado entre las etiquetas <head> y </head>.
<script type="text/javascript" src="jquery.js"></script> - Enseguida después del llamado, agregamos la función que usa la librerÃa y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).
<script type="text/javascript">$(document).ready(function(){ $(".contenedor .eliminar").click(function(){ $(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow"); }); });</script> - Ahora solo hay que usar las clases del script en la estructura html.
<div class="contenedor"> <h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p><a href="">Regresar al tutorial</a></p> <img src="eliminar.png" alt="cerrar" class="eliminar" /></div> - Y darle estilo a cada clase, es decir, al contenedor y al botón con los respectivos atributos generales.
.contenedor { margin:20px auto; background:#F5E38E; border:2px solid #EBCA4F; padding:10px; width:500px; position:relative;}.contenedor .eliminar { position: absolute; top: 10px; right: 10px; cursor: pointer;}h2 { color:#ff0000; font-size:15px; }p { font-size:11px; padding: 0 0 11px; color:#333; }a { color:#ff8400; }body { font-family:verdana, arial; }
Las posibilidades son muchas y de hecho este es en esencia el mismo funcionamiento que tienen los menús de pestañas (tabs).
junio 14, 2008
El proceso de maquetación de un sitio web es de los que requieren mayor cuidado, pues determinara la distribución de elementos y la visualización de la página web a diferentes resoluciones de pantalla y en distintos navegadores.
Para ayudar con este proceso, Yahoo! lanzo una pequeña pero práctica aplicación en linea para generar nuestro layout o maqueta de forma rápida y además compatible con varios navegadores: CSS Grid Builde.
Su interfaz es simple y limpia, para usarlo sólo hay que ir agregando columnas laterales y de contenido, cabecera y pié de página y el CSS Grid Builder se encargara de generar todo el código (x)html y css listo para usarlo como base en tu diseño.
Sitio: developer.yahoo.com
junio 14, 2008
Como todo conocimiento práctico, a través de la experiencia se adquieren “mañas” para mejorar nuestro rendimiento y hacer de mejor forma una actividad especifica. El CSS no es la excepción y si quieres apresurar la adquisición de esta experiencia, sin duda la recopilación hecha por noupe puede ser de gran ayuda, en ella se listan las técnicas CSS más comunes y eficientes para solucionar problemas propios del diseño web, tales como: crear cajas con esquinas redondeadas, sustituir texto con imágenes, manejo de flotación de elementos, menús de navegación, sombra en las imágenes, etc.
Es la primer parte, asà que habrá que estar atento a la siguiente.
101 Técnicas CSS de todos los tiempos: Primera parte | Segunda parte
junio 14, 2008
Las especificaciones para CSS3 traen consigo interesantes caracterÃsticas, entre ellas, la posibilidad de modificar el color del texto cuando es seleccionado (por defecto azul) por medio del pseudo-elemento “selection“. Su forma de aplicación es sencilla, por ejemplo, para aplicarlo al texto de toda la página se tiene:
/* Para Safari */::selection {background: #ccc;}
/* Para Firefox */::-moz-selection {background: #ccc;}
Y claro, también se puede aplicar a selectores y clases, por ejemplo para el selector “p” usual en el cuerpo de la entradas:
p.post-body:selection {background: #ccc;}
p.post-body:-moz-selection {background: #ccc;}
Solo hay que tener en mente que las pseudo-clases, por ahora, solo son soportadas por los navegadores más modernos como firefox o safari.
demo | vÃa: css-tricks / intenta
Subscribe/Search
Sponsors
Entradas Recientes
Botones Twitter
