내가 찾고있는 것 :
캐릭터의 절반 을 스타일링하는 방법 . (이 경우 글자의 반은 투명합니다)
내가 현재 검색하고 시도한 것 (행운 없음) :
- 문자 / 글자의 절반 스타일링 방법
- CSS 또는 JavaScript를 사용하여 문자 스타일링
- 캐릭터의 50 %에 CSS 적용
아래는 내가 얻으려고하는 예입니다.
이를 위해 CSS 또는 JavaScript 솔루션이 있습니까, 아니면 이미지를 사용해야합니까? 이 텍스트는 동적으로 생성되므로 이미지 경로를 사용하지 않는 것이 좋습니다.
최신 정보:
많은 사람들이 왜 캐릭터의 절반을 스타일링하고 싶은지 물었으므로 이것이 바로 그 이유입니다. 우리 도시는 최근 새로운 “브랜드”를 정의하기 위해 25 만 달러를 소비했습니다. 이 로고 는 그들이 만들어 낸 것입니다. 많은 사람들이 단순성과 창의성 부족에 대해 불평했으며 계속 그렇게하고 있습니다. 저의 목표는이 웹 사이트 를 농담으로 만드는 것이 었습니다 . ‘할리팩스’를 입력하면 무슨 뜻인지 알 수 있습니다.
답변
이제 플러그인으로 GitHub에!
자유롭게 포크하고 개선하십시오.
데모 | Zip 다운로드 | Half-Style.com (GitHub로 리디렉션)
- 단일 문자를위한 순수 CSS
- 텍스트 또는 여러 문자의 자동화에 사용되는 JavaScript
- 시각 장애인을위한 스크린 리더를위한 텍스트 접근성 유지
1 부 : 기본 솔루션
데모 : http://jsfiddle.net/arbel/pd9yB/1694/
이것은 모든 동적 텍스트 또는 단일 문자에서 작동하며 모두 자동화됩니다. 대상 텍스트에 클래스를 추가하기 만하면 나머지는 처리됩니다.
또한 맹인 또는 시각 장애인을위한 화면 판독기의 경우 원본 텍스트의 접근성이 유지됩니다.
단일 문자에 대한 설명 :
순수한 CSS. .halfStyle반 스타일을 원하는 문자가 포함 된 각 요소에 클래스 를 적용 하기 만하면됩니다.
캐릭터를 포함하는 각 span 요소에 대해 here data-content="X"와 같은 데이터 속성을 만들고 의사 요소 사용 content: attr(data-content);에서 .halfStyle:before클래스가 동적 이므로 모든 인스턴스에 대해 하드 코딩 할 필요가 없습니다.
모든 텍스트에 대한 설명 :
textToHalfStyle텍스트를 포함하는 요소 에 클래스를 추가 하기 만하면 됩니다.
// jQuery for automated mode
jQuery(function($) {
var text, chars, $el, i, output;
// Iterate over all class occurences
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// Set the screen-reader text
$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// Reset output for appending
output = '';
// Iterate over all chars in the text
for (i = 0; i < chars.length; i++) {
// Create a styled element for each character and append to container
output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// Write to DOM only once
$el.append(output);
});
});.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: black; /* or transparent, any color */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: #f00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>
<hr/>
<p>Automated:</p>
<span class="textToHalfStyle">Half-style, please.</span>( JSFiddle 데모 )
2 부 : 고급 솔루션-독립적 인 좌우 부품
이 솔루션을 사용하면 왼쪽 및 오른쪽 부분을 개별적으로 그리고 독립적으로 스타일링 할 수 있습니다 .
모든 것이 동일하며 고급 CSS만이 마법을 수행합니다.
( JSFiddle 데모 )
3 부 : 믹스 매치 및 개선
이제 가능한 것이 무엇인지 알았으므로 변형을 만들어 봅시다.
수평 절반 부품
-
텍스트 그림자가없는 경우 :
-
각 절반 부분에 대한 텍스트 그림자의 가능성 :
( JSFiddle 데모 )
-세로 1/3 부분
-
텍스트 그림자가없는 경우 :
-
1/3 부분마다 독립적으로 텍스트 그림자 가능성 :
( JSFiddle 데모 )
수평 1/3 부
-
텍스트 그림자가없는 경우 :
-
1/3 부분마다 독립적으로 텍스트 그림자 가능성 :
( JSFiddle 데모 )
-KevinGranger의 하프 스타일 개선
( JSFiddle 데모 )
@SamTremaine에 의한 HalfStyle 의 필링 스타일 개선
( JSFiddle 데모 및 samtremaine.co.uk )
파트 4 : 생산 준비
동일한 페이지의 원하는 요소에 사용자 정의 된 다른 하프 스타일 스타일 세트를 사용할 수 있습니다. 여러 스타일 세트를 정의하고 플러그인에 사용할 스타일 세트를 지정할 수 있습니다.
플러그인은 data-halfstyle="[-CustomClassName-]"대상 .textToHalfStyle요소 에서 data 속성 을 사용 하고 필요한 모든 사항을 자동으로 변경합니다.
따라서 텍스트 추가 textToHalfStyle클래스 및 데이터 속성을 포함하는 요소에서 간단히 data-halfstyle="[-CustomClassName-]". 플러그인은 나머지 작업을 수행합니다.
또한 CSS 스타일 세트의 클래스 정의 [-CustomClassName-]는 위에서 언급 한 부분 과 일치 하며에 연결됩니다 .halfStyle..halfStyle.[-CustomClassName-]
jQuery(function($) {
var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
// Iterate over all class occurrences
$('.textToHalfStyle').each(function(idx, halfstyle_el) {
$halfstyle_el = $(halfstyle_el);
halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
halfstyle_text = $halfstyle_el.text();
halfstyle_chars = halfstyle_text.split('');
// Set the screen-reader text
$halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
// Reset output for appending
halfstyle_output = '';
// Iterate over all chars in the text
for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
// Create a styled element for each character and append to container
halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
}
// Write to DOM only once
$halfstyle_el.append(halfstyle_output);
});
});/* start half-style hs-base */
.halfStyle.hs-base {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
pointer-events: none; /* so the base char is selectable by mouse */
overflow: hidden;
color: #f00; /* for demo purposes */
}
/* end half-style hs-base */
/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent;
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-horizontal-third */
/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
position: relative;
display: inline-block;
font-size: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */
/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
display: block;
margin: 200px 0 0 0;
text-align: center;
}
.halfStyle.hs-KevinGranger {
font-family: 'Libre Baskerville', serif;
position: relative;
display: inline-block;
width: 1;
font-size: 70px;
color: black;
overflow: hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
}
.halfStyle.hs-KevinGranger:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: white;
}
/* end half-style hs-KevinGranger<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
<span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>( JSFiddle 데모 )
답변
플러그인 개발을 마쳤으며 누구나 사용할 수 있습니다! 당신이 그것을 즐기시기 바랍니다.
GitHub에서 프로젝트보기 – 프로젝트 웹 사이트 보기 . (따라서 모든 분할 스타일을 볼 수 있습니다)
용법
우선, jQuery라이브러리가 포함되어 있는지 확인하십시오 . 최신 jQuery 버전을 얻는 가장 좋은 방법은 다음과 같이 헤드 태그를 업데이트하는 것입니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>파일을 다운로드 한 후 프로젝트에 파일을 포함시켜야합니다.
<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>마크 업
splitchar텍스트를 래핑하는 요소에 클래스를 지정한 다음 원하는 스타일을 지정하면됩니다. 예 :
<h1 class="splitchar horizontal">Splitchar</h1>이 모든 작업이 완료되면 다음과 같이 문서 준비 파일에서 jQuery 함수를 호출하십시오.
$(".splitchar").splitchar();커스터마이징
텍스트를 원하는대로 정확하게 보이게하려면 다음과 같이 디자인을 적용하면됩니다.
.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }
그게 다야! 이제 Splitchar플러그인이 모두 설정되었습니다. http://razvanbalosin.com/Splitchar.js/ 에 대한 자세한 정보 .
답변
편집 (oct 2017) :
background-clip또는background-image options모든 주요 브라우저에서 지원됩니다 : CanIUse
예, 하나의 문자와 CSS만으로이 작업을 수행 할 수 있습니다.
그러나 웹킷 및 Chrome 만 해당 :
h1 {
display: inline-block;
margin: 0; /* for demo snippet */
line-height: 1em; /* for demo snippet */
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-size: 300px;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<h1>X</h1>시각적으로 두 문자 (JS, CSS 의사 요소 또는 HTML을 통한 문자)를 사용하는 모든 예제는 잘 보이지만 텍스트 선택 / 잘라 내기 / 텍스트뿐만 아니라 액세스 가능성을 유발할 수있는 DOM에 컨텐츠를 추가한다는 점에 유의하십시오. 붙여 넣기 문제.
답변
JSFiddle 데모
CSS 의사 선택기 만 사용하면됩니다.
이 기술은 동적으로 생성 된 내용과 다른 글꼴 크기 및 너비와 함께 작동합니다.
HTML :
<div class='split-color'>Two is better than one.</div>CSS :
.split-color > span {
white-space: pre-line;
position: relative;
color: #409FBF;
}
.split-color > span:before {
content: attr(data-content);
pointer-events: none; /* Prevents events from targeting pseudo-element */
position: absolute;
overflow: hidden;
color: #264A73;
width: 50%;
z-index: 1;
}동적으로 생성 된 문자열을 감싸려면 다음과 같은 함수를 사용할 수 있습니다.
// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
var output = [];
str.split('').forEach(function(letter) {
var wrapper = document.createElement('span');
wrapper.dataset.content = wrapper.innerHTML = letter;
output.push(wrapper.outerHTML);
});
return output.join('');
}
// Replace the original text with the split-color text
window.onload = function() {
var el = document.querySelector('.split-color'),
txt = el.innerHTML;
el.innerHTML = wrapString(txt);
}답변
그것은 관련이 없을 수도 있지만 아닐 수도 있지만 언젠가는 같은 일을하지만 수평으로하는 jQuery 함수를 만들었습니다.
나는 “스트라이프”라고 불렀습니다. ‘stripe’+ ‘text’데모 : http://cdpn.io/FcIBg
나는 이것이 어떤 문제의 해결책이라고 말하지는 않지만 이미 문자의 절반에 CSS를 적용하려고했지만 수평 적으로 아이디어는 동일합니다. 구현은 끔찍할 수도 있지만 작동합니다.
아, 그리고 가장 중요한, 나는 그것을 만드는 재미가 있었다!
답변
이것에 관심이 있다면 Lucas Bebber의 Glitch는 매우 유사하고 멋진 효과입니다.
다음과 같은 간단한 SASS Mixin을 사용하여 생성
.example-one {
font-size: 100px;
@include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}Chris Coyer의 CSS 트릭 과 Lucas Bebber의 Codepen 페이지 에서 자세한 내용
답변
캔버스에서 못생긴 구현입니다. 이 솔루션을 시도했지만 결과가 예상보다 나빠서 어쨌든 여기 있습니다.
$("div").each(function() {
var CHARS = $(this).text().split('');
$(this).html("");
$.each(CHARS, function(index, char) {
var canvas = $("<canvas />")
.css("width", "40px")
.css("height", "40px")
.get(0);
$("div").append(canvas);
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 130, 0);
gradient.addColorStop("0", "blue");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("0.51", "red");
gradient.addColorStop("1.0", "red");
ctx.font = '130pt Calibri';
ctx.fillStyle = gradient;
ctx.fillText(char, 10, 130);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>