Sin CSS estábamos limitados a poner colores e imágenes de fondo solo en el cuerpo de la web y en tablas. Ahora con CSS, podemos aplicar tanto una imagen de fondo como un color de fondo a prácticamente cualquier elemento de nuestra web.
Lo más sencillo es poner un color de fondo, por ejemplo, si tenemos un texto marcado en negrita y queremos ponerle un color de fondo azul haremos:
<strong style="background-color: #3333FF">Texto en negrita</strong>
Pero no estamos limitados a un color de fondo, también podemos poner una imagen:
<strong style="background-image: url(imagen.jpg)">Texto en negrita</strong>
Para que funcione este código el archivo "imagen.jpg" debe estar en el mismo directorio que el archivo .html.
También podemos manipular el fondo, podemos hacer que esté alineado a la izquierda y que no se repita. Aunque esto lo probaremos en una celda, para poder verlo mejor:
<table>
<tr> <td height="50" style="background-image: url(imagen.jpg); background-repeat: no-repeat; background-position: left;">Fondo</td> </tr> </table>
El fondo no se repetirá y estará alineado a la izquierda. Todo lo que hemos visto aquí también lo podemos aplicar a campos de un formulario o a cualquier otra etiqueta.
|
Mostrando entradas con la etiqueta Código CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta Código CSS. Mostrar todas las entradas
viernes, 21 de octubre de 2011
Poner fondo a cualquier elemento con CSS
Personalizando las barras de scroll del navegador en CSS
A partir de la version 5.5 el navegador de internet mas utilizado en el mundo "Internet Explorer" soporta la personalizacion de sus barras de scroll, mediante hojas de estilo podemos obtener barras realmente atractivas, aqui un ejemplo...
Estas barras siguen funcionando igual que las anteriores lo unico que se modifica es su aspecto, veamos como llegamos a esto...
<style type="text/css">
Este codigo hay que insertarlo entre las etiquetas HEAD o en la hoja de estilo que utilizemos, ahora explicaremos que significa cada item...
Es complicado explicar cada item, lo que te recomiendo es que vayas cambiando los valores de los colores y que pruebes como va quedando.
|
Filtro para invertir CSS
Filtro de imágenes mediante CSS: Flip
Este es un efecto curioso. Permite mostrar imágenes y texto invertidos horizontal o verticalmente.... ¿Quieres ver Google del revés? Aplicar este filtro es muy sencillo ya que no posee parámetros. Para aplicarlo a una imagen sólo debemos insertar el siguiente código en nuestra página
<img src="miimagen.gif" style="FILTER: FlipH">
En este caso la imagen aparecería invertida horizontalmente (FlipH) si deseamos que aparezca invertida verticalmente deberemos substituir FlipH por FlipV
¿Como conseguimos girar la imagen horizontal y verticalmente a la vez?.
Para ello hemos creado una tabla en la que cada imagen ocupa una celda y en la celda inferior derecha hemos aplicado el filtro FlipH y a su vez a la imagen contenida en esa celda le aplicamos el filtro FlipV con lo que conseguimos dos inversiones:
<td style="Filter: FlipH"><img src="miimagen-gif" style="FILTER: FlipV"></td>
Este efecto también puede aplicarse a un texto (tanto FlipH como FilpV). Sólo hay que tener en cuenta que en el estilo tambien debemos definir el ancho es decir que esto:
<P style="width: 300px; Filter: FlipH">Este es un texto escrito
como normalmente se escriben los textos y nuestros teclados lo permiten, pero se visualiza invertido horizontalmente. Vamos que es un lío intentar leerlo.</P> |
Enlaces que simulan botones en CSS
Hacer un botón con CSS sin utilizar formularios, simplemente con enlaces que se comportan visualmente como botones.
En este taller de CSS vamos a mostrar cómo realizar un enlace que tenga aspecto de botón. Dicho de otra manera, vamos a crear botones a partir de enlaces, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a como serían los botones. Para ello, vamos a hacer que, al pasar el ratón por encima de un enlace, este parezca como que está pulsado.
El código HTML
Vamos a partir básicamente de un enlace, al que asignaremos una clase definida con CSS. Como los estilos los vamos a aplicar con CSS, el enlace es tan sencillo como este:
<a href="#" class="enlaceboton">Hola!!</a>
El código CSS
Vamos a definir la clase "enlaceboton", que es el estilo que se ha asignado para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado.
.enlaceboton { font-family: verdana, arial, sans-serif;
font-size: 10pt; font-weight: bold; padding: 4px; background-color: #ffffcc; color: #666666; text-decoration: none; } .enlaceboton:link, .enlaceboton:visited { border-top: 1px solid #cccccc; border-bottom: 2px solid #666666; border-left: 1px solid #cccccc; border-right: 2px solid #666666; } .enlaceboton:hover { border-bottom: 1px solid #cccccc; border-top: 2px solid #666666; border-right: 1px solid #cccccc; border-left: 2px solid #666666; }
En principio, con la clase .enlaceboton se han definido estilos para cualquier estado del enlace. Después, para los diferentes estados del enlace se han definido sus correspondientes estilos, que son el mismo para los estados visitado y no visitado y diferentes para el estado hover, que es el que se aplica cuando está el ratón sobre el enlace.
|
Colores en CSS
Background y colores de fondo
En código HTML, el fondo se lo aplicamos dentro del <BODY> mediante los atributos bgcolor y background para asignar al fondo una imagen gif o jpg.
Las especificaciones de las CSS introducen importantes novedades respecto a los colores a aplicar en las páginas web.
Atributo color
El atributo color define el color del texto del documento (no se debe confundir con el color de background) tanto mediante los nombres de los colores en inglés: black, silver, gray, white, red, blue, etc) y con los códigos hexadecimales.
Atributo background-color , background-imagen
Este atributo de background-color determina el color de fondo, el atributo background-image, tiene una función similar al background="imagen.gif" de HTML clasico, invocando una imágen en formato GIF o JPG cargada en la css.
El atributo background-repeat, permite repetir la imágen de fondo tal y como sucede con la marca BODY de HTML
.
Puede asumir distintos valores:
|
Cambiar el color de los enlaces con CSS
HTML nos permite cambiar los colores de los enlaces en la etiqueta body, pero estos colores quedarán así para toda la web y no podremos cambiarlos. Gracias a CSS esto ya no es así, podremos cambiar el color de todos los enlaces que queramos. Veamos como:
Entre <head> y </head> pondremos:
<style type="text/css">
a:link { color: red; } .especial:link { color: green; } </style>
Con este código, los enlaces normales aparecerán rojos y los que queramos que aparezcan verdes, los pondremos con la clase "especial". Ejemplo:
Esto es un enlace normal y esto es un enlace especial
También podemos definir los colores para active, visited y hover utilizando a:active, a:visited y a:hover respectivamente.
|
jueves, 20 de octubre de 2011
Cambiar la apariencia del cursor con CSS
| Podemos modificar la apariencia del cursor cuando éste se desplaza sobre un vínculo, texto, imágen ... integrando el atributo <style> en la etiqueta del componente. <A HREF="www.arc3d.net" style="cursor:hand"> Estos son los diferentes tipos de cursores que se pueden utilizar: default (flecha) crosshair (cruz) e-resize (flecha que apunta a la derecha) hand (mano) help (signo de pregunta) move (cruz con flechas en los extremos) n-resize (flecha que apunta hacia arriba) ne-resize (flecha que apunta al noreste) nw-resize (flecha que apunta al noroeste) pointer (mano) s-resize (flecha que apunta hacia abajo) se-resize (flecha que apunta hacia el sudeste) sw-resize (flecha que apunta hacia el sudoeste) text (I-beam) w-resize (flecha que apunta a la izquierda) wait (reloj de arena) Igual que con todas las propiedades CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo. A todo el documento <html> <title>Cambio de cursor</title> <head> <style type="text/css"> <!-- body {cursor: hand} --> </style> </head> <body> Hola mundo! </body> </html> A partes del documento <html> <title>Cambio de cursor</title> <head> </style> </head> <body> <A HREF="www.arc3d.net" style="cursor:hand">Arc 3D</a> </body> </html> Usar un cursor presonalizado <html> <title>Cambio de cursor</title> <head> <style type="text/css"> <!-- body {cursor : url("salta.cur")} --> </style> </head> <body> Hola mundo! </body> </html> |
Bisel exterior con CSS
Cómo aplicar un efecto de bisel en una capa?.
Para los que recién se inician en CSS o para los que necesitan refrescar la memoria; las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo. Para lograr que el efecto funcione hay que definir algunas propiedades: * Position * Background * Width * Top * Left Position contendrá el valor "relativo" que nos permitirá cambiar el valor de Top y Left. Background será definido en dos oportunidades y contendrá el color de base y el color de sombra. Width contendrá el ancho de la capa.
Top y Left serán definidos en dos oportunidades y contendrán los valores de posición de la capa base y capa sombra
Para lograr el bisel exterior puedes copiar el siguiente ejemplo: <html> <head> <style type="text/css"> body {background:#626262} #sombra {position:relative; background:black; width:100%; top:-1px; left:1px} #base {position:relative; background:#D7D7D7; top:-1px; left:-1px;} </style> </head> <body> <div id="sombra"> <div id="base"> </div> </div> </body> </html> |
miércoles, 19 de octubre de 2011
Texto parpadeante en CSS
Este ejemplo nos remonta a las primeras épocas de Internet en donde tener un sitio web ya no era sólo para un grupo selecto.
Las primeras páginas personales se daban a conocer con un diseño muy pobre (acorde con los recursos disponibles de ese entonces). Los documentos mostraban solamente texto, provocando el aburrimiento del usuario; es entonces cuando se daba a conocer el tag blink, una solución bastante fácil de implementar que aportaba dinamismo al sitio y llamaba la atención de los lectores.
Como todos sabemos la tecnología y los recursos siguieron avanzando y el tag blink fue uno de los primeros elementos HTML que se dejaron de usar.
Actualmente muy pocos navegadores lo soportan, entre ellos Firefox y Mozilla.
<style type="text/css"> |
Botones con CSS
Hacer un botón con CSS sin utilizar formularios, simplemente con enlaces que se comportan visualmente como botones.
En este taller de CSS vamos a mostrar cómo realizar un enlace que tenga aspecto de botón. Dicho de otra manera, vamos a crear botones a partir de enlaces, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a como serían los botones. Para ello, vamos a hacer que, al pasar el ratón por encima de un enlace, este parezca como que está pulsado.
El código HTML Vamos a partir básicamente de un enlace, al que asignaremos una clase definida con CSS. Como los estilos los vamos a aplicar con CSS, el enlace es tan sencillo como este: <a href="#" class="enlaceboton">Hola!!</a> El código CSS Vamos a definir la clase "enlaceboton", que es el estilo que se ha asignado para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado. .enlaceboton { font-family: verdana, arial, sans-serif; font-size: 10pt; font-weight: bold; padding: 4px; background-color: #ffffcc; color: #666666; text-decoration: none; } .enlaceboton:link, .enlaceboton:visited { border-top: 1px solid #cccccc; border-bottom: 2px solid #666666; border-left: 1px solid #cccccc; border-right: 2px solid #666666; } .enlaceboton:hover { border-bottom: 1px solid #cccccc; border-top: 2px solid #666666; border-right: 1px solid #cccccc; border-left: 2px solid #666666; } En principio, con la clase .enlaceboton se han definido estilos para cualquier estado del enlace. Después, para los diferentes estados del enlace se han definido sus correspondientes estilos, que son el mismo para los estados visitado y no visitado y diferentes para el estado hover, que es el que se aplica cuando está el ratón sobre el enlace. |
martes, 18 de octubre de 2011
Texto en vertical usando CSS
| Nuevo atributo CSS para poner un texto que se pueda leer en vertical en nuestro documento HTML.
Junto con CSS3 llegan nuevos atributos para aplicar a nuestros documentos html.
Este es el turno de presentar writing-mode, que permite enderezar un texto en dirección vertical. Lamentablemente el único explorador en soportarlo es Internet Explorer, por eso ten precaución en su uso. <style> #textovertical {writing-mode: tb-rl; filter: flipv fliph} </style> Actualmente utilizando CSS no podremos solucionar este problema de una manera adecuada para todos los entornos. Dado que este ejemplo sólo funciona con Internet Explorer, otros navegadores como Firefox u Opera verán el texto en horizontal. Si nuestro diseño es muy preciso, seguramente no podamos utilizar este ejemplo, porque si el texto aparece unas veces en hortizontal y otras en vertical, seguramente acabe descuadrándo la página. Una posible solución a este problema sería guardar el texto como una imagen, modificarla con Photoshop o con cualquier otro programa de este tipo, para colocar el texto en vertical. Luego habría que añadirla a la web tal como cualquier otra imagen. De esta forma el texto quedaría en vertical del mismo modo que con CSS y funcionaría en todos los navegadores. |
domingo, 16 de octubre de 2011
Efecto de sombra con CSS
Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada.
He encontrado 3 métodos distintos para hacer un efecto de sombra. Son los siguientes, que veremos comentados en este artículo:
Método Background color
Este método es bastante simple. Se basa en definir tres cajas trasladadas, con diversos colores de fondo. Los elementos con las clases "blur" y "shadow" se definirán con tonos grisáceos para crear el efecto de sombreado. Código HTML: <div class="blur"> <div class="shadow"> <div class="content">bla bla</div> </div> </div> Código CSS: .blur{ background-color: #ccc; /*shadow color*/ color: inherit; margin-left: 4px; margin-top: 4px; } .shadow, .content{ position: relative; bottom: 2px; right: 2px; } .shadow{ background-color: #666; /*shadow color*/ color: inherit; } .content{ background-color: #fff; /*background color of content*/ color: #000; /*text color of content*/ border: 1px solid #000; /*border color*/ padding: .5em 2ex; } La única desventaja de este método es que usa colores definidos para las sombras y ello puede dar lugar a que no se pueda mezclar este efecto con otros elementos. Con un fondo blanco, las sombras en grises quedan bien, pero pongamos el caso de que el fondo de la página fuera de color rojo. Entonces el efecto de sombreado debería realizarse con tonos rojos oscuros. Podemos ver el ejemplo en funcionamiento en una página aparte. Método canal alpha Este método es muy parecido al anterior, pero soluciona el problema de mezclarse con otros elementos. Es indiferente cual sea el fondo de la página donde se va a mostrar el elemento sombreado, incluso si el sombreado se realiza en la misma página sobre distintos fondos. Utiliza imágenes de fondo en formato PNG "alpha transparentes", en lugar de colores definidos en la hoja de estilo. El código HTML necesario es el mismo que para el ejemplo anterior, simplemente debes modificar el código CSS, en concreto para las clases "blur" y "shadow". Mostramos el código CSS para este ejemplo. <style type=text/css> .blur{ background: transparent url(shadow1.png); /*ruta para el 80%-transparente 1x1 pixel coloreado de negro */ color: inherit; margin-left: 4px; margin-top: 4px; } .shadow{ background: transparent url(shadow2.png); /*ruta para el 60%-transparent 1x1pixel coloreado de negro */ color: inherit; } .shadow, .content{ position: relative; bottom: 2px; right: 2px; } .content{ background-color: #fff; /*background color of content*/ color: #000; /*text color of content*/ border: 1px solid #000; /*border color*/ padding: .5em 2ex; } </style> Para probar la ventaja de este tipo de fondo, podemos cambiar el color de fondo de la página web y veremos como la sombra también cambia de color. Las dos imágenes, de 1x1 pixel medio transparentes que se necesitan para componer este ejemplo están aquí: Pulsar para descargar imagenes-transparentes.zip Podemos ver el ejemplo en funcionamiento en una página aparte . Método estirar imagen Opino que los dos métodos anteriores no son demasiado buenos, debido a que la sombra no parece muy natural. Dicho de otro modo, no resulta un efecto suficientemente realista. De modo que abro mi editor gráfico, creo una caja rectangular con efecto de sombra y lo exporto a una imagen. Posiblemente pueda utilizar esa imagen para crear el efecto de sombra. El código HTML experimental <div class="shade"> <img src="shadow.png" width="0" height="0" alt="" class="shade" /> bla bla</div> El código CSS experimental img.shade{ width: 37ex; height: 9em; /* specify the dimension of the image */ display: block; position: absolute; z-index: -1; /* force the image to show below the content */ right: -3ex; bottom: -1em; } div.shade{ width: 30ex; height: 6em; /* specify the dimension of the content, slightly smaller than the image */ position: relative; z-index: 1; /* force the content to show above the image */ background-color: #fff; border: 1px solid #000; padding: 1em 2ex; margin-right: 6ex; margin-bottom: 3em; } Tenemos tres desventajas en este método
Podemos obtener la imagen para hacer el ejemplo.
Podemos ver este ejemplo en marcha en una página aparte. Un momento. ¿Cómo haríamos texto con sombreado? Si utilizas un navegador basado en Gecko, podrías visualizar otro efecto interesante para realizar sombreado de textos sin utilizar imágenes y redimensionable simplemente cambiando el tamaño del texto o las fuentes que usa el navegador (con el menú view>text size > increase / Decrease). El código HTML sería el siguiente: <span id="text">Texto sombreado</span> El código CSS #text{ font-size: 3em; /* optional. just to increase the font size. */ display: block; line-height: 1em; color: #666; /* shadow color */ background-color: transparent; white-space: nowrap; /* wrapping breaks the effect */ } #text:before, #text:after{ content: "Texto sombreado"; /* El mismo texto que queramos mostrar sombreado */ display: block; } #text:before{ margin-bottom: -1.05em; margin-left: 0.1ex; color: #ccc; /* shadow color */ background-color: transparent; } #text:after{ margin-top: -1.05em; margin-left: -0.1ex; color: #fff; /* text color */ background-color: transparent; } Este efecto puede ser útil por ahora. Sin embargo, las especificaciones de CSS2 incluyen una propiedad CSS llamada text-shadow, que sirve para definir un efecto de sombra a un texto. Sin embargo, la mayoría de los navegadores todavía no soportan esta propiedad. |
sábado, 15 de octubre de 2011
Estilizando formularios CSS
| Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.
Una de las preguntas más frecuentes cuando se habla de diseño bajo css es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos. Por esto, en esta, mi primera colaboración para CSS Boulevar decidí que sería buena idea escribir al respecto.
En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesitan de un par de trucos para adquirir la apariencia que se quiere la cual aún está limitada por ciertas características que no todos los navegadores actuales soportan. Para comenzar, lo primero que tenemos que hacer es hacer el diseño de como vamos a querer que se vea nuestro formulario. Desde este punto vamos a tener que tomar en cuenta muchs consideraciones que veremos más adelante y que para este caso no tomé en cuenta a propósito por tratarse de un ejemplo en el que hay que resaltar estas limitaciones. Aquí podemos ver una imagen del diseño inicial. El Marcado El código (X)HTML de este ejemplo no tiene mayor ciencia, unicamente se trata de un formulario con 4 campos, algo típico de un sistema de comentarios, queda algo como lo siguiente: <form name="formulario" id="formulario" method=""> <label for="nombre">Nombre:</label> <input type="text" id="nombre" class="campo" /> <label for="email">E-mail:</label> <input type="text" id="email" class="campo" /> <label for="url">URL:</label> <input type="text" id="url" class="campo" /> <label for="comentario">Comentario:</label> <textarea id="comentario" class="campo"></textarea> <br /> <input type="submit" id="boton_enviar" name="enviar" value="Enviar" /> </form> Lo único que hay que resaltar es la falta de definición del tamaño de los campos de texto, esto lo haremos por medio de CSS asi que no es necesario definirlos por el momento Estilizando Aplicar estilos a formularios no es diferente de hacerlo con cualquier otro elemento, para empezar, unicamente vamos a agregar color al fondo de la página para ver como esta nuestro formulario inicialmenteen este primer paso. body { background: #A0CE00; } Como podemos ver nuestro formulario esta desordenado y no se ve nada bien. Lo primero que vamos a hacer es organizaro, para facilitar despues el resto del proceso. Vamos a desplegar las etiquetas como block para que se simulen los cambios de linea además de definir un poco el estilo general del formulario. form { padding: 50px; background: #84AA00; width: 250px; } label { font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #FFF; display: block; } .campo { margin-bottom: 20px; } Asi es como se ve nuestro formulario actualmente, ya está organizado pero se sigue viendo simple y el siguiente paso sera cambiarlo. La primer parte importante para estilizar las cajas de texto es esconder lo que tenemos por default, esto nos va a permitir mas libertad ya que en realidad el truco nada más se trata de reemplazar las cajas con una imagen. Para que las cajas se escondan, si perder funcionalidad vamos a fundirlas con el color de fondo cambiando tanto los bordes como el fondo. .campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; } #comentario { width: 294px; height: 193px; } En este tercer ejemplo, nuestro formulario parece no existir, sin embargo si movemos el cursor un poco vemos que sigue estando ahí. Ahora si llegó la parte divertida, lo siguiente será añadir las imagenes como fondo, un simple background-image bastará para lograr el efecto. .campo { width: 254px; height: 30px; margin-bottom: 20px; border: 1px Solid #84AA00; background: #84AA00; background-image: url(f1.jpg); background-repeat: no-repeat; padding: 2px; color: #669966; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #comentario { width: 254px; height: 193px; background-image: url(f2.jpg); background-repeat: no-repeat; } Añadimos el atributo padding para que el texto no quede totalmente pegado a la imagen además de cambiar el color, tamaño y fuente del texto como detalles. Lo único que nos falta es el botón de enviar, el proceso es el mismo, lo único extra en este caso es la indentación del texto en caso de que no se quiera que este se vea. #boton_enviar { width: 88px; height: 27px; margin-left: 80px; background: #84AA00; border: 1px Solid #84AA00; background-image: url(boton.jpg); text-indent: -9999px; } Extras Basicamente el formulario esta listo, vamos a agregar un pequeño efecto para que se vea aún mejor. Hice un par de imagenes extra sin sombreado que se utilizan cuando el usuario pasa el cursor sobre la caja de texto. .campo:hover { background-image: url(f3.jpg); } #comentario:hover { background-image: url(f4.jpg); } Si están utilizando un buen navegador, el efecto se ve sin problema alguno pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial. Aquí está nuestro ejemplo finalizado, pueden combinarlo con otros efectos como la decoración del drop-down menu para lograr formularios que se vean muy bien. Como mencione al principio, nos encontramos aún con muchos problemas al estilizar formularios, en este ejemplo, podemos ver que las barras de scroll en el area de texto pueden llegar a verse mal y desafortunadamente estas no son estilizables más que en IE. Sin embargo, con un poco de imaginación y un par de sencillos hacks podemos lograr efectos para que los formularios vayan de acuerdo con el estilo del sitio. |
viernes, 14 de octubre de 2011
Esconder con CSS el email a los spambots
| Existen robots que rastrean páginas en busca de emails para hacerles spam. Vemos algunas técnicas para evitar que cacen nuestra dirección publicada en la web.
Cuando publicamos una dirección de correo en una página web debemos saber que no tardará mucho en ser rastreada e incorporada a bases de datos de emails para hacer spam. Es una auténtica paliza tener que recibir decenas o cientos de mensajes basura al cabo del día o la semana, así que merece la pena poner en marcha algún mecanismo para evitar que los spambots (robots en busca de direcciones de email) cacen nuestro correo electrónico.
Ahora vamos a mostrar otro mecanismo que hemos encontrado en una página web. En concreto, este artículo es una traducción libre de este otro artículo en inglés: Hiding email address from spambots, escrito por Lim Chee Aun. En este caso vamos a mostrar un código que serviría para mostrar por CSS la dirección de correo electrónico. El email aparece en la hoja de estilos, nunca en el cuerpo de la página, por lo que el spambot lo va a tener muy difícil para obtener nuestro correo. Se trata de utilizar unas características avanzadas de las hojas de estilo en cascada, que permiten definir cierto contenido, en este caso una dirección de correo electrónico, para colocar antes o después de un texto. Concretamente vamos a utilizar CSS2 (hojas de estilo en cascada especificación 2), que incluye la definición de pseudo-elements (pseudo elementos) "before" y "after", que sirven para insertar contenidos antes y después de ciertos elementos. En este caso, vamos a definir con CSS 2 la inclusión de un contenido después de una etiqueta HTML, en concreto la etiqueta <ADDRESS>, que sirve en principio para escribir una dirección en una página.
El código CSS sería el siguiente:
address:after{ /* \40 es un código para escribir el caracter '@' */ content: " <nombre\40 dominio.com>"; }
El código HTML que deberíamos escribir para mostrar la dirección de correo sería el siguiente: <address>© 2005 loquesea.com</address> Como se puede ver, en el código HTML no aparece la dirección de correo electrónico en ninguna parte, con lo que el spambot no se enterará de que allí se muestra un correo. Se puede ver el ejemplo en una página aparte. Atención los usuarios de Internet Explorer 6. Este navegador no soporta los pseudo-elementos after o before, con lo que este ejemplo no funcionará. En nuestro ejemplo hemos incorporado la declaración de estilos en el mismo fichero HTML, pero tal vez sería más efectivo si colocásemos la declaración de estilos en un archivo externo, que luego incluiríamos con la etiqueta en la cabecera de la página. Conclusión Hemos podido ver otra ingeniosa manera de ocultar la dirección de email. Sin embargo, cabe destacar que las características avanzadas de CSS2 no están soportadas por todos los navegadores. En general, desventaja a destacar es que, con este código, la accesibilidad de la página disminuye considerablemente. Puesto que sólo ciertos navegadores mostrarán las direcciones de correo electrónico. Asimismo, esas direcciones no se podrán pinchar para enviar un correo electrónico directamente, es decir, no se pueden mostrar como enlaces. En Firefox, ni siquiera podemos seleccionar el texto de la dirección de correo, simplemente se nos permite verlo. No obstante, es una nueva manera de mostrar un correo electrónico no accesible a programas de rastreo de emails. Hoy todavía no es una manera muy adecuada, pero tal vez lo será con el tiempo. | ||
Bordes punteados con CSS
| Para dar efectos distintos a elementos estructurados, como las tablas, podemos recurrir a las clases, parte integrante de las hojas de estilo (CSS).
Vamos a ver otra manera de utilizar las CSS (Hojas de Estilo en Cascada) para crear un estilo que podemos utilizar en tablas HTML. Es un estilo para realizar los bordes de tablas con líneas punteadas, lo que resulta bastante original, aunque nuestro consejo es no abusar de ello.
El efecto buscado es el siguiente:
Para conseguirlo simplemente tenemos que utilizar la propiedad de CSS "border-style", asignando el valor "dotted", que quiere decir punteado en inglés. Además, podemos definir otros valores al estilo de borde punteado, como puede ser el color del borde o el color de fondo de la tabla. Para este ejercicio práctico hemos definido una clase que aplicaremos a las tablas u otros elementos que deseemos que tengan el borde punteado. <style type="text/css"> .punteado{ border-style: dotted; border-width: 1px; border-color: 660033; background-color: cc3366; font-family: verdana, arial; font-size: 10pt; } </style> Esta clase tiene definidos una serie de atributos de estilos. Desde el primero hasta el último son: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de la fuente. El atributo que nos interesa a nosotros es el primero, en el que se indica que se desea un tipo de borde punteado. Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha definido la clase se puede utilizar en cualquier elemento de la página web, como una tabla o una celda. <table class="punteado" width=80% align="center"> <tr> <td> <b>Esto es un texto</b> <br> Lo pongo para ver como queda. Me gustará seguro! y a vosotros también. </td> </tr> </table> En este ejemplo, toda la tabla tendrá un efecto de borde punteado. Si colocásemos esa clase únicamente en una celda, sólo esa celda tendría el borde punteado. Es el caso del ejemplo siguiente: <table width=300> <tr> <td class="punteado"><b>Título de la tabla</b></td> </tr> <tr> <td> Aquí podríamos poner cualquier cosa. Sería como el cuerpo de la tabla que correspondiese con el titular que sí tendría algún estilo majete. </td> </tr> </table> No abusar del uso de los bordes punteados Los bordes con líneas punteadas pueden ser muy útiles y vistosos, pero si nos pasamos en su utilización puede darse el caso que el efecto quede poco agradable. El borde punteado llama la atención sobre el elemento que lo utiliza, aunque provoca una sensación de inestabilidad. También hace que parezca que no está terminado, o bien, no está integrado con el resto del diseño. | |||
Decorando el drop down menú CSS
CSS ofrece infinitas opciones para decorar todos los elementos soportados por html. Esta vez mostraré como aplicar nuestro estilo personalizado a los drop down menú.
Primero definiremos el tag option, que contendrá el estilo de letra, el tamaño, el color, etc...
Luego definiremos dos estilos vinculados a option que contendrán los colores de fondo de cada opción:
El último paso es colocar el drop down menú con nuestro estilo personalizado:
|
Textscroll en CSS
En esta oportunidad les enseñaré la propiedad Overflow de CSS capaz de generar un scroll cuando el contenido dentro de un elemento excede las propiedades de su ancho y su alto.
Podemos usar la propiedad Overflow si queremos tener un mayor control sobre nuestras capas.
Para que Overflow funcione correctamente hay que definir las siguientes propiedades:
Para generar un scroll en cualquier parte del texto puedes copiar el siguiente ejemplo:
|
Suscribirse a:
Entradas (Atom)