CSS3 06

2017. 2. 23. 20:35Study/CSS

728x90

벤더 프리픽스

- 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(끝색))    

        }

728x90

'Study > CSS' 카테고리의 다른 글

CSS3 08  (0) 2017.02.25
CSS3 07  (0) 2017.02.24
CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22
CSS3 03  (0) 2017.02.22
1 2 3 4 5 6 7 8 9 10