2017. 2. 23. 20:35ㆍWork/CSS
벤더 프리픽스
- explore : '-ms-'transition-duration : 1s;
- chrome: '-webkit-'transition-duration : 1s;
- firefox : '-moz-'transition-duration : 1s;
- safari : '-webkit-'transition-duration : 1s;
- o : '-o-'transition-duration : 1s;
- Prefix Free 플러그인 leaverou.github.io/prefixfree
- 폴더 구성
->.html, prefixfree.min.js, StyleSheet.css
- HTML 페이지 기본 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Prefix Basic</title>
<link rel="stylesheet" href="StyleSheet.css"/>
<script src="prefixfree.min.js"></script>
</head>
<body>
</body>
</html>
-> 벤더 프릭스를 사용하지 않아도 되게 만들어 주는 라이브러리
-> 공급 업체 접두사, 각 브라우저 마다 실험적인 기능이 필요할 때 사용
그레이디언트 http://www.colorzilla.com/gradient-editor/ 원하는 형태의 그라디언트를 생성하면 CSS 코드를 얻음
- colorzilla 사이트
div{
background: rgb(184,225,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(184,225,252,1) 0%, rgba(169,210,243,1) 10%, rgba(144,186,228,1) 25%, rgba(144,188,234,1) 37%, rgba(144,191,240,1) 50%, rgba(107,168,229,1) 51%, rgba(162,218,245,1) 83%, rgba(189,243,253,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
}
- 선형 그라디언트
-- linear-gradient : 선형 그레이디언트
div{
background: linear-gradient(45deg(각도), #f85032(왼쪽색) 0%(위치), #e73827(오른쪽색) 100%(위치))
}
-- radial-gradient : 원형 그레이디언트
div{
background: radial-gradient(circle(정원) or ellipse(타원), #f85032(중심색), #00ffff(끝색))
}