Tag css3
전문가를 위한 CSS3 1장~5장까지 정리한 글이다. 이 책의 저자 블로그http://tangledindesign.com/ 1장 CSS 서체 타입을 개발하려면 그것이 헤드라인든지 본문 텍스트이든 간에 커닝, 트래킹, 리딩에서부터 리가쳐(연간 활자), X-하이트, 종횡비에 이르기까지 수많은 요소들을 고려해야 한다. 커닝(kerning): 글자 엇물리기, 특정 글자 사이를 엇물리게 조정하여… Continue Reading →
transform transform은 요소 박스를 변형하는 속성이다. 2차원, 3차원 변형이 가능하고, 변형 형태별로 함수 타입의 속성값을 지정한다. CSS3 2D Transforms 2d transform 속성은 6가지가 있다. translate() translate() HTML 요소 박스를 평면상에서 수평 이동하는 기능이다. 가로 및 세로 방향을 이동하는 길이 값을… Continue Reading →
한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; } … Continue Reading →
CSS .gradient-top-to-bottom{ width: 300px; padding: 20px; border-top: 5px solid #000; border-bottom: 5px solid #ccc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc)); background-image: -webkit-linear-gradient(#000, #ccc); background-image: -moz-linear-gradient(#000, #ccc), -moz-linear-gradient(#000, #ccc); background-image: -o-linear-gradient(#000, #ccc), -o-linear-gradient(#000, #ccc); background-image: linear-gradient(#000, #ccc), linear-gradient(#000, #ccc);… Continue Reading →
1. Hexadecimal Colors Hex 색상 값은 모든 주요 브라우저에서 지원된다. Hex 컬러는 #RRGGBB로 명시한다. – RR(Red – 빨강), GG(Green – 녹색), (Blue- 파랑) 16진수 색상으로 명시한다.모든 값은 0 ~ FF 사이여야 한다. 예를 들면, #0000ff 값은 파랑색으로 렌더링 된다. 그… Continue Reading →