Es muy fácil hacer borde en un texto con imágenes, con Photoshop, pero, ¿y si queremos hacerlo con CSS? Una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {
-webkit-text-stroke: 3px black;
color: white;
}

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

Si deseas opciones más avanzadas de personalización, mira Modernizr.

Ejemplo de su funcionamiento

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

Vía | Nettuts

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS: Text-shadow, propiedad

• Sombras en el texto sin usar text-shadow

• Ocultar mensajes en un texto con CSS

Existen una lista interminable de tipografías, pero sólo unas cuantas encajarán con el estilo que tenemos en el sitio web. Desde aquí os mostraré algunos puntos que os pueden resultar útiles para distinguir entre una tipografía aceptable y otra que no es buena para nuestro sitio.

En las tipografías para títulos, se podrían seguir estos criterios:

¿Pequeña o grande?

Los títulos son algo que deben verse rápidamente, sin esforzarse mucho, así que es altamente recomendable que sean lo suficientemente grandes como para que el lector no tenga que fijarse mucho en ellos para verlos. Eso sí, los extremos también son malos, yo recomiendo establecer un mínimo de 17 píxeles a la tipografía de los títulos.

¿Fina o ancha?

Normalmente, las tipografías finas se utilizan para sitios con una combinación de tonos claros, debido a la ligereza que supone. Los sitios oscuros tienden a utilizar estilos de tipografías más anchas.

¿Colores claros u oscuros?

En los sitios con combinaciones de colores oscuros, se usa mayoritariamente tipografías claras, debido a que destacan más. Las tipografías oscuras se deberían utilizar en sitios con combinación de colores claros, por el mismo motivo que el anterior.

¿Estilo elegante o desenfadado?

Esto ya puede depender de cada persona, aunque personalmente concuerdo con que en sitios claros se utilicen tipografías más firmes, mientras que en sitios con colores oscuros se apliquen tipografías más divertidas y amigables, aunque, como digo, depende de cada persona.

¿Sans serif o serif?

Sans serif significa sin serifa, o terminación en las letras, como queramos llamarlo. En sitios con temáticas actuales, como diseño web, nuevas tecnologías, recomiendo usar fuentes sans-serif. En sitios con temas como viajes, museos, podría ser una buena opción utilizar fuentes serif.

(Imagen de Wikipedia)

¿Aplico text-shadow, degradados…?

Generalmente las propiedades CSS3 todavía no han sido aplicadas en todos los navegadores web. Si la temática que estamos tratando es sobre desarrollo web, diseño, el uso de propiedades CSS3 puede estar aceptado (hablando en la actualidad, ya que la mayoría de los navegadores no han conseguido todavía la compatibilidad con todas las propiedades CSS3). En otros sitios con temáticas como viajes, hoteles, restaurantes, deportes, todavía no encaja mucho aplicar este tipo de propiedades, según mis criterios.

Consejos de fuentes para los parrafos:

• No utilices tipografías demasiado finas, dificultará su lectura. Tampoco muy pequeñas, como mínimo 10 píxeles de tamaño.
• Intenta seguir el mismo estilo que en los encabezados, aunque varíe un poco. No cambies a otra tipografía totalmente distinta, intenta usar la misma.
• La tipografía debe verse bien por sí misma, no puedes usar efectos como text-shadow u otros para que se visualice bien. Debe mostrarse correctamente sin usar estos efectos. Esto se puede aplicar a las tipografías en los títulos también.
• Utiliza distintos tamaños de tipografía, dependiendo que sea un párrafo de contenido, bloque en la barra lateral o título. Debe diferenciarse. Generalmente el tamaño más grande lo tiene el título, seguido por el título en los bloques laterales y el texto en los párrafos.
• Debes distinguir los enlaces de texto en los párrafos. Generalmente se aplica otro color al enlace (por ejemplo, azul, frente al negro  del texto) o una decoración subrayado, especialmente).

Conclusión

