'css'에 해당되는 글 2건

  1. 2016.10.21 CSS 자체 폰트 설정.
  2. 2015.09.30 CSS3 -3D Flip Animation-

CSS 자체 폰트 설정.

연습 2016. 10. 21. 00:00

 CSS에서 웹 폰트라고하여, 폰트를 설정하고, 웹에서 폰트를 변경할 수 있게 되어 있다.


 여기서 CSS로 설정하는 방법은 Font-Family라는 것을 이용해서 사용을 할 수 있다.


 문제는 웹 페이지에서 기본적으로 지원해주는 Font-Family가 적용이 안되어 있다는 것이다.


 그래서 웹 서버에서 사용하기 원하는 폰트를 설정하고, 적용할 수 있다.


 링크 : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp



 예제


 CSS 웹서버 폰트 제작.

 

1
2
3
4
@font-face {
    font-family: YD;
    src: url(fonts/YD320.woff);
}
cs


 이렇게, YD로 윤고딕이나 그런 형태의 글자 형태를 표현할 수 있게 된다.


 폰트 적용은 다음과 같이 할 수 있다.


 CSS 적용.

 

1
2
3
a {
    font-family: YD;
}
cs


 이렇게 해서 웹 서버의 자체 폰트를 사용할 수 있게 된다.

저작자표시

'연습' 카테고리의 다른 글

MonkeyRunner을 Java로 이용하기.  (0) 2016.11.02
안드로이드 자동화(점검용) MonkeyRunner  (0) 2016.11.01
그누보드 테마 설정하기.  (0) 2016.10.20
PSP 게임을 할 수 있는 공개 소스 에뮬레이터 PPSSPP  (0) 2016.10.19
Dreamweaver에 나오는 파일 .ste에서 나오는 패스워트 알고리즘.  (0) 2016.10.13
Posted by JunkMam
,

CSS3 -3D Flip Animation-

연습 2015. 9. 30. 22:14



front
back



소스 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<style type="text/css">
        /* simple */
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
            -ms-transform: perspective(1000px);
            -moz-transform: perspective(1000px);
                -moz-transform-style: preserve-3d; 
                -ms-transform-style: preserve-3d; 
            border: 1px solid #ccc;
        }
        /*
        .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            transform: rotateY(180deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        */
        /* START: Accommodating for IE */
        .flip-container:hover .back, .flip-container.hover .back {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }
        .flip-container:hover .front, .flip-container.hover .front {
             -webkit-transform: rotateY(180deg);
             -moz-transform: rotateY(180deg);
             -o-transform: rotateY(180deg);
             transform: rotateY(180deg);
        }
        
        /* END: Accommodating for IE */
        .flip-container, .front, .back {
            width: 320px;
            height: 427px;
        }
        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -ms-transition: 0.6s;
            -moz-transition: 0.6s;
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }
        .front, .back {
             -webkit-backface-visibility: hidden;
             -moz-backface-visibility: hidden;
             -ms-backface-visibility: hidden;
             backface-visibility: hidden;
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;
            -moz-transform: rotateY(0deg);
            -o-transition: 0.6s;
            -o-transform-style: preserve-3d;
            -o-transform: rotateY(0deg);
            -ms-transition: 0.6s;
            -ms-transform-style: preserve-3d;
            -ms-transform: rotateY(0deg);
            transition: 0.6s;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            position: absolute;
            top: 0;
            left: 0;
        }
        .front {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            background: lightgreen;
            z-index: 2;
        }
        .back {
            background: lightblue;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }
        .front .name {
            font-size: 2em;
            display: inline-block;
            background: rgba(33, 33, 33, 0.9);
            color: #f8f8f8;
            font-family: Courier;
            padding: 5px 10px;
            border-radius: 5px;
            bottom: 60px;
            left: 25%;
            position: absolute;
            text-shadow: 0.1em 0.1em 0.05em #333;
            display: none;
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
        .back-logo {
            position: absolute;
            top: 40px;
            left: 90px;
            width: 160px;
            height: 117px;
            background: url(logo.png) 0 0 no-repeat;
        }
        .back-title {
            font-weight: bold;
            color: #00304a;
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
            text-align: center;
            text-shadow: 0.1em 0.1em 0.05em #acd7e5;
            font-family: Courier;
            font-size: 22px;
        }
        .back p {
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 0 20px;
            font-size: 18px;
        }
        /* vertical */
        .vertical.flip-container {
            position: relative;
        }
        .vertical .back {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
        .vertical.flip-container .flipper {
            -webkit-transform-origin: 100% 213.5px;
            -moz-transform-origin: 100% 213.5px;
            -ms-transform-origin: 100% 213.5px;
            transform-origin: 100% 213.5px;
        }
        /*
        .vertical.flip-container:hover .flipper {
            -webkit-transform: rotateX(-180deg);
            -moz-transform: rotateX(-180deg);
            -ms-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }
        */
        /* START: Accommodating for IE */
        .vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
        .vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
    /* END: Accommodating for IE */
</style>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front"><br /></div><div class="front"><br /></div><div class="front"><br /></div><div class="front">
            front
        </div>
        <div class="back">
            back
        </div>
    </div>
</div>
 
 
 
cs


저작자표시

'연습' 카테고리의 다른 글

base64 - 0 : 이론 -  (0) 2015.10.03
OpenCL 프로그래밍 공부 -시작-  (0) 2015.10.02
ffprobe 사용법 -영상 정보 보기-  (0) 2015.09.30
ffmpeg 사용 -mp4 to webm convert(mp4을 webm으로 변환)-  (0) 2015.09.29
ffmpeg -이미지 추출-  (0) 2015.09.28
Posted by JunkMam
,

티스토리툴바