야콥 Montrasio의 인터넷.

CSS는 텍스트 그림자 덧붙였다.

/ / 2008년 2월 26일 / / 인터넷, 기술

난 주위에 변화가 뭔가 더 좋은 텍스트 - 헤드에 그림자를 추가하기로 결정 블로그. 만약 당신이 아마 그것을 볼 수 있지만 늘 - 세계 브라우저, 3를 사용하시는 경우라면 Safari는 CSS를 가지만을 지원합니다.

지금 잘못, 내가 자신을 사용해 왔습니다 FireFox 꽤 몇 년 동안, 지옥, 우리도 그것에 대해 다시 한 번 더, 아까, 2003 릴리스 파티를 조직에 끌려가지만 않는다면? 하이 델베르크에있는 매우 첫 번째 릴리스, 독일.

하지만 디지털 친구 벤 날 때 사파리 플러그인 Saft 도입, 나는 그것을 밖으로 시도와 함께 sticked, 다시 찾고 적이있다. 사파리 & Saft 함께 정말 견과류에있는 폭스 킥. 그것은 너무 많은 기능을, 여기보세요. 그건 아무것도 뛰어난 기능을 모두 제공에 대한 비용과 근처 - 심각한 블로거와 서퍼를위한이 있어야합니다.

사파리 웹 사이트는 것은 훨씬 더 - 텍스트에 어떤 종류의 안티 앨리어싱을 사용하여 보이게됩니다. 서핑을 많이하고 만약 그렇다면 훨씬 더 편안하게 많이 읽어 보시기 바랍니다.

어쨌든, CSS를 다시합니다. 그래서 당신의 스타일 시트에있는 CSS를 선언하는 방법을 사용합니까?

다음은 몇 가지 예입니다.

당신은 사파리와 함께이 글을 읽을 수있습니다.

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # 000 0px 0px 3px; 색상 : # fff 사용합니다.

붉은 그림자 어때요?

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # F00을 사용 2px 2px 2px;.

우아한 제목 그늘이 필요하면?

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # AAA를 사용 1px 1px 1px;.

여기에 텍스트 위의 몇 가지 그림자가 ...

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # 666 0px - 5px 1px을 사용합니다.

푸른 그림자가 멀리 떨어져? 문제 없어!

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # 00f 15px 15px 3px 사용합니다.

마지막 예 : 익스 트림 그림자가 흐려!

위의 단락은 다음과 같은 텍스트 - 그림자 설정 : 텍스트 - 그림자 : # 6f0 3px 3px 5px 사용합니다.

좋아요, 그쵸?

꽤을 적용하기 위해서는 일반적으로 당신의 그림자를 설정하는 4 개의 값을 가질 쉽습니다 :

1. 우선 당신은 그림자의 색상을 설정할 수있습니다. # F00 빨간색, # 0f0 대한 등등에 녹색. 모든 16 진수 색상이 가능합니다.

2. 이제는 (예 : 5px)에 대한 텍스트 (의 x - 축), 5 픽셀로 수평 공간을 설정할 수있습니다. 임의의 숫자가, 난 여기 픽셀을 사용하는 것이 좋습니다.

3. 그럼 수직 공간은 텍스트에 상대 (y를 - 축), 예 (3px)에 대한 3 화소.

4. 마지막 설정은 그림자해야 덩어리죠의 금액입니다. 모든 설정이 넘는 동안 5px 만드는 그림자가 완전히 읽을 가치가 전혀 덩어리죠 0px의 그늘을 제공합니다. 내가 1px 및 3px 사이로 설정할 것을 권해드립니다.

만약 자네가 그걸 시도 ... 베타 버전을 다운로드 여기를주고 싶어 아, 그리고 Windows 용 사파리도 이제 사용할 수있습니다!

당신이 볼 수 있듯 (해당되는 경우),이 꽤 멋진 선언과 꽤 헤드 라인과 같은 이미지를 사용하지 않고도 스타일링에 유용합니다 사파리를 사용합니다. 만약 다른 브라우저도 지원하는 것이 ...

의 미래를 어떻게 왔죠 보자!