Si sigues estos consejos darás una estructura más organizada a tu sitio, a la vez que ayudarás al lector a que se sienta bien leyendo tus artículos o lo que muestres. Todo depende de cada uno, así que si estás en desacuerdo con alguno de estos puntos, no lo sigas, quizás tengas otra idea mejor. Pero ante todo, recuerda, el contenido es el rey. Si deseas aplicar a tu página tipografías que no tengan los usuarios, utiliza la propiedad CSS3 @font-face. Ya sabes que tienes una lista de recursos muy útiles en este blog para desarrollar inspiración u obtener tipografías, texturas y fondos.

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Novedosas tipografías gratis para diseñar sitios y logotipos

• 11 tipografías gratis para diseñar tu sitio web

• 16 tipografías estándares para usar con CSS

Todo el que use Firefox 3 se dará cuenta que al hacer click sobre un enlace o un elemento enlazado con la etiqueta <a> este crea un recuadro punteado alrededor de sí mismo. En Firefox 3, el color de los puntos está determinado por el color del texto, en anteriores versiones y en otros navegadores este color es gris. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.

Este efecto es estilizado mediante la propiedad outline.  La propiedad “outline” es similar a la propiedad “border” (Más información acerca de la propiedad outline). El valor de la propiedad “outline” no es una parte del elemento. El borde se calcula con la anchura total de la caja, considerando que outline no es. Esto es importante ya que así el diseño no se estropeará al eliminar la propiedad “outline”.

Cómo eliminar la propiedad outline

Para eliminar el contorno de puntos tendremos que darle a la propiedad outline el valor “none”:

a {  outline: none; }

Pero al haber eliminado esta propiedad, estamos quitando al sitio web una importante función de accesibilidad. ¿Por qué no estilizamos los enlaces a nuestro gusto para que tengan mayor accesibilidad? Es bueno estilizar los enlaces para los pseudo-elementos :hover, :active y :focus ya que, aunque hayamos eliminado la propiedad “outline”, añadiremos accesibilidad al sitio.

a:hover, a:active, a:focus {
    // estilizar un enlace que va a ser utilizado.
 }

Ojo, esta entrada no debe confundirse con la otra que expuse anteriormente sobre la eliminación del borde en un vínculo.

Vía | CSS-Tricks

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Eliminar el borde de las imágenes con vínculo

• CSS: La propiedad Outline

• Varios Background en Firefox 3.5

En esta entrada explicaré los mejores métodos para introducir @font-face en nuestro documento.

@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
}

El código de arriba podría ser la mejor opción para aplicar @font-face, pero en IE no nos sirve y necesitamos tener una fuente .EOT, mientras que los otros navegadores necesitan una fuente .TTF u .OTF.

Comentarios condicionales

<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot');
}
</style>
<![endif]-->
<style type="text/css" media="screen">

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.otf') format('opentype');

}

</style>

<!--[if IE]>

<style type="text/css" media="screen">

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.eot');

}

</style>

<![endif]-->

Podemos aplicar comentarios condicionales para que IE muestre otro tipo de fuente.

Declaraciones dobles

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.eot'); /* here you go, IE */

}

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.otf'); /* everyone else take this */

}

El problema de esta solución es que IE descargará el formato .OTF. Podemos añadirle el tipo de formato a aplicar:

@font-face {

font-family: 'Graublau Web';

src url('GraublauWeb.otf') format('opentype'); /* IE no comprende format()! */

}

Pero IE no reconoce la propiedad “format”. Esta solución es mucho mejor:

La referencia local

@font-face {

font-family: 'Graublau Web';

src: url(GraublauWeb.eot);

src: local('Graublau Web Regular'), url(GraublauWeb.otf) format('opentype');

}

Mucho más limpia y ordenada. Aquí, si el navegador no es Internet Explorer, no lee el archivo .EO, y carga el sitio. IE intentará leer el segundo valor src, pero no puede entender “local()” ni las ubicaciones múltiples, por lo que en vez de eso recurreo a leer la fuente .EOT. IE siempre lee la última dirección (src), por lo que esto no funcionará.

src: url(GraublauWeb.eot);

src: url(GraublauWeb.otf); /* IE sólo leerá esta dirección  */

Si por casualidad el usuario tiene la fuente instalada en su ordenador, podremos ahorrarnos la descarga. El problema es que Safari sólo utilizará el nombre PostScript, no el nombre de la fuente completa, así que cuando estas sean diferentes, incluiremos ambos nombres:

