설정한 폰트 유무에 따라 또는 사용하는 브라우저에 따라 달리 보일 수 있다는 단점은 있습니다.
head.php
mobile/head.php
1 | <div id="logo"> |
2 | <a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/logo.jpg" alt="<?php echo $config['cf_title']; ?>"></a> |
3 | </div> |
를...
1 | <div id="logo"> |
2 | <a href="<?php echo G5_URL ?>"> |
3 | <p style="font-size:1.6em;font-weight:bold;color:#585858;text-align:left;text-shadow: #dcdcdc 3px 3px;"> |
4 | Homepage's Name |
5 | </p> |
6 | </a> |
7 | </div> |
로 바꿉니다.
폰트 크기나 색상은 원하는대로 수정해보세요.
css 텍스트 효과 : https://msdn.microsoft.com/ko-kr/library/jj680149(v=vs.85).aspx
CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법
2014 년 3 월 3 일
읽을 7 분.
인터넷 익스플로러 10은 사용하는 하드웨어 가속 텍스트 그림자에 대한 지원이 도입 텍스트 그림자 캐스 케이 딩 스타일 시트 (CSS) 속성을. 텍스트 그림자 속성에 대한 지원 은 웹 개발자가 가장 많이 요구하는 기능 중 하나였습니다. 텍스트의 인라인 이미지를 사용하지 않고 이전에 어렵거나 불가능한 텍스트 효과를 구현할 수 있습니다.
CSS 텍스트 그림자는 World Wide Web Consortium (W3C)의 CSS 텍스트 레벨 3 사양 의 섹션 10.3 에 정의되어 있습니다. Internet Explorer 10의 웹 페이지 외에도 JavaScript를 사용하는 Windows Store 앱도 텍스트 그림자 속성을 지원합니다 . 이 항목에서는 텍스트 그림자 구현의 기본 사항에 대해 설명하고 텍스트 그림자 가 가능한 재미있는 텍스트 효과를 보여줍니다 .
이 항목에는 다음 섹션이 포함되어 있습니다.
텍스트 그림자 속성의 구문
속성 값 지정
과거의 개선
폴백 (fallback) 동작
텍스트 그림자 시도
다음 단계
텍스트 그림자 속성의 구문
텍스트 그림자를 사용하여 텍스트에주의를 집중시키고 깊이있게 표현하십시오. 텍스트 그림자 를 사용 하여 대비를 추가하고 이미지 또는 색상 배경 위에 텍스트의 가독성을 향상시킵니다. Internet Explorer 10 및 기타 널리 사용되는 대부분의 브라우저는 텍스트 그림자 표준을 지원하기 때문에 공급 업체 접두사 (예 : "-ms-", "-webkit", "-moz-"등)가 필요하지 않습니다. 따라서 이미 텍스트 섀도 를 사용하는 사이트 는 Internet Explorer 10에서 자동으로 작동합니다.
텍스트 그림자 속성은 지정된 텍스트에 그림자 효과를 적용하고 구현하기 쉽습니다. 당신이 사용했다면 박스 그림자 속성을, 당신은 이미 텍스트 그림자 속성의 구문을 알고; 그들은 거의 동일합니다.
재산 기술
텍스트 그림자
여기에 지정된대로 하나 이상의 공백으로 구분 된 그림자 매개 변수 목록. 두 개 이상의 그림자가 지정되면 매개 변수 목록은 서로 쉼표로 구분됩니다.
수평 오프셋 필수 항목. 양수 값은 텍스트의 오른쪽으로 오프셋 된 음영을 그립니다. 음수 길이는 왼쪽에 있습니다.
수직 오프셋 필수 항목. 양수 값은 텍스트 아래 오프셋 된 그림자를 그립니다. 위의 음수 값입니다.
흐림 거리 음수 값은 허용되지 않습니다. 흐림 값이 0이면 그림자 가장자리가 선명합니다. 그렇지 않으면 값이 클수록 그림자의 가장자리가 흐려집니다.
spread distance 양수 값은 음영 모양이 지정된 반경만큼 모든 방향으로 확장되도록합니다. 음수 값을 지정하면 그림자 모양이 축소됩니다. 이 값은 모든 브라우저에서 지원되지 않을 수 있습니다.
color 지원되는 CSS 색상 값 입니다.
의 구문 텍스트 그림자 속성에 대한 구문과 동일 박스 그림자 것을 제외하고, 재산 텍스트 그림자 속성은 "삽입"키워드를 인식하지 못합니다.
다음은 text-shadow 속성 의 기본 예제입니다 . 다음 스 니펫은 어두운 회색 그림자를 작은 흐림 값을 적용하여 적용된 텍스트 아래 및 오른쪽으로 약간 적용합니다.
부
.myselector {
...
text-shadow: 0.1em 0.1em 0.15em #333;
}
선택기를 짧은 텍스트 블록에 적용하면 다음과 같은 결과가 발생합니다.
속성 값 지정
text-shadow 속성 에는 최소한 두 개의 값인 x 및 y 오프셋을 지정해야합니다.
부
.shadow1 {
color: black;
text-shadow: 2px 2px;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
대개 그림자의 색상을 지정하려고합니다. 다음 예제에서 "검정색"은 텍스트 자체의 색을 나타내며 "# 87CEEB"는 음영 색의 16 진수 표현으로 파란색 음영을 나타냅니다.
부
.shadow2 {
color: black;
text-shadow: #87CEEB 1px 3px;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
color 매개 변수는 그림자 정의의 시작 또는 끝에 위치 할 수 있습니다. 가우시안 흐림 알고리즘을 사용하여 그림자가 흐려져야하는 정도를 나타내는 흐림 반경을 추가 할 수도 있습니다. 예를 들어 다음 예제 코드를 참조하십시오.
부
.shadow3 {
color: black;
text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
스프레드 거리를 지정할 수도 있습니다. 양수 값은 그림자가 확장되는 양을 나타내며 음수 값은 그림자가 계약하는 양을 나타냅니다. 다음 코드 예제에서는 양수 확산 거리를 적용했습니다.
부
.shadow4 {
color: black;
text-shadow: skyblue 0px 0px 0px 4px;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
긍정적 인 스프레드를 가진 텍스트 그림자 속성 의 효과 는 종종 제로 - 스프레드 그림자를 충분히 그려서 모방 할 수 있습니다. 그러나이를 달성하기위한 마크 업은보다 복잡하고 성능이 낮고 품질이 낮은 그림자를 초래할 수 있습니다. 하지만이를 지원하지 않는 브라우저에서 스프레드를 모방하는 데 필요할 수도 있습니다. 예를 들어 다음 코드 예제를 생각해보십시오.
부
.shadow4_nospread {
color: black;
text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px,
skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px,
skyblue 1.4px -1.4px, skyblue -1.4px 1.4px;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
spread 매개 변수를 사용하면이 효과를 훨씬 쉽게 얻을 수 있습니다. 다음 예제와 같이 음수 값을 사용할 때 불가능한 효과를 만들 때도 사용할 수 있습니다.
부
.shadow5 {
text-shadow: 5px 5px 2px -2px #9966CC;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
여기에 표시된 다섯 개의 매개 변수는 단일 그림자를 설명합니다. 텍스트 그림자 속성은 정면에서 위로 적층 그림자의 목록을 지원한다.
다음 예제는 앞에서 뒤쪽으로 나열된 5 개의 그림자가 합성 된 텍스트 그림자를 보여줍니다.
부분적으로 투명한 흰색 그림자
노란 그림자
위에 그려지는 오렌지 그림자
붉은 그림자
부
.shadow6 {
text-shadow: rgba(255, 255, 255, .5) 1px 1px,
yellow 2px 3px,
rgba(255, 153, 0, .7) 3px 6px,
rgba(255, 0, 0, .5) 4px 8px;
}
앞의 코드 스 니펫은 다음과 같이 나타납니다.
이 글을 쓰는 시점에서 브라우저 간 거리 매개 변수에 대한 지원이 다양하기 때문에 최대한의 상호 운용성을위한 대체 수단을 고려해야합니다. spread 매개 변수는 지원하지 않는 브라우저에서 유효하지 않은 것으로 구문 분석됩니다. 마지막 매개 변수를 사용하기로 결정한 경우 마크 업 에 spread 매개 변수가없는 텍스트 그림자 의 대체 버전이 포함되어 있는지 확인하십시오 . 그렇지 않으면 스프레드를 지원하지 않는 브라우저에 텍스트 그림자가 표시되지 않습니다.
부
.shadow7 {
color: black;
text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
}
spread 매개 변수를 지원하지 않는 브라우저에서 위 코드 스 니펫은 다음과 같이 나타납니다.
Internet Explorer 10을 비롯한 spread 매개 변수를 지원하는 브라우저에서 앞의 코드 조각은 다음과 같이 나타납니다.
텍스트를 펼치면 스트로크 된 텍스트, 어두운 흐린 그림자 또는 더 어두운 그림자와 같은 더 많은 효과를 사용할 수 있습니다.
과거의 개선
CSS 필터에 대한 Windows Internet Explorer의 독점 지원에 익숙하다면 DXImageTransform.Microsoft.Shadow , DXImageTransform.Microsoft.DropShadow , DXImageTransform.Microsoft.Glow 및 DXImageTransform을 사용하여 이전에 텍스트 그림자를 생성 할 수 있음을 이미 알고있을 것입니다 .Microsoft . 블리 필터. 브라우저가 이전 문서 모드에있는 경우를 제외하고 CSS 필터는 Internet Explorer 10에서 더 이상 지원되지 않습니다. 문서 모드에 대한 자세한 내용은 문서 호환성 정의를 참조하십시오 .
이러한 DXImageTransform 필터를 사용하여 텍스트 그림자 효과를 얻는 대신 Internet Explorer 10 의 text-shadow 속성을 사용하십시오 . Internet Explorer 10은 표준을 준수하고 상호 운용 가능한 방식으로 효과를 얻을뿐만 아니라 그래픽이 하드웨어 가속화되어 중요한 비추천 된 대안에 비해 성능이 향상되었습니다.
폴백 (fallback) 동작
text-shadow 속성을 사용하는 사이트는 텍스트 그림자를 지원하지 않는 브라우저에서 렌더링 될 때 정상적으로 성능이 저하됩니다. 많은 용도에서 텍스트 그림자 이제 웹에서 텍스트 그림자 시각적 인 깊이를 추가 미묘한 장식입니다. 그러나 텍스트 그림자 는보다 창조적 인 시각 효과로 사용할 수도 있습니다. 텍스트 그림자 속성을 지원하지 않는 브라우저를 고려해야 합니다. 예를 들어 Windows Internet Explorer 9에서 볼 수 있듯이 다음 이미지는 text-shadow 속성이 적용된 약간의 텍스트입니다 .
텍스트는 Internet Explorer 10 및 텍스트 그림자 를 지원하는 다른 브라우저에서 다음과 같이 표시됩니다 .
텍스트 섀도우 지원 기능이없는 브라우저를 지원해야하는 경우 CSSOM (Text Object Shadows)의 textShadow 에 대한 기능 감지 기능을 사용 하여 예술적 자유를 취할 때 텍스트의 색상을 조건부로 변경하십시오.
예를 들어, 다음은 텍스트 그림자를 지원하지 않는
브라우저에서 볼 때 적절한 대체 동작을 생성합니다 .
자바 스크립트
부
if (typeof document.body.style.textShadow == 'undefined') {
// text-shadow is not supported
document.body.style.color = 'black';
}
else {
// text-shadow is supported
document.body.style.color = '#FFFFCC';
document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}
'사이트관리' 카테고리의 다른 글
| 스마트폰 스캐너 (0) | 2019.01.30 |
|---|---|
| 네트워크 폴더 동기화 프로그램 (0) | 2019.01.30 |
| 게시판 안에 트위터 유튜브 인스타그램 자동변환 js 파일 (0) | 2019.01.14 |
| 포인트랭킹 (0) | 2019.01.13 |
| 완료 표시 (0) | 2019.01.07 |
| 인덱스에 게시판 출력하기. (0) | 2019.01.01 |
| 사이트맵 메이커 Sitemap Maker (0) | 2018.12.29 |
| 사이트 파일 비교 프로그램 비욘드컴페어 한글판 (0) | 2018.12.29 |