반응형
텍스트에 대한 개요 효과
CSS에서 다른 색상으로 텍스트에 개요를 제공하는 방법이 있습니까? 이름, 링크 등보다 직관적으로 만들기 위해 텍스트의 일부를 강조하고 싶습니다. 링크 색상 변경 등은 오늘날 일반적이므로 새로운 것을 원합니다.
text-strokeCSS3에 실험적인 웹킷 속성이 있는데 , 한동안 작동 시키려고했지만 지금까지 실패했습니다.
내가 대신 한 것은 이미 지원되는 text-shadow속성 (Chrome, Firefox, Opera 및 IE 9에서 지원됨)을 사용하는 것입니다.
네 개의 그림자를 사용하여 획이있는 텍스트를 시뮬레이션하십시오.
.strokeme {
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}<div class="strokeme">
This text should have a stroke in some browsers
</div>호버링 된 예제는 여기에서 사용할 수 있습니다
Jason C가 주석에서 언급했듯이 text-shadowOpera Mini를 제외한 모든 주요 브라우저 에서 CSS 속성이 지원됩니다. 이 솔루션이 이전 버전과의 호환성을 위해 작동하는 곳 (실제로 자동 업데이트되는 브라우저와 관련된 문제는 아님) text-strokeCSS를 사용해야 한다고 생각합니다 .
편집 : text-stroke 이제는 상당히 성숙되어 대부분의 브라우저에서 구현됩니다 . 더 쉽고 선명하며 정확합니다. 브라우저 사용자가이를 지원할 수 있다면 이제 text-stroke대신을 먼저 사용해야 text-shadow합니다.
text-shadow오프셋없이 효과만으로이 작업을 수행 할 수 있고 수행해야 합니다.
.outline {
color: #fff;
text-shadow: #000 0px 0px 1px;
-webkit-font-smoothing: antialiased;
}
왜? 여러 그림자 효과를 오프셋하면 불규칙하고 울퉁불퉁 한 모서리가 나타납니다. 
한 위치에 텍스트 그림자 효과가 있으면 오프셋이 제거됩니다. 즉, 너무 얇아서 더 어두운 윤곽선을 선호한다면 아무런 문제가 없습니다. 같은 효과를 반복 할 수 있습니다 (같은 위치와 흐림 유지). 이렇게 :
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;
다음은 단 하나의 효과 (위)와 동일한 효과가 14 번 반복 된 (아래) 샘플입니다.
참고 : 선이 너무 얇아 지므로을 사용하여 하위 픽셀 렌더링을 끄는 것이 좋습니다 -webkit-font-smoothing: antialiased.
쉬운! 구조에 SVG.
이것은 간단한 방법입니다.
svg{
font: bold 70px Century Gothic, Arial;
width: 100%;
height: 120px;
}
text{
fill: none;
stroke: black;
stroke-width:0.5px;
// stroke-dasharray: 2,2;
stroke-linejoin: round;
animation: 2s pulsate infinite;
}
@keyframes pulsate {
50%{ stroke-width:4px; }
}<svg viewBox="0 0 450 50">
<text y="40">Scalable Title</text>
</svg>좀 더 복잡한 데모가 있습니다.
그림자가 획처럼 보일 때까지 여러 번 흐리게 그림자를 쌓을 수 있습니다.
.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;
}
바이올린은 다음과 같습니다. http://jsfiddle.net/GGUYY/
나는 여러 가지 방법으로 실패하기 때문에 해결책이라고 부르지 않지만 누군가가 관심을 가질 수 있도록 언급했습니다.
- 오래된 IE에서는 작동하지 않습니다.
- 모든 브라우저에서 상당히 다르게 렌더링됩니다.
- 너무 많은 그림자를 적용하는 것은 처리하기가 매우 무겁습니다.
배경 이미지에 오버레이 할 때 작동하는 크로스 브라우저 텍스트 스트로크 솔루션을 찾고있었습니다. 여분의 마크 업, js 및 IE7-9 (6 테스트하지 않음)에서 작동하지 않고 앨리어싱 문제를 일으키지 않는 해결책이 있다고 생각합니다.
이것은 IE ( http://caniuse.com/#search=text-shadow )를 제외하고 훌륭한 지원을 제공하는 CSS3 텍스트 섀도우 를 사용한 다음 IE 용 필터 조합을 사용하는 조합입니다. 현재 CSS3 텍스트 입력 지원이 좋지 않습니다.
IE 필터
글로우 필터 ( http://www.impressivewebs.com/css3-text-shadow-ie/ )는 끔찍해 보이므로 사용하지 않았습니다.
David Hewitt의 답변 에는 여러 방향으로 그림자 필터를 추가하는 것이 포함되었습니다. 그런 다음 ClearType은 불행히도 제거되어 별칭이 잘못 지정된 텍스트로 끝납니다.
그런 다음 useragentman 에서 제안한 일부 요소를 그림자 필터와 결합했습니다 .
함께 모으기
이 예는 흰색 선이있는 검은 색 텍스트입니다. IE를 대상으로하는 방식으로 조건부 HTML 클래스를 사용하고 있습니다 ( 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;
}
이 답변을 추가하면됩니다. 텍스트 "쓰다듬 기"는 "개요"와 다릅니다
개요는 좋아 보인다. 쓰다듬어 보인다.
다른 곳에 나열된 SVG 솔루션도 같은 문제가 있습니다. 개요 를 원한다면 텍스트를 두 번 넣어야합니다. 한 번 스트로크하고 다시 쓰지 않았습니다.
쓰다듬 기가 개요가 아닙니다
body {
font-family: sans-serif;
margin: 20px;
}
.stroked {
color: white;
-webkit-text-stroke: 1px black;
}
.thickStroked {
color: white;
-webkit-text-stroke: 10px black;
}
.outlined {
color: white;
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;
}
.thickOutlined {
color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}
svg {
font-size: 40px;
font-weight: bold;
width: 450px;
height: 70px;
fill: white;
}
.svgStroke {
fill: white;
stroke: black;
stroke-width: 20px;
stroke-linejoin: round;
}<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>
<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>
<svg viewBox="0 0 450 70">
<text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
<text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
<text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>추신 : SVG를 임의의 텍스트의 올바른 크기로 만드는 방법을 알고 싶습니다. svg를 생성하고 자바 스크립트로 쿼리하여 범위를 얻은 다음 결과를 적용하는 것이 상당히 복잡하다고 생각합니다. js가 아닌 쉬운 방법이 있다면 알고 싶습니다.
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>6 가지 그림자로 더 나은 결과를 얻었습니다.
.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;
}
이 SASS 믹스 인은 8 축을 사용하여 부드러운 결과를 제공합니다.
@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;
}
그리고 일반적인 CSS :
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;
두꺼운 스트로크로 작업하는 것은 약간 지저분 해집니다. 만약 당신이 sass의 즐거움을 가지고 있다면 완벽하지 않고이 믹스 인을 시도하고 스트로크 무게에 따라 상당한 양의 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;
}
여러 개의 텍스트 그림자 .. 다음
과 같은 것 :
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);
데모 : http://jsfiddle.net/punosound/gv6zs58m/
나는이 문제도 있었고 text-shadow, 모서리가 나빠 보이기 때문에 옵션이 아니 었습니다 (많은 그림자가 없다면). 흐리기를 원하지 않았으므로 다른 유일한 옵션은 다음을 수행하는 것입니다. 2 div와 배경 div의 경우 원하는 -webkit-text-stroke만큼 큰 윤곽선을 사용할 수 있습니다.
div {
font-size: 200px;
position: absolute;
white-space: nowrap;
}
.front {
color: blue;
}
.outline {
-webkit-text-stroke: 30px red;
user-select: none;
}<div class="outline">
outline text
</div>
<div class="front">
outline text
</div> 이 사용하여, 나는 달성 할 수 있었다 밖으로 때문에, 라인을 stroke-width당신이 있기 때문에 텍스트가 (매우 큰 윤곽과 읽기 쉬운 유지하려면 방법은 옵션이 아니었다 stroke-width윤곽이되지 읽기 쉽게 글자 안에 시작할 때 폭 글자보다 커집니다.
참고 : 내가 뚱뚱한 개요가 필요한 이유는 "google maps"에서 거리 레이블을 모방하고 있었기 때문에 텍스트 주위에 뚱뚱한 흰색 후광이 필요했습니다. 이 솔루션은 완벽하게 작동했습니다.
여기 CSS 파일이 있기를 바랍니다.
/* ----- 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 - - - */
참고 URL : https://stackoverflow.com/questions/4919076/outline-effect-to-text
반응형
'Programing' 카테고리의 다른 글
| 스칼라에서 전체 파일을 읽습니까? (0) | 2020.03.14 |
|---|---|
| 도메인 이름에 대한 권한이있는 이름 서버는 어떻게 찾습니까? (0) | 2020.03.14 |
| Subversion에서 커밋되지 않은 변경 사항을 일시적으로 제거하십시오 (일명“git-stash”). (0) | 2020.03.14 |
| github에서 Maven 저장소 호스팅 (0) | 2020.03.14 |
| 각 줄의 시작 부분에 접두사 문자열 추가 (0) | 2020.03.14 |