Efecto del esquema al texto

¿Hay alguna forma en CSS para dar resúmenes al texto con diferentes colores? Quiero resaltar algunas partes de mi texto para hacerlo más intuitivo, como los nombres, enlaces, etc. Cambiar los colores de los enlaces, etc., es algo común hoy en día, así que quiero algo nuevo.

Existe una propiedad experimental de webkit llamada text-stroke en CSS3, he estado tratando de hacer que esto funcione durante algún tiempo, pero hasta ahora no ha tenido éxito.

Lo que he hecho en su lugar es usar la propiedad text-shadow ya soportada (compatible con Chrome, Firefox, Opera e IE 9, creo).

Use cuatro sombras para simular un texto acariciado:

HTML:

 
This text should have a stroke in some browsers

CSS:

 .strokeme { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } 

He hecho una demostración para ti aquí

Y un ejemplo suspendido está disponible aquí


Como Jason C ha mencionado en los comentarios, la propiedad CSS de text-shadow ahora es compatible con todos los principales navegadores, con la excepción de Opera Mini. Donde esta solución funcionará para la compatibilidad con versiones anteriores (no es realmente un problema con respecto a los navegadores que se actualizan automáticamente), creo que se debe usar CSS de text-stroke .

Editar: text-stroke ahora está bastante maduro y se implementa en la mayoría de los navegadores . Es más fácil, más nítido y más preciso. Si la audiencia de su navegador puede admitirlo, ahora debe usar primero el text-stroke de text-shadow lugar de text-shadow de text-shadow .


Puede y debe hacer esto solo con el efecto de text-shadow sin ningún desplazamiento:

 .outline { color: #fff; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } 

¿Por qué? Cuando compensa varios efectos de sombra, comenzará a notar esquinas desgarbadas y dentadas: Los desplazamientos de efecto de sombra dan como resultado esquinas dentadas perceptibles.

Tener efectos de sombra de texto en una sola posición elimina los desplazamientos, lo que significa que si sientes que es demasiado delgado y prefieres un contorno más oscuro, no hay problema: puedes repetir el mismo efecto (manteniendo la misma posición y desenfoque) varias veces. Al igual que:

 text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; 

Aquí hay una muestra de un solo efecto (arriba), y el mismo efecto se repite 14 veces (abajo):

Texto de muestra procesado con sombra de texto

También tenga en cuenta: Debido a que las líneas se vuelven tan finas, es una muy buena idea desactivar la reproducción de subpíxeles usando
-webkit-font-smoothing: antialiased .

¡Fácil! SVG al rescate.

Este es un método simplificado:

 svg{ font: bold 50px 'Arial'; width: 50%;. height: 50px; } text{ fill: none; stroke: red; stroke-width:2px; // stroke-dasharray: 2,2; stroke-linejoin: round; } 
  Scalable Title  

Podría intentar astackr varias sombras borroneadas hasta que las sombras parezcan un trazo, como las siguientes:

 .shadowOutline { text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; } 

Aquí hay un violín: http://jsfiddle.net/GGUYY/

Lo menciono por si alguien está interesado, aunque no lo llamaría una solución porque falla de varias maneras:

  • no funciona en el viejo IE
  • se ve de manera bastante diferente en cada navegador
  • aplicar tantas sombras es muy difícil de procesar: S

Estaba buscando una solución de trazo de texto entre navegadores que funciona cuando se superpone en imágenes de fondo. Creo que tengo una solución para esto que no implica margen extra, js y funciona en IE7-9 (no he probado 6), y no causa problemas de aliasing.

Esta es una combinación del uso de CSS3 text-shadow, que tiene un buen soporte excepto IE ( http://caniuse.com/#search=text-shadow ), y luego usa una combinación de filtros para IE. El soporte de trazo de texto CSS3 es pobre en este momento.

Filtros de IE

El filtro de brillo ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) se ve terrible, así que no lo usé.

La respuesta de David Hewitt implicó agregar filtros de sombra en una combinación de direcciones. ClearType se elimina por desgracia, así que terminamos con un texto mal alias.

Luego combiné algunos de los elementos sugeridos en useragentman con los filtros de gotas.

Poniendo todo junto

Este ejemplo sería un texto negro con un trazo blanco. Estoy usando clases html condicionales por cierto para apuntar a IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ).

 #myelement { color: #000000; text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; } html.ie7 #myelement, html.ie8 #myelement, html.ie9 #myelement { background-color: white; filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1); zoom: 1; } 

Obtuve mejores resultados con 6 sombras diferentes:

 .strokeThis{ text-shadow: -1px -1px 0 #ff0, 0px -1px 0 #ff0, 1px -1px 0 #ff0, -1px 1px 0 #ff0, 0px 1px 0 #ff0, 1px 1px 0 #ff0; } 

Esta mixin para SASS dará resultados suaves, utilizando 8 ejes:

 @mixin stroke($size: 1px, $color: #000) { text-shadow: -#{$size} -#{$size} 0 $color, 0 -#{$size} 0 $color, #{$size} -#{$size} 0 $color, #{$size} 0 0 $color, #{$size} #{$size} 0 $color, 0 #{$size} 0 $color, -#{$size} #{$size} 0 $color, -#{$size} 0 0 $color; } 

Y CSS normal:

 text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; 
 h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; } 
 

Properly stroked!

Trabajar con trazos más gruesos se vuelve un poco desordenado, si tiene el placer de probar este mixin, no es perfecto y, dependiendo del peso del trazo, genera una buena cantidad de css.

  @mixin stroke($width, $colour: #000000) { $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas @for $i from 0 through $width { $shadow: $shadow, -$i + px -$width + px 0 $colour, $i + px -$width + px 0 $colour, -$i + px $width + px 0 $colour, $i + px $width + px 0 $colour, -$width + px -$i + px 0 $colour, $width + px -$i + px 0 $colour, -$width + px $i + px 0 $colour, $width + px $i + px 0 $colour, } text-shadow: $shadow; } 

Múltiples sombras de texto …
Algo como esto:

 var steps = 10, i, R = 0.6, x, y, theStyle = '1vw 1vw 3vw #005dab'; for (i = -steps; i <= steps; i += 1) { x = (i / steps) / 2; y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2)); theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab'; theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab'; theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab'; theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab'; } document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle); 

