CSS3 배경색 그라디언트 소스를 만들어주는 툴

CSS/CSS3 2012. 3. 3. 16:33

CSS3 배경색 그라디언트 소스를 만들어주는 툴

그라디언트까지 줄수 있게되었는데 하나하나 설명하려 했지만 그보다 툴바가 좋을듯하다

div{ background:-moz-linear-gradient(46% 75% 101deg,
                #18A1AB, #3EC992); 
}
div{background:-webkit-gradient(linear, 50% 71%, 50% 56%,
    from(#312C4A), to(#2F3366), color-stop(.6,#333333));
}

아래는 직접 소스를 구할수 있는 사이트. 모질와 웹킷에따라 선택하면 된다 오페라는 지원안되며 익스플로어는 IE10부터 지원

http://westciv.com/tools/gradientsnustyle/index.html



설정

트랙백

댓글

CSS3 투명도를 가지는 색상값 rgba HSL HSLA

CSS/CSS3 2012. 3. 3. 16:10

CSS3 투명도를 가지는 색상값 rgba HSL HSLA

이전의 생상 키워드는 잘 알것이다.초반에 rgb방식이 있었지만 거의 16진수 코드를 사용하는편

div{ background-color:#000;}
div{ background-color:#00000;}
div{ background-color:rgb(0,0,0);}

 

rgba

rgb는 알다시피 레드, 그린, 블루이고 마지막 a는 알파, 즉 투명도이다.

마지막 투명도는 .3 이면 30%다

div{ background-color:rgba(0,0,0,.3);}

 

HSL HSLA

어렵게 생갈할거없다. 색조,채도, 명도 그리고 마지막은 알파값

div{ background-color: hsl(0,100%,50%);}
div{ background-color: hsla(0,100%,50%,.4);}

 

익스플로어의 경우 최신판인IE9부터 지원된다



설정

트랙백

댓글

CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value

CSS/CSS3 2012. 2. 22. 18:15

CSS3 font-size-adjust 
대채폰트의 크기조절 x-height, Aspect Value

일단 참조할 것

타이포그래피(Typography ) 각 폰트별 x-height 크기 도표  http://blog.naver.com/siatiger
w3c css3 font 소개 :http://www.w3.org/TR/css3-fonts/
웹폰트 Aspect Value http://www.barrypearson.co.uk/articles/text/aspect_values.htm

adjust 란 단어는 “조정하다”란 뜻으로 말 그대로 폰트 크기를 조정해주는 역할을 하는 속성이 font-size-adjust 이다. 영어는 대소문자가 구별되는 언어이고 그 때문에 폰트의 종류에 따라 특히 소문자의 크기가 다르게 표현된다.예를 들어 Verdana 의 대문자가 1 이라면 소문자 크기는 0.58(Aspect Value) 의 크기인 것이다.

주의)아이폰에서 텍스트크기를 정하는 -webkit-text-size-adjust와 혼동하지말것!

이러한 이유 때문에 브라우저에서 만약 첫 번째 font 를 사용할 수 없게 될 경우 두 번째로 지정된 폰트를 랜더링하는데 글자 크기가 같은 px 라도 들쭉날쭉하게 보여지는 것이다.


다른 폰트라면 같은 크기라도 글자크기가 다른것은 당연하다
사진은 대문자지만 적용은 x-height이므로 소문자임을 주의

이런 것을 방지하기 위해 font-size-adjust 속성을 사용하게 되면 서로 다른 폰트 종류라도 소문자의 처음 지정된 폰트의 크기로 유지할 수 있고 가독성을 높일 수 있다..  하지만 현재 Firefox 에서만 지원한다

1. Aspect Value 확인해보기
W3C에서 보여주는 값은 다음과 같다. http://www.barrypearson.co.uk/articles/text/aspect_values.htm
글자크기에 따라 치수변동이 조금있다.

Family name Stated aspect value Measured aspect value
These are in the W3C order. These are values quoted by W3C. These use the actual x-height at 100px.
Verdana 0.58 0.55
Comic Sans MS 0.54 0.56
Trebuchet MS 0.53 0.52
Georgia 0.50 0.48
Myriad Web 0.48 0.48
Minion Web 0.47 (This was only ever supplied by MS as part of the IE 4 supplemental font pack add-on, and is not on my PC).
Times New Roman 0.46 0.45
Gill Sans 0.46 (Not on my PC).
Bernhard Modern 0.4 (Not on my PC).
Caflisch Script Web 0.37 (Not on my PC).
Flemish Script 0.28 (Not on my PC).


font-size-adjust가 적용될때  공식은 다음과 같다

c = (a/a’)s (c=조정될 글꼴 크기, a=font-size-adjust 에 지정된 숫자, a’=현재 지정된 글꼴의 소문자 비율)이다. 예를 들어, 14pt Verdana의 font-size-adjust를 1로 지정하면(Verdana의 소문자 높이 비율 기본값은 0.58) 14*1/0.58pt의 크기(약 24pt)로 표시된다.

에제로는 Times New Roman를 선택했다. 0.46 이다.  font-size-adjust에  0.46을 주면 공식에서 나누어 떨어지므로 font-size-adjust를 설정하지않은 것과 똑같이 나와야 한다

<p><span id="num1">Aa</span><span id="num2">Aa</span></p>

body{font-size:400px;}
p{     margin:100px;}/*가운데 보기위한 정렬*/
span{  border:solid 1px green; }/*크기비교위한 테두리*/
#num1{ font-family:Times New Roman ;}
#num2{ font-family:Times New Roman; 
       font-size-adjust:0.46; 
}


http://sianasiatiger.cafe24.com/study/font-size-adjust-01.html

그림과 같이 문자가 크다보니 약간의 차이가 있다 직접 조절해본 결과는  0.447

#num2{ font-family:Times New Roman; 
       font-size-adjust:0.447; 
}

http://sianasiatiger.cafe24.com/study/font-size-adjust-02.html
이건 조절한결과


2. 다른 폰트의 같은 크기의  x-height 조절
폰트는 Verdana 와 Times New Roman을 선택했다
위에서 확인 해봤듯이 400px에서 값은 0.447이였다.

그러면 Verdana에 0.447을 정해주면 된다.

body{font-size:400px;}
#num1{ font-family:Times New Roman; }
#num2{ font-family:Verdana; 
       font-size-adjust:0.447; 
}


최종결과 폰트특성상 아주 약간 차이날뿐 같게 된것을 볼 수 있다.
http://sianasiatiger.cafe24.com/study/font-size-adjust-03.html


앞서 말했지만 역시 문제는 아직 파이어폭스만 지원한다는 점


설정

트랙백

댓글

  • yyy 2014.10.20 14:18 ADDR 수정/삭제 답글

    감사합니다. 퍼갑니다.

CSS (CSS3) 속성선택자 (attribute selector)

CSS/CSS3 2011. 12. 30. 13:02

CSS (CSS3) 속성선택자 (attribute selector)

CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다.


<p><a title="tistory" href="#">티스토리</a></p> 
<p><a title="naver" href="#">네이버</a></p> 
<p><a title="potal daum site" href="#">다음</a></p> 
<p><a title="nate-mobile" href="#">네이트</a></p> 
<p><a title="dreamwiz" href="#">드림위즈</a></p> 
<p><a title="yahoo" href="#">야후</a></p> 
<p><a title="TheBestgoogleWeb" href="#">구글</a></p>

이번엔 CSS를 보자 정의 한것

[attr] : 속성값을 가지는경우
[attr=" "] : 속성값이 정확히 일치
[attr~=" "] : 속성값이공백으로 구분한 경우
[attr|=" "] 속성값이 하이픈으로 구분한 경우
아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우
[attr$=" "]주어진값으로 끝나는경우
[attr*=" "] 속성값이 일부일치한다면 적용

아래는 적용한 예제다


/*title 속성을 가지고 있는 엘리먼트에 모두적용*/
a[title]{border: 1px solid #999; font-size:3em;}
/*title 속성값 naver와 정확히 일치하는 경우*/
a[title="naver"] {color:#0F0;}
/*title 속성값인 daum을 공백으로 구분한 경우*/
a[title~="daum"] {background-color: #09F;}
/*title 속성값인 nate를 하이픈으로 구분한 경우*/
a[title|="nate"] { color:#F00;}
/*title 속성값인 dre로 시작한경우 */
a[title^="dre"] {background-color:#FF0;}
/*title 속성값인 hoo로 끝나는경우*/
a[title$="hoo"] {background-color:#60F;}
/*title 속성값인 google로 일부일치하는경우*/
a[title*="google"] {background-color:#666;}

완성된 예제를 확인하려면 아래주소로

http://sianasiatiger.cafe24.com/study/CSS_selector_attribute.html

*주의 : 속성값의 대소문자는 인식은다르다.google과 Google은 다르단 말


설정

트랙백

댓글

CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3

CSS/CSS3 2011. 12. 29. 18:41

선택자(selectors) - 유사클래스(pseudo-class) Part3

:first-letter :first-line

텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자


<p>The moment Alice appeared, she was appeal......</p> 
<p>The executioner's argument was, that you couldn't cut..</p> 
<p>The executioner's argument was, that you couldn't...</p> 

위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다.


 p {     /*기본설정*/
		font-size: 16px;
		line-height: 24px;
		color: #666; }

  /*첫문단의 첫번째글자 T를 꾸민다*/
	p:first-of-type:first-letter {
		color: red;
		font-size: 3em;
		float: left;
		margin-right: 5px; }	

 /*첫문단의 첫번째줄*/
	p:first-of-type:first-line {
		font-size: 1.25em;
		font-weight: bold;
		color: #000; 
}

:before :after

위의 내용은 이상한나라의 앨리스이다. 이번엔 :before :after 로 엘리먼트앞뒤를 꾸며보자. 이들은 이름과 같이 엘리먼트 앞뒤를 말하는데 그 공백을 의미한다


<h3>이상한 나라의 앨리스</h3>

css에서는 별도의 이미지를 사용했다.


h3:before {
	  	content: url(images/bullet-02.png);
	}
h3:after {
	       content: url(images/bullet-01.png);
	}	

직접확인해본바로는 여기선 우리가 흔히 쓰는 background로는 먹히지않았다. display: block; 과 크기지정을 해도마찬가지 아마공백처리되기에 그런듯하다. 대신 content를 사용한다 content에 대해서 차후에 설명

예제를 확인하려면 여기http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_03.html


설정

트랙백

댓글

CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2

CSS/CSS3 2011. 12. 29. 15:23

선택자(selectors) - 유사클래스(pseudo-class) Part2

:empty

공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다.

<div></div>

div크기만 정해줬고 배경색을 지정했다.


div{width:100px; height:100px;} 
div:empty{ background:#000;}

:root

문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다.

:only-child

유일자식으로 자식이 하나밖에 없을때 유용하다.


<ul> 
  <li>첫번째 자식이고</li> 
  <li>두번째 자식이므로 적용안됨</li> 
  </ul> 
  <ul> 
  <li>자식하나뿐임</li> 
</ul>

아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다.


li:only-child {color: #F00;}

:only-of-type

단하나뿐인 엘리먼트일때 시용한다

:lang

특정언어가 문서에 있을때 사용한다. 명확히라기위해서 html엘리먼트내에 어트리뷰트를 설정해야한다. 아래는 ISO지정 국가코드

http://www.w3schools.com/tags/ref_language_codes.asp

<p>이 책은 프랑스의 어느 유명한 작가가 쓴글입니다</p> 
<p lang="fr">Ce livre est un artiste célèbre en France est sseungeul</p>
p:lang(fr){ color:#F00;}

위와 같을경우 아래 프랑스어가 빨간색으로 된다

:not()

스타일을 적용하되 괄호안의 지정자는 적용되지 않게한다. 아래의 예를보자


<p>여긴 적용됩니다</p> 
<p>여긴 적용됩니다</p> 
<p class="words">여긴 적용 안됩니다</p> 
<p class="words">여기도 적용 안됩니다</p> 

p:not(.words){ font-size:24px; color:#336;}

위에 두개는 적용되고 괄호안에 클래스인 words는 적용안된다

예제를 보려면 아래를 보자

http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_02.html



설정

트랙백

댓글

CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1

CSS/CSS3 2011. 12. 29. 14:02

선택자(selectors) - 유사클래스(pseudo-class) Part1

너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조

CSS 링크 스타일 기초

순서는 LoVe:HAte 를 상기 하자

CSS :tager 동적 유사 클래스

:traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html

:focus 유사클래스

엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자


<form> 
<input type="text" class="focus" value="이름"> 
<input type="button" class="active" value="Search"> 
</form>

위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다.

CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover focus activated로 해야한다


	input {
		border: 3px solid #999;
		background-color: #ccc;
		color: #999;
		padding: 0 5px;
		font-size: 2em; }
	input:hover {
		border-color: #c99;
		color: #666; }
	input:focus {
		border-color: #f00;
		background-color: #fff;
		color: #000);
		outline: none; }
	input:active {
		color:  #f00;
		border-color:  #f00;
		background-color: #000;}

자식관련 유사클래스

CSS3에서는 id라던가 class지정없이 지정하기쉬워졌다 특히나 리스트 같은 엘리먼트에서는 더욱편하다.첫번째 자식을 선택한다거나 N번째 자식 같은 선택이 가능하다. 아래가 그대표적인것들

  • :first-child 첫번째 자식을 말한다
  • :last-child 마지막자식
  • :nth-child(number) 위에서 괄호안에 숫자순서에 등장하는 자식
  • :first-of-type 첫번쩨 엘리먼트
  • :last-of-type 마지막엘리먼트
  • :nth-of-type(number)
  • :nth-last-of-type(number)

아래 예제를 보자.


<ol> 
<li>첫번째 자식, 첫번째 타입</li> 
<li>두번째 자식</li> 
<li>세번째 타입</li> 
<li>밑에서 두번째 타입</li> 
<li>마지막자식, 마지막 타입 </li> 
</ol>

리스트에서 턱스트는 엘리먼트 위치를 말해주고 있다.이에대해 CSS를 정의 해보자


li:first-child { font-size: 1.1em; }
/*첫번쩨 자식의 폰트크기 */
li:first-of-type { color: red; }
/*첫번쩨 엘리먼트*/
li:nth-child(2){ color :#0F0;}
/*두번째 자식의 폰트컬라*/
li:nth-of-type(3) { font-size: 1.5em }
/*세번째 엘리먼트의 폰트크기*/
li:nth-last-of-type(2)  { font-size: 2em; }
/*뒤에서 두번째 엘리먼트의 폰트크기*/
li:last-of-type { color: red; }
/* 마지막 엘리먼트의 폰트색깔*/
li:last-child { font-size: 2.5em; }
/*마지막 자식의 폰트크기조절*/

위와 같이 별도 클래스나 아이디 지정없이 지정해줄수 있으니 편해졌다.적용된예제는 아래

http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_01.html



설정

트랙백

댓글

  • 이코스타 2013.05.10 08:52 ADDR 수정/삭제 답글

    focus 스펠 틀린거 고치셔도 될듯해요~
    잘 보고 갑니다!! ^^

CSS3 스크롤에 움직이는 입체 이미지

CSS/CSS3 2010. 7. 13. 22:22

오직 css3만을 사용한다. 스크롤에 따라서 움직임

본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/

필요로 사용된 이미지는 두개로 하나는  병이고 하나는 라벨

아 그리고 테스트결과 IE6 빼고 다적용됩니다.

코드는 무지무지 길다.

개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html



<div id="coke">
<div id="y">
<p id="x1"></p>
<p id="x2"></p>
<p id="x3"></p> 
...
...
......
<p id="x54"></p>
<p id="x55"></p>
<a href="http://www.romancortes.com/" target="_top">
      <img src="images/CSS3map/coke-can.png" alt="Pure CSS Coke Can by Román Cortés"></a></div>
  </div>

html에서 아이디는 번호순대로 나오니 가운데 생략


body
{ margin: 0;padding: 0;overflow: hidden; }
#coke
{ width: 510px; height: 400px; overflow: auto; }
img{ border: 0; margin-left: -172px; }
a{ display: block; padding-top: 19px; width: 194px; }
a:hover img {background: url(images/CSS3map/coke-title.png) no-repeat 15px 100px;}

div div
{ background-image: url(images/CSS3map/coke-scroll.png) no-repeat  0 0;
   padding-left: 300px;width: 660px;
}
p{ margin: 0; padding: 0; float: left; height: 336px;
   background-image: url(images/CSS3map/coke-label.jpg);
   background-attachment: fixed;
   background-repeat: repeat-x;
   width: 1px;
}

#x1 {background-position: 5px 46px;}
#x2 {background-position: 0px 46px;}
#x3 {background-position: -3px 46px;}
#x4 {background-position: -6px 46px;}
#x5 {background-position: -8px 46px;}
#x6 {background-position: -10px 46px;}
#x7 {background-position: -12px 46px;}
#x8 {background-position: -14px 46px;}
#x9 {background-position: -15px 46px;}
#x10 {background-position: -16px 46px;}
#x11 {background-position: -17px 46px;}
#x12 {background-position: -18px 46px;}
#x13 {background-position: -19px 46px;}
#x14 {background-position: -20px 46px;}
#x15 {background-position: -21px 46px;}
#x16 {background-position: -22px 46px; width: 2px;}
#x17 {background-position: -23px 46px;}
#x18 {background-position: -24px 46px; width: 2px;}
#x19 {background-position: -25px 46px; width: 2px;}
#x20 {background-position: -26px 46px; width: 2px;}
#x21 {background-position: -27px 46px; width: 2px;}
#x22 {background-position: -28px 46px; width: 3px;}
#x23 {background-position: -29px 46px; width: 3px;}
#x24 {background-position: -30px 46px; width: 4px;}
#x25 {background-position: -31px 46px; width: 5px;}
#x26 {background-position: -32px 46px; width: 7px;}
#x27 {background-position: -33px 46px; width: 12px;}
#x28 {background-position: -34px 46px; width: 55px;}
#x29 {background-position: -35px 46px; width: 11px;}
#x30 {background-position: -36px 46px; width: 6px;}
#x31 {background-position: -37px 46px; width: 5px;}
#x32 {background-position: -38px 46px; width: 4px;}
#x33 {background-position: -39px 46px; width: 3px;}
#x34 {background-position: -40px 46px; width: 2px;}
#x35 {background-position: -41px 46px; width: 3px;}
#x36 {background-position: -42px 46px; width: 2px;}
#x37 {background-position: -43px 46px; width: 2px;}
#x38 {background-position: -44px 46px;}
#x39 {background-position: -45px 46px; width: 2px;}
#x40 {background-position: -46px 46px;}
#x41 {background-position: -47px 46px;}
#x42 {background-position: -48px 46px;}
#x43 {background-position: -49px 46px;}
#x44 {background-position: -50px 46px;}
#x45 {background-position: -51px 46px;}
#x46 {background-position: -52px 46px;}
#x47 {background-position: -53px 46px;}
#x48 {background-position: -54px 46px;}
#x49 {background-position: -56px 46px;}
#x50 {background-position: -58px 46px;}
#x51 {background-position: -60px 46px;}
#x52 {background-position: -62px 46px;}
#x53 {background-position: -65px 46px;}
#x54 {background-position: -68px 46px;}
#x55 {background-position: -74px 46px;}

CSS는 그냥 올림 픽셀의 차이가 있기에 다 올렸다.그리고 이 CSS는 초기화 시킨 것에서 위치 지정한 것이니 유의하길


설정

트랙백

댓글

  • 2010.09.10 10:57 ADDR 수정/삭제 답글

    좋은정보 감사합니다.

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS/CSS3 2010. 7. 7. 00:14

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것

출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards

데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/

다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/

소스를 알아보자

CSS3 : border-radius

border-radius 는 박스의 라운드를 가능하게 해준다.
아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도의 지정이 필요하다


.box{ width:600px;height:600px; 
       border: 10px solid #000; 
       /*확인을 위해 테두리를줌*/ 
       background:#fff;
       /*IE에서는 테두리가 배경색이된다*/
       -moz-border-radius: 15px;
        /*파이어폭스*/
        -webkit-border-radius: 15px;
        /*웹킷기반 브라우저 구글크롬 사파리*/
        border-radius: 15px;
        /* 오페라 10.5이상 */
        behavior: url(ie-css3.htc);
        /*IE6이상 IE-CSS3 핵사용*/
       }

아주간단 html은 다음과 같다


<div class="box"><p>박스내용</p></div>

주석에서 달아 놓았듯이 테두리만 주면 IE에서는 모두 테두리색으로보인다.
따라서 다시 배경색을 지정 해 줬다.

위소스의결과를 확인: http://sianasiatiger.cafe24.com/study/CSS3_RBox.html


설정

트랙백

댓글

  • 달타니 2011.01.11 16:10 ADDR 수정/삭제 답글

    방금 로컬에서 테스트해봤는데.. 안되네요.. 로컬에선 확인 할수 없나요??

    • 나그네 2011.01.14 12:09 수정/삭제

      htc 파일이 필요하다는데요. 윗글에 링크주소가 있어요.

  • 일꺾 2012.09.09 19:34 ADDR 수정/삭제 답글

    위에 링크로 받은 htc 파일로는 해결이 안되서

    http://fetchak.com/ie-css3/ 여기서 받아서 해결했습니다

  • 창민 2014.05.20 16:46 ADDR 수정/삭제 답글

    좋은 정보 감사합니다.

간단한 CSS3 기초 알파 배경,텍스그림자, 둥근모서리

CSS/CSS3 2010. 6. 29. 20:05

CSS3 알파 배경,텍스그림자, 둥근모서리

css3기초 몇가지를 살펴본다.당연한 이야기지만 익스플로어에는 적용안된다.

모든예제결과는 여기서 볼 수 있다.

배경 RGBA 알파값

배경에는 3가지값을 가진다. red green blue 그리고 css3에서 알파값을 더 가진다. 즉 투명도를 표현한다.

아래는 투명도를 25%를 준것이다.


.bg{background: rgba(255, 204, 204, 0.25 ); }


마지막값이 0이면 완전투명 1은 100%을 의미한다. 0.25, 0.5 0.75에 따른 결과는 그림과 같다.

또한 이것은 배경만 아니라 폰트(font), 보더(border)속성에도 적용된다.


텍스트 그림자

포토샵의 스타일 효과라고 생각하면 된다. 첫번째는 x축으로 그림자위치 두번째는y축으로 그림자위치 세번째는 흐려짐(blur) 네번째는 색깔(이 색깔역시 RGBA로 가능)이다.


div{ text-shadow:4px 4px 2px #000; font-size:40px;}

흐려짐(blur)에 대해서는 그림을 참조하자 5px 15px값을 준것이다. 비교해볼것

제미있는 건 이 그림자를 여러번 사용할 수 잇다는것이다. 다음과 같은예


#shadow_02{
        text-shadow: 0 10px 0 #fff,
        0 -10px 0 #039, 0 -20px 0 #fcc;
              }

라운드 박스

잘알려져있지만 한버더보는것 border-radius 이것으로 정하지만 아직 모든브라우저에 적용시키기위해선 앞에 다른것을 붙여줘야한다.파이어폭스의 경우--moz-border-radius웹킷기반의 브라우저는 -webkit-border-radius를 사용한다. 아래그림은 그예


#box{
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
#box #example2 {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 25px;
	-webkit-border-bottom-right-radius: 45px;

	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomleft: 25px;
	-moz-border-radius-bottomright: 45px;
}



설정

트랙백

댓글