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

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;
}