Demostración: http://jsfiddle.net/punosound/gv6zs58m/

Aquí está el archivo CSS. Espero que consigas lo que quieras

 /* ----- Logo ----- */ #logo a { background-image:url('../images/wflogo.png'); min-height:0; height:40px; } * html #logo a {/* IE6 png Support */ background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop"); } /* ----- Backgrounds ----- */ html{ background-image:none; background-color:#336699; } #logo{ background-image:none; background-color:#6699cc; } #container, html.embed{ background-color:#FFFFFF; } .safari .wufoo input.file{ background:none; border:none; } .wufoo li.focused{ background-color:#FFF7C0; } .wufoo .instruct{ background-color:#F5F5F5; } /* ----- Borders ----- */ #container{ border:0 solid #cccccc; } .wufoo .info, .wufoo .paging-context{ border-bottom:1px dotted #CCCCCC; } .wufoo .section h3, .wufoo .captcha, #payment .paging-context{ border-top:1px dotted #CCCCCC; } .wufoo input.text, .wufoo textarea.textarea{ } .wufoo .instruct{ border:1px solid #E6E6E6; } .fixed .info{ border-bottom:none; } .wufoo li.section.scrollText{ border-color:#dedede; } /* ----- Typography ----- */ .wufoo .info h2{ font-size:160%; font-family:inherit; font-style:normal; font-weight:normal; color:#000000; } .wufoo .info div{ font-size:95%; font-family:inherit; font-style:normal; font-weight:normal; color:#444444; } .wufoo .section h3{ font-size:110%; font-family:inherit; font-style:normal; font-weight:normal; color:#000000; } .wufoo .section div{ font-size:85%; font-family:inherit; font-style:normal; font-weight:normal; color:#444444; } .wufoo label.desc, .wufoo legend.desc{ font-size:95%; font-family:inherit; font-style:normal; font-weight:bold; color:#444444; } .wufoo label.choice{ font-size:100%; font-family:inherit; font-style:normal; font-weight:normal; color:#444444; } .wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{ font-style:normal; font-weight:normal; color:#333333; font-size:100%; } {* Custom Fonts Break Dropdown Selection in IE *} .wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ font-family:inherit; } .wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{ font-family:inherit; color:#444444; } .safari .wufoo input.file{ /* Webkit */ font-size:100%; font-family:inherit; color:#444444; } .wufoo .instruct small{ font-size:80%; font-family:inherit; font-style:normal; font-weight:normal; color:#444444; } .altInstruct small, li.leftHalf small, li.rightHalf small, li.leftThird small, li.middleThird small, li.rightThird small, .iphone small{ color:#444444 !important; } /* ----- Button Styles ----- */ .wufoo input.btTxt{ } /* ----- Highlight Styles ----- */ .wufoo li.focused label.desc, .wufoo li.focused legend.desc, .wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label, .safari .wufoo li.focused input.file{ color:#000000; } /* ----- Confirmation ----- */ .confirm h2{ font-family:inherit; color:#444444; } a.powertiny b, a.powertiny em{ color:#1a1a1a !important; } .embed a.powertiny b, .embed a.powertiny em{ color:#1a1a1a !important; } /* ----- Pagination ----- */ .pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{ font-family:inherit; color:#444444; } .pgStyle1 var, .pgStyle2 td{ border:1px solid #cccccc; } .pgStyle1 .done var{ background:#cccccc; } .pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{ background:#FFF7C0; color:#000000; } .pgStyle1 .selected var{ border:1px solid #e6dead; } /* Likert Backgrounds */ .likert table{ background-color:#FFFFFF; } .likert thead td, .likert thead th{ background-color:#e6e6e6; } .likert tbody tr.alt td, .likert tbody tr.alt th{ background-color:#f5f5f5; } /* Likert Borders */ .likert table, .likert th, .likert td{ border-color:#dedede; } .likert td{ border-left:1px solid #cccccc; } /* Likert Typography */ .likert caption, .likert thead td, .likert tbody th label{ color:#444444; font-family:inherit; } .likert tbody td label{ color:#575757; font-family:inherit; } .likert caption, .likert tbody th label{ font-size:95%; } /* Likert Hover */ .likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{ background-color:#FFF7C0; color:#000000; } .likert tbody tr:hover td{ border-left:1px solid #ccc69a; } /* ----- Running Total ----- */ .wufoo #lola{ background:#e6e6e6; } .wufoo #lola tbody td{ border-bottom:1px solid #cccccc; } .wufoo #lola{ font-family:inherit; color:#444444; } .wufoo #lola tfoot th{ color:#696969; } /* ----- Report Styles ----- */ .wufoo .wfo_graph h3{ font-size:95%; font-family:inherit; color:#444444; } .wfo_txt, .wfo_graph h4{ color:#444444; } .wufoo .footer h4{ color:#000000; } .wufoo .footer span{ color:#444444; } /* ----- Number Widget ----- */ .wfo_number{ background-color:#f5f5f5; border-color:#dedede; } .wfo_number strong, .wfo_number em{ color:#000000; } /* ----- Chart Widget Border and Background Colors ----- */ #widget, #widget body{ background:#FFFFFF; } .fcNav a.show{ background-color:#FFFFFF; border-color:#cccccc; } .fc table{ border-left:1px solid #dedede; } .fc thead th, .fc .more th{ background-color:#dedede !important; border-right:1px solid #cccccc !important; } .fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{ background-color:#FFFFFF; border-right:1px solid #cccccc; border-bottom:1px solid #dedede; } .fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{ background-color:#f5f5f5; } /* ----- Chart Widget Typography Colors ----- */ .fc caption, .fcNav, .fcNav a{ color:#444444; } .fc tfoot, .fc thead th, .fc tbody th div, .fc tbody td.count, .fc .cards tbody td a, .fc td.percent var, .fc .timestamp span{ color:#000000; } .fc .indent .count{ color:#4b4b4b; } .fc .cards tbody td a span{ color:#7d7d7d; } /* ----- Chart Widget Hover Colors ----- */ .fc tbody tr:hover td, .fc tbody tr:hover th, .fc tfoot tr:hover td, .fc tfoot tr:hover th{ background-color:#FFF7C0; } .fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var, .fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{ color:#000000; } /* ----- Payment Summary ----- */ .invoice thead th, .invoice tbody th, .invoice tbody td, .invoice tfoot th, .invoice .total, .invoice tfoot .last th, .invoice tfoot .last td, .invoice tfoot th, .invoice tfoot td{ border-color:#dedede; } .invoice thead th, .wufoo .checkNotice{ background:#f5f5f5; } .invoice th, .invoice td{ color:#000000; } #ppSection, #ccSection{ border-bottom:1px dotted #CCCCCC; } #shipSection, #invoiceSection{ border-top:1px dotted #CCCCCC; } /* Drop Shadows */ /* - - - Local Fonts - - - */ /* - - - Responsive - - - */ @media only screen and (max-width: 480px) { html{ background-color:#FFFFFF; } a.powertiny b, a.powertin em{ color:#1a1a1a !important; } } /* - - - Custom Theme - - - */