안드로이드는 전자양의 꿈을 꾸는가

CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경)

웹접근성과 웹표준 2021. 7. 1. 15:08

css3 transition과 css3 animation을 잘 활용하자.

<!DOCTYPE html>
<html>
<head>

  <style>
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
  </style>
</head>
<body>
  <div></div>
</body>
</html>

'웹접근성과 웹표준' 카테고리의 다른 글

CSS로 그라디언트 보더 색상변화 애니메이션 (0)	2021.07.08
J쿼리 없이 transform css로 움직이는 아이콘 만들기 (0)	2021.06.22
J쿼리 없이 CSS transition으로 카드 뒤집기 (0)	2021.06.22
아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0)	2020.12.24
iOS 키보드 덮침 현상 웹앱 수정 css (0)	2020.12.08

Posted by netyhobby

,

J쿼리 없이 transform css로 움직이는 아이콘 만들기

웹접근성과 웹표준 2021. 6. 22. 16:20

<!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>Document</title>
  <style>
  .floating {
      animation-name: floating;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      margin-left: 30px;
      margin-top: 5px;
  }

  @keyframes floating {
      from { transform: translate(0,  0px); }
      65%  { transform: translate(0, 15px); }
      to   { transform: translate(0, -0px); }
  }
  </style>
</head>
<body>
  <div class="floating"
       style="height: 50px; width: 50px; background: rgb(200,200,200);">
  </div>
</body>
</html>

'웹접근성과 웹표준' 카테고리의 다른 글

CSS로 그라디언트 보더 색상변화 애니메이션 (0)	2021.07.08
CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경) (1)	2021.07.01
J쿼리 없이 CSS transition으로 카드 뒤집기 (0)	2021.06.22
아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0)	2020.12.24
iOS 키보드 덮침 현상 웹앱 수정 css (0)	2020.12.08

Posted by netyhobby

,

J쿼리 없이 CSS transition으로 카드 뒤집기

웹접근성과 웹표준 2021. 6. 22. 16:19

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
  *{
                box-sizing:border-box;
            }
            div.cardContainer{
                height:200px;
                width:200px;
                display:inline-block;
            }
            div.cardContainer div{
                height:inherit;
                width:inherit;
                color:#FFF;
                font-size:24px;
                backface-visibility:hidden;
                -webkit-backface-visibility:hidden;
                transition:all 1.5s;
                -webkit-transition:all 1.5s;
                -moz-transition:all 1.5s;
                -o-transition:all 1.5s;
                padding-top:80px;
                text-align:center;
            }
            .red{
                background-color:Red;
            }
            .pink{
                background-color:pink;
            }
            .yellow{
                background-color:yellow;
            }
            .green{
                background-color:Green;
            }
            .skyblue{
                background-color:skyblue;
            }
            .darkblue{
                background-color:darkblue;
            }
            div.cardContainer div:last-child{
                position:relative;
                top:-200px;
                transform:rotateY(180deg);
                -webkit-transform:rotateY(180deg);
                -ms-transform:rotateY(180deg);
                -moz-transform:rotateY(180deg);
                -o-transform:rotateY(180deg);
            }
            div.cardContainer:hover div:first-child{
                transform:rotateY(-180deg);
                -webkit-transform:rotateY(-180deg);
                -ms-transform:rotateY(-180deg);
                -moz-transform:rotateY(-180deg);
                -o-transform:rotateY(-180deg);
            }
            div.cardContainer:hover div:last-child{
                transform:rotateY(0deg);
                -webkit-transform:rotateY(0deg);
                -ms-transform:rotateY(0deg);
                -moz-transform:rotateY(0deg);
                -o-transform:rotateY(0deg);
            }
</style>

<body>
<div class="cardContainer">
            <div class="red">RED</div>
            <div class="pink">PINK</div>
        </div>
        <div class="cardContainer">
            <div class="yellow">YELLOW</div>
            <div class="green">GREEN</div>
        </div>
        <div class="cardContainer">
            <div class="skyblue">SKYBLUE</div>
            <div class="darkblue">DARKBLUE</div>
        </div>
</body>
</html>

'웹접근성과 웹표준' 카테고리의 다른 글

CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경) (1)	2021.07.01
J쿼리 없이 transform css로 움직이는 아이콘 만들기 (0)	2021.06.22
아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0)	2020.12.24
iOS 키보드 덮침 현상 웹앱 수정 css (0)	2020.12.08
css에서 폰트 이상없이 불러오는데 텍스트 깨져보일 경우 (0)	2019.12.18