Bulletproof @font-face

@font-face {

font-family: 'Graublau Web';

src: url(GraublauWeb.eot);

src: local('Graublau Web Regular'), local('Graublau Web'),

url(GraublauWeb.otf) format('opentype');

}

Vía | Paul

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• @font-face, inserta cualquier tipografía en tu sitio web

• Descarga cientos de tipografías @font-face gratis

• Tabla de soporte de navegadores para CSS3 @font-face

Existen una lista de tipografías estándares que todos los navegadores pueden interpretar, pero, ¿qué ocurre con las demás tipografías? ¿Cómo podemos implementarlas?

@font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS.

La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar.

Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).

Cómo implementar @font-face

Vamos a aplicarle la tipografía “Kimberley” en un encabezado H1, como ejemplo de Alistapart. Así funciona:

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
@font-face {

font-family: "Kimberley";

src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");

}

h1 { font-family: "Kimberley", sans-serif }

Obviamente, debemos ubicar la dirección donde se encuentra la tipografía que deseemos definir en nuestro sitio, en este caso, “Kimberley”.

Si tenemos una larga lista de fuentes propias, podemos usar @import:

@import url(http://www.midominio.com/style/index.css) all;

h1 { font-family: Goodfish, serif }

Y ya está. @font-face está soportada por Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+.

Una imagen de Internet Explorer 7+ aplicando @font-face:

Problemas con Internet Explorer 6+

Si deseemos aplicar @font-face en Internet Explorer 6+, sin usar formato “.otf”, debemos aplicar comentarios condicionales, además del que tengamos para los navegadores modernos (compatibles con @font-face, los listados en el anterior párrafo). El código a definir para Internet Explorer 6+ es este:

<!--[if IE]>

<style type="text/css" media="screen">

@font-face{

font-family:'Fontin-Regular';

src: url('Fontin-Regular.eot');

}

</style>

<![endif]-->

Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar WEFT 3.

Y así Internet Explorer 6+ podrá interpretar @font-face.  Cualquier duda o sugerencia podéis escribirla desde los comentarios.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Sintaxis de @font-face

• Descarga cientos de tipografías @font-face gratis

• Tabla de soporte de navegadores para CSS3 @font-face

Ya enseñamos hace tiempo a crear un rotador de imágenes con CSS, pero, ¿Y si solo deseamos ubicar texto encima de una imagen?
En esta entrada aprenderemos a insertar bloques de texto encima de una imagen.

Estructura

La imagen se ubica al fondo del todo, y, el bloque de texto está agrupado por un encabezado h2 (para indicar la posición) y una etiqueta <span> dentro de este (para elegir el color, letra, tamaño de letra…). Para la imagen usaremos la posición relativa (“relative”) y para el encabezado usaremos la posición absoluta (“absolute”).

Código HTML – 1º parte

<div class="image">

<img src="images/miejemplo.gif" alt="Mi titulo de la imagen">

 <h2><span>Floto encima de la imagen:<span>&nbsp;</span><br><span>&nbsp;</span>Soy un fantasma</span></h2>
</div>

Código CSS – 1º parte

.image {

position: relative;

width: 100%; /* for IE 6 */

}

h2 {

position: absolute;

top: 200px;

left: 0;

width: 100%;

}

Con esto lograremos ubicar el texto encima de la imagen, a la izquierda, pero no crearemos la caja transparente negra que queremos insertar detrás del texto. Por eso no podemos usar el encabezado H2, es un elemento de bloque y necesitamos un elemento en línea sin un ancho específico.

Vamos a agrupar la etiqueta <span> dentro del encabezado <h2>:

Código HTML – 2º parte

<h2><span>Floto encima de la imagen:<br />Soy un fantasma</span></h2>

Ahora le daremos estilo a la etiqueta <span>

Código CSS – 2º parte

h2 span {

color: white;

font: bold 24px/45px Helvetica, Sans-Serif;

letter-spacing: -1px;

background: rgb(0, 0, 0);

background: rgba(0, 0, 0, 0.7);

padding: 10px;

}

Ahora me preguntaréis. ¿Porqué uso dos fondos y en RGB? Para aplicar transparencia a la caja. el primer ‘background’ es para definir el color de la caja, y para definir la transparencia, se le añade otro ‘background’ con un valor adicional para indicar la transparencia que va de 0 (transparente) a 1 (opaco). Si deseamos aplicar esto en Internet Explorer, debemos utilizar un filtro y los comentarios condicionales:

<!-- [ if IE ]>

background: transparent;

filter: prodig:DXImageTransform.Microsoft.gradient(startcolorstr=#00000050,endcolorstr=#00000050;

zoom: 1;

<![endif]-->

Un pequeño problema

Cuando un elemento en línea se rompe (<br />) el bloque se rompe después del último caracter en la línea, y se sitúa a la izquierda del todo en la siguiente línea. El padding no nos ayuda en este caso.

Para solucionar esto, aplicaremos etiquetas <span> entre el elemento <br /> para simular el padding. Debemos asignarle una clase a la etiqueta <span> (le llamaremos “spacer”, por ejemplo):

Código HTML – 3º parte

<h2><span>Floto encima de la imagen:<span class='spacer'></span><br /><span class='spacer'></span>Soy un fantasma</span></h2>

Código CSS – 3º parte

h2 span.spacer {

padding:0 5px;

}

Arreglando la semántica

La etiqueta <span class=”spacer”>, en este caso, se está usando incorrectamente para su propósito y rompe la semántica.

JQuery puede ayudarnos. Elimina todas las etiquetas <span class=”spacer”> que hayas puesto, e inserta este código JS en tu documento:

$(function() {

$("h2")

.wrapInner("<span>")

$("h2 br")

.before("<span class='spacer'>")

.after("<span class='spacer'>");

});

Estandarización

CSS 2.1 inválido.
XHTML 1.0 Transitional inválido.

Ejemplo de su funcionamiento

Vía | CSS-Tricks

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Degradar texto con una imagen y CSS

• Insertar imagen en un campo de texto con CSS

• Ocultar mensajes en un texto con CSS

Igual que disponí­amos la fecha con CSS Sprites, ahora queremos rotar un texto para crear una fecha gracias a CSS Transformations.

Explicación de su funcionamiento

CSS Mágico

La clave de estas rotaciones se encuentran en CSS Transformations, y tanto Firefox como Safari tienen esta ventaja:

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

Es decir:

-webkit-transform: rotate(VALORdeg);-moz-transform: rotate(VALORdeg);

Para realizar esta transformación, el elemento debe tener la propiedad display, con el valor block, es decir, display: block;. Debes añadir esta declaración al \”span\” que quieras rotar.En cambio, Internet Explorer no es compatible con este hack, por lo deberemos hacer uso de los filtros. Se inserta en el código CSS igualmente:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Pero en la línea de código para Internet Explorer, es necesario insertar un valor del 1 al 3, en vez de grados:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);

En el valor, es necesario añadir:
0: no rotar.
1: rotar 90 grados
2: rotar 180 grados
3 :rotar 270 grados (-90 grados).
Si deseas saber más sobre esto, echa un vistazo a los comentarios condicionales.

Estructura

Ahora mostraremos la estructura para poder crear este hack:

Código CSS

example-date {background-color: #123;border: 1px solid #345;padding: 45px 5px 0;position:relative;width: 60px;}

.example-date .example-day {font-size: 45px;left: 5px;line-height: 45px;position: absolute;top: 0;}

.example-date .example-month {font-size: 25px;text-transform: uppercase;}

.example-date .example-year {

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

display: block;position: absolute;

right: -5px;top: 15px;}

Código HTML

<div class="example-date">

<span class="day">31</span>

<span class="month">July</span>

<span class="year">2009</span>

</div>

Estandarización

CSS 2.1 inválido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Podemos ver un ejemplo de su funcionamiento en su página de origen:

Conclusión

Aunque es un hack útil para muchos, no renderiza bien el texto en los distintos navegadores disponibles.

¿Qué os parece?

Vía | Snook

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bloques de texto encima de una imagen

• 8 técnicas CSS aleatorias que deberías conocer

• Construir un cubo 3D con HTML5 y CSS3

Muchas veces necesitamos mostrar iconos al lado de los enlaces, ayuda al lector además de que ayudan a expresar el significado del enlace si sabemos utilizarlo correctamente. Pero, ¿y si estos enlaces fueran “inteligentes” y dependiendo del contenido del enlace, pasaran a mostrar un icono distinto automáticamente? Mucho más inteligentes que si tienen el poder de ocultarse y mostrarse o mostrando al lado un icono de fondo.
Esto es lo que vamos a crear con CSS, de forma sencilla. Por ejemplo, podemos usar estos iconos:

	Enlace a ventana emergente
	Enlace a sitios externos
	Indica un enlace “mailto:”
	Enlace a archivos pdf
	Enlaces a archivos Word
	Enlaces a archivos Excel

Ahora explicaremos como funciona, después veremos varios ejemplos paso a paso:

¿Cómo funciona?

Como vemos en la imagen, la magia está en el código CSS. Se trata de Escoger la etiqueta <a> y buscar dentro del enlace lo que existe al final, en este caso, como el enlace termina en .PDF (archivo .PDF) le damos este estilo (un icono al lado, aunque puede ser lo que nosotros queramos).

Ejemplo 1 – Enlace a archivo PDF

Código HTML

Enlazamos al archivo PDF mediante un enlace:

<a href="files/holidays.pdf">View Holidays</a>

Y obtendremos algo parecido a esto:

Código CSS

a[href $='.pdf'] {

padding-right: 18px;

background: transparent url(icon_pdf.gif) no-repeat center right;

}

Al aplicar el estilo nos tendrá que quedar algo parecido a esto:

Listo, ya tenemos nuestro primer enlace inteligente.

Ejemplo 2 – Enlace hacia un correo

Para enlazar hacia un correo y que automáticamente CSS defina al lado del enlace el icono de un correo, debemos de seguir estos pasos:

Código HTML

<a href="mailto:billg@microsoft.com">Contact Me</a>

Código CSS

a[href ^="mailto:"] {

padding-right: 20px;

background: transparent url(icon_mail.gif) no-repeat center right;

}

Fijaos en los signos “^=”, esto quiere decir “empieza con”, es decir, se aplicará este estilo a todos los enlaces que empiezen por: “mailto:”.

Aquí se puede ver el resultado final:

Ejemplo 3 – Enlace a ventanas emergentes

Código HTML

Aquí usaremos la clase “popup” (ver guía sobre las clases) o el atributo “rel”:

<a class="popup" href="help.html">Help Page</a>

Código CSS

Aplicamos el nombre de la clase al código CSS:

a[class ="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center right;

}

Esta regla funcionará para todos los enlaces que tengan la clase =”popup”.

Aquí podemos ver el resultado final:

Encontrando un valor entre muchos

Observad esta clase en el código HTML:

Código HTML

<a class="popup specialstyle" href="help.html">View Help</a>

Se encuentran valores separados, ¿verdad?. Ahora debemos utilizar otra regla para identificar este enlace. Fijaos en el siguiente código CSS:

Código CSS

a[class ~="popup"] {

padding-right: 18px;

background: transparent url(icon_popup.gif) no-repeat center right;

}

Con estos signos “~=”, si existen múltiples valores en una clase, se buscará el que esté definido entre el código CSS descrito anteriormente. Si se encuentra, aparecerá al lado del enlace el icono que hayamos definido (en el ejemplo es un icono, pero puede ser, por ejemplo, que la fuente del enlace se convierta en negrita).

Más ejemplos

En Iconize podremos ver más ejemplos con varios tipos de enlaces: Ver más ejemplos sobre los enlaces inteligentes.

Problemas con IE 6

Para variar, en IE 6 este hack no funciona, por lo tanto deberemos hacer uso de JQuery. Añade esto en tu documento (modifica según los tipos de enlaces que hayas puesto, puede que no sean los mismos que los del ejemplo):

$(document).ready(function(){
         $("a[@href$=pdf]").addClass("pdf");
         $("a[@href$=zip]").addClass("zip");
         $("a[@href$=psd]").addClass("psd");
});

Ejemplo de su funcionamiento

Podemos descargar todos los ejemplos aquí:

Si te ha gustado la entrada, apoya comentándola, por favor.

Muchas gracias por habernos leído.

Vía | ACG

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Mostrar u ocultar enlaces con CSS

• Enlaces con fondo en CSS

• Enlaces interesantes a artículos web

Un usuario me preguntó como podía insertar una imagen en un campo de texto. Bien, es muy sencillo, y en esta entrada se explicará paso a paso.

Código HTML

Como vemos es un formulario (form) formado por 3 input de tipo texto con sus respectivas clases.

<form action="myaction.php" method="post" id="myid">

<p><input type="text" name="author" class="author" value="Autor" size="22" tabindex="1" /></p>

<p><input type="text" name="email" class="mail"  value="Email>" size="22" tabindex="2" /></p>

<p><input type="text" name="url" class="website" value="Url" size="22" tabindex="3" /></p>

</form>

Código CSS

El código CSS se divide en dos partes. Una es la parte cuando no estamos presionando el formulario, y otra cuando clickamos en el formulario (hover -aunque esta parte es más secundaria y no hace falta a menos que queramos dar más estética al formulario-).

Si no estamos presionando el formulario, el código CSS es este (solo nos fijaremos en la clase “author”:

#commentform input.author{

background-position: left center;

padding-left: 17px;

width:183px;

background-image: url(images/user.gif);

background-repeat: no-repeat;

}

Si nos fijamos vemos una imagen de fondo (el icono del formulario que aparece al principio) orientado hacia la izquierda (background-position) con un padding a la izquierda de 17 px. Este padding es necesario especificarlo ya que si no, el texto se “montará” encima del fondo (icono). El padding debe ser 1 o 2 píxeles superior al ancho total del icono que vayamos a añadir. Finalmente indicamos el ancho de todo el formulario, que en este caso es de 183 píxeles.

El código CSS cuando hemos presionado el formulario es este:

#commentform input.author[type="text"]:focus {

background-color: #FFF;

background-position: left center;

padding-left: 17px;

width:183px;

background-image: url(images/user2.gif);

background-repeat: no-repeat;

}

Aplicando focus al formulario podemos asignarle un nuevo fondo a la caja de texto, con un nuevo icono (como es este caso, ya que puede haber muchas variantes) y con esto ya tendríamos nuestro formulario más estilizado y acabado.

Este hack tiene XHTML 1.0 Transitional válido y funciona tanto en Safari 3+. 4+, como en Firefox 3.x e Internet Explorer.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bloques de texto encima de una imagen

• Degradar texto con una imagen y CSS

• Grabado de texto con CSS

Hay muchas técnicas de grabar un texto. Apple utiliza mucho esta técnica últimamente, por ello queremos enseñarla para que la podáis usar. Existen varios tipos:

Grabado de texto estilo iPhone

Podemos lograr un efecto de grabado de texto parecido al que iPhone de distintas maneras:

Texto claro en un degradado oscuro

Para un texto claro en un degradado oscuro, generalmente se utiliza la propiedad text-shadow de -1px en la coordenada y, con un color de sombra oscuro. Este es el código por el que se define el ejemplo de arriba:

text-shadow: 0px -1px 0px #374683;

Texto oscuro en un degradado claro

Si elegimos el caso contrario, la propiedad text-shadow tendrá un valor positivo de 1px en la coordenada x, con una sombra clara. Este es el código del ejemplo de arriba:

text-shadow: 0px 1px 0px #e5e5ee;

Soporte de exploradores

Desafortunadamente solo Opera 9.5+, Safari 1.1+, Konqueror 3.4+ y iCab 3.0.3+ soportan la propiedad text-shadow. Las últimas betas de Firefox 3.1 lo están empezando a soportar.

También puedes hacer que este grabado de texto funcione en IE 7. Nos fijaremos en el 2º ejemplo que hemos puesto para que sea compatible con IE 7:

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

Aunque si lo deseamos podemos ver como obtener sombras sin necesidad de usar text-shadow.

Vía | Reynoldsftw

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Sombras en el texto sin usar text-shadow

• Text-stroke, borde en el texto con CSS3

• Degradar texto con una imagen y CSS