@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 3;
transform: none;
}
}
main {
animation: fadeIn 0.5s ease-in-out;
}글 목록이 아래에서 위로 올라오는 기능 fadeIn
| box-sizing: border-box (0) | 2020.03.23 |
|---|---|
| reset css (0) | 2020.02.19 |
| CSS 사진회전, 그림자 (0) | 2020.02.18 |
| css focus 기능 (0) | 2020.02.18 |
| gradient 추천 사이트 (0) | 2020.02.18 |
꽃꽂이하는개발자
@keyframes spin {
from {
transform: none;
}
to {
transform: rotateY(1turn)
}
}
.incoming-message img {
width: 30px;
border-radius: 15px;
margin-right: 15px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
rgba(0, 0, 0, 0.024) 0px -6px 16px -6px;
animation: spin 2s linear infinite;
}
| reset css (0) | 2020.02.19 |
|---|---|
| CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn (0) | 2020.02.18 |
| css focus 기능 (0) | 2020.02.18 |
| gradient 추천 사이트 (0) | 2020.02.18 |
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
꽃꽂이하는개발자
input 같은 요소를 클릭해 선택해서 입력하는 동안이나 선택해 있는 동안의 스타일 지정을 합니다.
예제 1
<style>
input:focus {background-color: yellow;}
</style>
<form>
<input type="text" name="focus">
<input type="submit" value="Submit">
</form> input창을 클릭하면 노란색으로 바뀝니다.
결과 확인은
https://codepen.io/sinbi/pen/WNeYdoV
WNeYdoV
...
codepen.io
예제 2
<style>
input {background-color:gray;}
input:hover {background-color:red;}
input:active {color:white;background-color:blue;}
input:focus {color:green;background-color:yellow;}
</style>
<input type="text"/>| CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn (0) | 2020.02.18 |
|---|---|
| CSS 사진회전, 그림자 (0) | 2020.02.18 |
| gradient 추천 사이트 (0) | 2020.02.18 |
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
| css media queries (0) | 2020.02.16 |
꽃꽂이하는개발자
| CSS 사진회전, 그림자 (0) | 2020.02.18 |
|---|---|
| css focus 기능 (0) | 2020.02.18 |
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
| css media queries (0) | 2020.02.16 |
| css animation @keyframes (0) | 2020.02.16 |
꽃꽂이하는개발자
페이지에서 색상 변경 가능
ColorZilla: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
chrome.google.com
사이즈 확인 사이트
PageRulerRedux: https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en
| css focus 기능 (0) | 2020.02.18 |
|---|---|
| gradient 추천 사이트 (0) | 2020.02.18 |
| css media queries (0) | 2020.02.16 |
| css animation @keyframes (0) | 2020.02.16 |
| CSS Transformations (0) | 2020.02.16 |
꽃꽂이하는개발자
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Using media queries
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
developer.mozilla.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media Queries</title>
<style>
body{
background-color: green;
}
/* 최소 320~최대 640 화면이면 blue 아니면 green으로 변경 */
@media screen and (min-width:320px) and (max-width:640px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>출처 : nomadcoder
| gradient 추천 사이트 (0) | 2020.02.18 |
|---|---|
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
| css animation @keyframes (0) | 2020.02.16 |
| CSS Transformations (0) | 2020.02.16 |
| CSS Transition (0) | 2020.02.16 |
꽃꽂이하는개발자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transformations</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
/*animation: 1회동작시간 함수명 동작시간(안적어주면 1회) ease-in-out;*/
animation: 1.5s scaleAndRotateSquare infinite ease-in-out;
}
/*@keyframes 애니메이션을 사용할 거라는 말. @keyframes 함수명{}
2가지 버전이 있는데 from to 를 사용해도 되고 0% 50% 100% 를 사용하여도 됩니다.*/
/*@keyframes scaleAndRotateSquare {
from{
}
to{
}
}*/
@keyframes scaleAndRotateSquare {
0%{
transform:none;
}
50%{
transform: rotate(1turn) scale(.5, .5);
color:white;
}
100%{
transform: none;
color:blue;
}
}
</style>
</head>
<body>
<div class="box">11</div>
</body>
</html>출처: nomad coder
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
|---|---|
| css media queries (0) | 2020.02.16 |
| CSS Transformations (0) | 2020.02.16 |
| CSS Transition (0) | 2020.02.16 |
| css states(hover, active, focus, visited) (0) | 2020.02.16 |
꽃꽂이하는개발자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transformations</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
transition: transform .5s ease-in-out;
}
.box:hover{
transform: rotate(1turn) scale(.5, .5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
| css media queries (0) | 2020.02.16 |
|---|---|
| css animation @keyframes (0) | 2020.02.16 |
| CSS Transition (0) | 2020.02.16 |
| css states(hover, active, focus, visited) (0) | 2020.02.16 |
| PSEUDO SELECTOR (0) | 2020.02.16 |
꽃꽂이하는개발자