OnSoni

Artculos, noticias y tutoriales sobre Internet, Personal, Desarrollo Web, Blogging, Diseo, HTML, CSS, PHP ... Blog Artculos Foro Contacto Noticias Buscar en este blog... Themes blogger Utilidades
Buscar

Ests en: Home Tutoriales Texto con bordes Configuracin: utilizando CSS 3 (text-stroke)

Suscripcin
Si desea recibir actualizaciones de este blog, registrese ingresando su direccin de Em ail.
Ingresa tu correo electrnico Enviar

Texto con bordes utilizando CSS 3 (text-stroke)

mircoles, febrero 29, 2012 | Etiquetas: CSS 3 , General, Tutoriales Como ya todos sabemos lo fcil que es realizar un texto con bordes ya sea con los programas de edicin y diseo de imgenes, pues esta vez vamos a cambiar la forma y vamos a realizarlo pero utilizando CSS 3. Vamos a utilizar la nueva caracterstica de CSS 3: text-stroke, (aunque todava no es parte de l) es la inclusin 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). Vamos a mirar un ejemplo utilizando text-stroke:

Suscribirm al feed del blog e

Destacados
El video prohibido de Selena Gom ez y m ejem de spamsencillo en s plos Facebook Grunge Background Vectores Obtener url actual con PHP Insertar m sica con HTML5

onsoni.blogspot.com
Entonces el cdigo CSS3 sera:
view plain print ?

Frances Bean Cobain (Photographs) Algunos trucos de Google Nuevo virus inform tico que se aloja en la BIOS Cm aadir plugin de com o entarios facebook en tu sitio

01. 02. 03. 04. 05. 06.

h1 { -webkit-text-stroke: 2px Darkgoldenrod; color: white; font-size: 50px; font-family: helvetica, arial; }

Luego de incorporar el cdigo CSS3 para utilizar simplemente aade un h1 en tu pgina web o blog:
view plain print ?

01.

<h1>Ejemplo</h1>

Categoras
Detectar el navegador Para detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro utilizando Javascript:
view plain print ?

AJAX API Blogging CSS 3 Efectos Gadgets Google HTML Im genes jQuery Optim izacin

Anuncios Blogger CSS Diseo Fotografias General Herram ientas HTML5 Javascript Noticias Personal
converted by Web2PDFConvert.com

01. 02. 03. 04. 05. 06. 07.

<script> var h1 = document.createElement('h1'); if ( !( 'webkitTextStroke' in h1.style ) ) { var heading = document.getElementsByTagName('h1')[0]; heading.style.color = 'black'; } </script>

Para ms opciones avanzadas de personalizacin, puedes ver Modernizr. Quieres guardar el artculo en tu computador? Imprimirlo
Artculos Relacionados:
Guardalo en PDF

o puedes

Microsoft pondr fin a Windows Mobile Crear una plantilla para Blogger (Parte 2) - Diseo CSS Crear una plantilla para Blogger (Parte 1) - Estructura bsica Efectos tipo Matrix con Javascript Efecto Lightbox con Javascript
Twittear 1

Optim izacin PHP Seguridad Servicios W eb Tips

Personal Program acin SEO Them es T rucos W ordPress

Publicado por Carlus

Recomendar esto en Google

T utoriales Y outube

Comenta con Facebook

[+/-] Archivo del blog
0 P U C B O L M I E C N A T R A R U I N O S C : O M E N [+/-] Comentarios O T A R I E N L A

Comenta este artculo, tu opinin cuenta para nosotros y por favor , evita comentarios ofensivos u obscenos por que sern eliminados. Si deseas incluir un enlace utiliza este cdigo: < a href="Direccin de tu pgina" >Titulo del enlace< /a > Intenta escribir sobre algo relacionado con el artculo. Si no lo haces, podra tardar en responderte. Introduce tu comentario...

Recientes

[+/-] Otros blogs

Comentar como: Seleccionar perfil...

Publicar Vista previa

Crear un enlace
Entrada ms reciente Pgina principal Entrada antigua

Suscribirse a: Enviar comentarios (Atom)

OnSoni se encuentra bajo una Licencia Creative Commons Atribucin-CompartirIgual 3.0 Espaa. 2012 OnSoni. Con la tecnologa de Blogger. Design by Carlus Prez logo by: Unijimpe

converted by Web2PDFConvert.com