이번에는 동적 응용 프로그램을 만드는 CSS 모듈을 이용하여 일부 스타일을 추가 해본다.
1. 위치 : <your-awesome-component>/src/styles/your-awesome-component.css
해당 CSS 파일을 열어 아래 부분에 CSS 코드를 추가한다.
[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ ls -al
합계 4
drwxrwxr-x. 2 binrang binrang 34 10월 26 15:18 .
drwxrwxr-x. 6 binrang binrang 76 10월 26 17:37 ..
-rw-r--r--. 1 binrang binrang 175 10월 26 15:18 br-elec-component.css
[binrang@binrang styles]$ vi br-elec-component.css
:root {
--black: #000;
--white: #fff;
}
.baseStyle {
background-color: var(--black);
color: var(--white);
}
.someStyle {
composes: baseStyle;
font-size: 18px;
}
/* 아래 부분에 추가한다. */
body {
font-family: sans-serif;
}
p {
padding: 15px;
}
@keyframes partyLights {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes shake {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.party {
animation-name: shake;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.houseParty {
-webkit-clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
background: linear-gradient(269deg, #ff90f1, #27ff8f, #6db0ff, #a398ff);
background-size: 800% 800%;
animation: partyLights 5s ease infinite;
min-height: 12em;
}
.house {
clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
background-color: #474747;
padding: 10em 2em 2em 2em;
border-radius: 10px;
min-height: 35vh;
}
.container {
width: 50vw;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
transition: filter .7s ease-in-out;
}
.container:before {
content: '';
display: block;
position: absolute;
background-image: url(//goo.gl/8f5GrX);
background-position: center;
background-size: 95%;
background-repeat: no-repeat;
width: 45%;
height: 45%;
z-index: 999;
left: 47%;
top: -9%;
}
.room {
position: absolute;
bottom: 0;
right: 0;
padding: 2em;
padding-right: 2.5em;
}
.message {
display: block;
position: absolute;
width: 19em;
height: 11em;
z-index: 999;
left: 4.5em;
top: 7.5em;
color: white;
font-weight: 100;
font-family: helvetica;
font-size: 27px;
}
a, a:hover, a:active, a:visited {
color: rgb(93, 245, 255);
text-decoration: none;
}
|
2. 위치 : <your-awesome-component>/src/styles/guest-list.css
해당 디렉토리에 guest-list.css 파일을 신규로 생성하고 아래 코드를 입력한다.
[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ vi guest-list.css
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
label { font-size: 2em; }
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:before { letter-spacing: 10px; }
input[type=checkbox]:checked + label:before { content: "\f046"; }
input[type=checkbox]:checked + label:before { letter-spacing: 5px; }
.guestList {
position: absolute;
z-index: 999;
background-color: rgba(255, 255, 255, 0.93);
left: 10%;
border: 2px solid whitesmoke;
display: inline-block;
padding-left: 4em;
padding-right: 4em;
padding-bottom: 3em;
padding-top: 1.7em;
border-radius: 3px;
margin: 2em;
}
.guestList h1 {
font-size: 2.5em;
}
.guestName {
margin-bottom: .5em;
}
|
3. 위치 : <your-awesome-component>/src/styles/render-friend.css
해당 디렉토리에서 render-friend.css 파일을 신규로 생성 한 후 아래 코드를 삽입한다.
[binrang@binrang styles]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/styles
[binrang@binrang styles]$ vi render-friend.css
@keyframes shake {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.join {
animation-name: shake;
animation-duration: 1s;
animation-fill-mode: both;
}
.friend {
border-radius: 50%;
background-color: #efefef;
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
float: right;
}
|
참조 URL : develop_styles.html
댓글 없음:
댓글 쓰기