sombreado - sombra texto css
Efecto de contorno a texto (11)
¡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;
}
<svg viewBox="0 0 350 50">
<text y="40">Scalable Title</text>
</svg>
¿Hay alguna forma en CSS para dar contornos a 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. son comunes hoy en día, así que quiero algo nuevo.
Aquí está el archivo CSS espero que obtengas lo que quieres
/* ----- 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 - - - */
Esta mezcla 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;
Estaba buscando una solución de trazo de texto en varios navegadores que funciona cuando se superpone en imágenes de fondo. creo que tengo una solución para esto que no implica un margen de beneficio adicional, js y funciona en IE7-9 (no he probado 6), y no causa problemas de aliasing.
Esta es una combinación de usar CSS3 text-shadow, que tiene un buen soporte, excepto IE ( http://caniuse.com/#search=text-shadow ), y luego usar una combinación de filtros para IE. El soporte para el trazo de texto CSS3 es pobre en este momento.
Filtros 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 consistió en agregar filtros dropshadow en una combinación de direcciones. ClearType se elimina desafortunadamente, por lo que terminamos con un texto con un alias mal.
Luego combiné algunos de los elementos sugeridos en useragentman con los filtros dropshadow.
Poniendo todo junto
Este ejemplo sería texto negro con un trazo blanco. Estoy usando clases html condicionales por medio de la forma de 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;
}
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/
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;
}
Puedes intentar apilar varias sombras borrosas hasta que las sombras se vean como un trazo, así:
.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 antiguo IE
- se reproduce de manera muy diferente en cada navegador
- La aplicación de tantas sombras es muy pesada de procesar: S
Trabajar con trazos más gruesos se vuelve un poco desordenado, si tiene el placer de probar esta mezcla, no es perfecto y, dependiendo del peso del trazo, genera una cantidad justa 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;
}
Edición: text-stroke ahora es bastante maduro e implementado en la mayoría de los navegadores . Es más fácil, más preciso y más preciso. Si la audiencia de su navegador puede admitirlo, ahora debe usar text-stroke primero, en lugar de text-shadow de text-shadow .
Puede y debe hacer esto solo con el efecto de text-shadow sin ninguna compensación:
.outline {
color: #fff;
text-shadow: #000 0px 0px 1px;
-webkit-font-smoothing: antialiased;
}
¿Por qué? Cuando compensas múltiples efectos de sombra, comenzarás a notar esquinas irregulares e irregulares:
Tener efectos de sombra de texto en una sola posición elimina las compensaciones, lo que significa que si cree que es demasiado delgado y prefiere un contorno más oscuro, no hay problema, puede repetir el mismo efecto (mantener 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 solo un efecto (arriba), y el mismo efecto se repitió 14 veces (abajo):
También tenga en cuenta: debido a que las líneas se vuelven tan finas, es una muy buena idea desactivar el procesamiento de sub-píxeles usando
-webkit-font-smoothing: antialiased .
Hay una propiedad de webkit experimental llamada text-stroke en CSS3, he estado tratando de hacer que esto funcione durante algún tiempo, pero hasta ahora no he tenido éxito.
Lo que he hecho, en cambio, es utilizar la propiedad de text-shadow ya compatible (compatible con Chrome, Firefox, Opera e IE 9, creo).
Usa cuatro sombras para simular un texto trazado:
HTML:
<div class="strokeme">
This text should have a stroke in some browsers
</div>
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 demo para ti aquí
Y un ejemplo flotante está disponible aquí.
Como Jason C ha mencionado en los comentarios, la propiedad CSS de text-shadow ahora es compatible con todos los navegadores principales, con la excepción de Opera Mini. Donde esta solución funcionará para la compatibilidad con versiones anteriores (no es realmente un problema relacionado con los navegadores que se actualizan automáticamente) Creo que se debe usar el CSS de text-stroke .
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<h1>Properly stroked!</h1>