본문 바로가기

CSS/CSS320

CSS3 배경색 그라디언트 소스를 만들어주는 툴 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 2012. 3. 3.
CSS3 투명도를 가지는 색상값 rgba HSL HSLA 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: hsl.. 2012. 3. 3.
CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value 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 이다. 영어는 대소문자가 구별되는 언어이고 그 때문에 폰트의 종류에 따라 특히 소문자의 크기가 다르게 표현.. 2012. 2. 22.
CSS (CSS3) 속성선택자 (attribute selector) CSS (CSS3) 속성선택자 (attribute selector) CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다. 티스토리 네이버 다음 네이트 드림위즈 야후 구글 이번엔 CSS를 보자 정의 한것 [attr] : 속성값을 가지는경우 [attr=" "] : 속성값이 정확히 일치 [attr~=" "] : 속성값이공백으로 구분한 경우 [attr|=" "] 속성값이 하이픈으로 구분한 경우 아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우 [attr$=" "]주어진값으로 끝나는경우 [attr*=" "] 속성값이 일부일치한다면 적용 아래는 적용한 예제다 /*title .. 2011. 12. 30.
CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3 선택자(selectors) - 유사클래스(pseudo-class) Part3 :first-letter :first-line 텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자 The moment Alice appeared, she was appeal...... The executioner's argument was, that you couldn't cut.. The executioner's argument was, that you couldn't... 위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다. p { /*기본설정*/ font-size.. 2011. 12. 29.
CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2 선택자(selectors) - 유사클래스(pseudo-class) Part2 :empty 공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다. div크기만 정해줬고 배경색을 지정했다. div{width:100px; height:100px;} div:empty{ background:#000;} :root 문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다. :only-child 유일자식으로 자식이 하나밖에 없을때 유용하다. 첫번째 자식이고 두번째 자식이므로 적용안됨 자식하나뿐임 아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다. li:only-child {color: #F00;} :only-of-ty.. 2011. 12. 29.
CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1 선택자(selectors) - 유사클래스(pseudo-class) Part1 너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조 CSS 링크 스타일 기초 순서는 LoVe:HAte 를 상기 하자 CSS :tager 동적 유사 클래스 :traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html :focus 유사클래스 엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자 위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다. CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover fo.. 2011. 12. 29.
CSS3 스크롤에 움직이는 입체 이미지 오직 css3만을 사용한다. 스크롤에 따라서 움직임 본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/ 필요로 사용된 이미지는 두개로 하나는 병이고 하나는 라벨 아 그리고 테스트결과 IE6 빼고 다적용됩니다. 코드는 무지무지 길다. 개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html ... ... ...... html에서 아이디는 번호순대로 나오니 가운데 생략 body { margin: 0;padding: 0;overflow: hidden; } #coke { width: 510px; height: 400px; overflow: auto; } img{ border: 0.. 2010. 7. 13.
CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 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 는 박스의 라운드를 가능하게 해준다. 아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도.. 2010. 7. 7.
간단한 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축으로 그림자위.. 2010. 6. 29.

티스토리툴바