Understanding CSS clip

Developer

Size

8,794 Kb

Views

12,144

Understanding CSS clip Previews
Understanding CSS clip HTML Codes
Understanding CSS clip CSS Codes
Understanding CSS clip JS Codes

How do I make an understanding css clip?

More: http://codepen.io/ARS/blog/understanding-css-clip. What is a understanding css clip? How do you make a understanding css clip? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.

Understanding CSS clip Previews

Understanding CSS clip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Understanding CSS clip</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="inner"> <div class="text-box"> <h1 class="heading">Understanding CSS clip</h1> <p>Imagine, you need to clip some image, yeap?</p> <p>But what actually does clip coordiantes mean?</p> <p>Let's imagine these coordinates like this</p> <p>To start with, set the start point</p> <p>A and D mean <b>top</b> and <b>left</b> coordinates of start point</p> <p>Then take <b>width</b> and <b>height</b> of the future clipped area</p> <p>And do some math for B and C</p> <p>B = D + Clip Width <i></i> C = A + Clip Height</p> <p>Looks like more clearly, hah? That's all!</p> </div> <div class="img-box"> <img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?fit=crop&fm=jpg&h=725&q=75&w=1050" alt="" class="img-bg" /> <div class="img-overlay"></div> <b class="start-point"></b> <i class="line-point"></i> <i class="line-top"></i> <i class="line-left"></i> <div class="box-dimensions"> <i class="clip-width"></i> <i class="clip-height"></i> </div> <img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?fit=crop&fm=jpg&h=725&q=75&w=1050" alt="" class="img-clip" /> </div> <div class="clip-property">clip: rect(<i></i>, <i></i>, <i></i>, <i></i>); </div> <div class="calc-desc"> <span><b>A</b> = Top Position</span> <span><b>B</b> = D + Clip Width</span> <span><b>C</b> = A + Clip Height</span> <span><b>D</b> = Left Position</span> </div>
</div>
<div class="arrows"> <i class="arrow-up"></i> <i class="arrow-down"></i>
</div>
<a href="https://codepen.io/ARS/full/zxybxo/" class="notification"> For better user experience increase window height <br />or try <b>Full Page</b>
</a>
<div class="info"> <a href="https://codepen.io/ARS" class="copyright">codepen.io/ARS</a> <span class="tip">Tip: Hover on the image to pause.</span>
</div>
<div class="play-pause"> <i class="icon-play"></i> <i class="icon-pause"></i>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Understanding CSS clip - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Philosopher:400,700italic|Armata);
@-moz-keyframes clip-in { 0% { clip: rect(0, 600px, 414px, 0); } 25% { clip: rect(200px, 600px, 414px, 0); } 50% { clip: rect(200px, 280px, 414px, 0); } 75% { clip: rect(200px, 280px, 300px, 0); } 100% { clip: rect(200px, 280px, 300px, 160px); }
}
@-webkit-keyframes clip-in { 0% { clip: rect(0, 600px, 414px, 0); } 25% { clip: rect(200px, 600px, 414px, 0); } 50% { clip: rect(200px, 280px, 414px, 0); } 75% { clip: rect(200px, 280px, 300px, 0); } 100% { clip: rect(200px, 280px, 300px, 160px); }
}
@keyframes clip-in { 0% { clip: rect(0, 600px, 414px, 0); } 25% { clip: rect(200px, 600px, 414px, 0); } 50% { clip: rect(200px, 280px, 414px, 0); } 75% { clip: rect(200px, 280px, 300px, 0); } 100% { clip: rect(200px, 280px, 300px, 160px); }
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; color: #ddd; background: #1d1f20; font-family: 'Philosopher', sans-serif;
}
.inner { position: relative; margin: 0 auto; width: 600px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -moz-transition: opacity 0.15s; -o-transition: opacity 0.15s; -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
}
.inner:hover { opacity: .5;
}
@-moz-keyframes play-state { 0% { opacity: 1; -moz-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); transform: scale(2.5); }
}
@-webkit-keyframes play-state { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@keyframes play-state { 0% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); -ms-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5); }
}
.text-box,
.img-box { position: relative;
}
.text-box { height: 80px; line-height: 80px; text-align: center; text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
}
.heading { position: relative; margin: 0; cursor: default; font-size: 36px; font-weight: 700; font-style: italic;
}
p { position: absolute; top: 0; left: 0; right: 0; margin: 0; cursor: default; font-size: 20px;
}
p i { display: inline-block; width: 24px; height: 1em; vertical-align: baseline;
}
b { padding: 0 3px; color: #3498db; text-shadow: none;
}
.img-box { height: 414px;
}
.img-bg, .img-overlay, .img-clip { position: absolute; top: 0; left: 0; width: 600px; height: 414px;
}
.img-overlay { background: rgba(0, 0, 0, 0.65); box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.75);
}
.img-clip { filter: brightness(1.5) contrast(1.2); -webkit-filter: brightness(1.5) contrast(1.2);
}
/* backstage */
.start-point { position: absolute; top: 198px; left: 158px; height: 6px; width: 6px; background: #3498db; border-radius: 50%; visibility: hidden; z-index: 1;
}
.line-point { display: block; position: absolute; top: 100px; left: 160px; height: 100px; width: 165px;
}
.line-point:before { content: ''; position: absolute; top: 80px; left: -8px; width: 60px; height: 1px; background: #fff; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.line-point:after { content: 'Start Point (A, D)'; position: absolute; top: 27px; left: 43px; padding: 8px; width: 105px; color: #fff; border-bottom: 1px solid #fff; line-height: 16px; white-space: nowrap; font-family: 'Armata', sans-serif; font-size: 12px;
}
.line-top { position: absolute; top: 0; left: 160px; width: 2px; height: 200px; background: transparent; border-left: 2px dashed #3498db; transform-origin: 50% 0;
}
.line-left { position: absolute; top: 200px; left: 0; width: 160px; height: 2px; background: transparent; border-top: 2px dashed #3498db; transform-origin: 0 50%;
}
.box-dimensions { position: absolute; top: 200px; left: 160px; background: transparent; border-top: 2px solid #3498db; border-left: 2px solid #3498db; visibility: hidden; z-index: 20;
}
.box-dimensions .clip-width { position: absolute; right: -149px; top: -1px; width: 150px; height: 80px;
}
.box-dimensions .clip-width:before { content: ''; position: absolute; top: 13px; left: -6px; width: 40px; height: 1px; background: #fff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.box-dimensions .clip-width:after { content: 'Clip Width'; position: absolute; top: -5px; left: 28px; padding: 8px; width: 64px; color: #fff; border-bottom: 1px solid #fff; line-height: 16px; white-space: nowrap; font-family: 'Armata', sans-serif; font-size: 12px;
}
.box-dimensions .clip-height { position: absolute; left: -150px; bottom: -80px; width: 150px; height: 80px;
}
.box-dimensions .clip-height:before { content: ''; position: absolute; top: 14px; right: -5px; width: 40px; height: 1px; background: #fff; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.box-dimensions .clip-height:after { content: 'Clip Height'; position: absolute; top: -4px; left: 37px; padding: 8px; width: 68px; color: #fff; border-bottom: 1px solid #fff; line-height: 16px; white-space: nowrap; font-family: 'Armata', sans-serif; font-size: 12px;
}
.clip-property { position: relative; padding: 24px 0; height: 80px; overflow: hidden; cursor: default; text-align: center; font-family: 'Armata', sans-serif; font-size: 24px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
.clip-property i { position: relative;
}
.clip-property i:nth-of-type(1):before, .clip-property i:nth-of-type(2):before, .clip-property i:nth-of-type(3):before, .clip-property i:nth-of-type(4):before { content: "0"; position: relative;
}
.clip-property i:nth-of-type(1):after, .clip-property i:nth-of-type(2):after, .clip-property i:nth-of-type(3):after, .clip-property i:nth-of-type(4):after { position: absolute; top: 2px; left: 0; color: #3498db;
}
.clip-property i:nth-of-type(1):after { content: "A";
}
.clip-property i:nth-of-type(2):after { content: "B";
}
.clip-property i:nth-of-type(3):after { content: "C";
}
.clip-property i:nth-of-type(4):after { content: "D";
}
.calc-desc { position: relative; margin-top: -20px; text-align: center; font-family: 'Armata', sans-serif; font-size: 14px;
}
.calc-desc span { padding: 0 8px; line-height: 28px;
}
.arrows { display: none; position: fixed; top: 50%; right: 20px; margin-top: -25px; height: 50px; width: 12px;
}
.arrows:after { content: ''; position: absolute; top: 2px; left: 5px; bottom: 2px; width: 2px; background: #ddd;
}
.arrows .arrow-up:after, .arrows .arrow-up:before { content: ''; position: absolute; top: 0; height: 15px; width: 2px; background: #ddd;
}
.arrows .arrow-up:after { right: 0; transform: rotate(-45deg);
}
.arrows .arrow-up:before { left: 0; transform: rotate(45deg);
}
.arrows .arrow-down:after, .arrows .arrow-down:before { content: ''; position: absolute; bottom: 0; height: 15px; width: 2px; background: #ddd;
}
.arrows .arrow-down:after { right: 0; transform: rotate(45deg);
}
.arrows .arrow-down:before { left: 0; transform: rotate(-45deg);
}
@media (max-height: 590px) { .arrows { display: block; }
}
.notification { display: none; position: fixed; top: 50%; right: 0; margin-top: -20px; height: 30px; width: 180px; color: #ddd; text-align: center; text-decoration: none; line-height: 16px; font-family: 'Armata', sans-serif; font-size: 11px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.notification b { padding-top: 8px;
}
@media (max-height: 590px) { .notification { display: block; }
}
.info { position: fixed; left: 10px; right: 10px; bottom: 10px; font-family: 'Armata', sans-serif; font-size: 12px;
}
.info .copyright { display: inline-block; color: rgba(221, 221, 221, 0.35); text-decoration: none;
}
.info .copyright:hover { color: #dddddd;
}
.info .tip { float: right; color: rgba(221, 221, 221, 0.35);
}
.play-pause { position: absolute; top: 257px; left: 50%; height: 50px; width: 50px; z-index: 10; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.play-pause .icon-play, .play-pause .icon-play:after { position: absolute; top: 0; left: 12px; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 35px; border-color: transparent transparent transparent #3498db;
}
.play-pause .icon-play:after { content: ''; top: -20px; left: -35px; z-index: -1;
}
.play-pause .icon-pause, .play-pause .icon-pause:after { position: absolute; top: 0; left: 0; height: 40px; width: 8px; background: transparent; border-left: 15px solid #3498db; border-right: 15px solid #3498db; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
}
.play-pause .icon-pause:after { content: ''; top: 0; left: -15px;
}
/* motion */
.heading { -moz-animation: text-out 0.35s forwards 3.5s cubic-bezier(0.4, 0.64, 0.68, 1); -webkit-animation: text-out 0.35s forwards 3.5s cubic-bezier(0.4, 0.64, 0.68, 1); animation: text-out 0.35s forwards 3.5s cubic-bezier(0.4, 0.64, 0.68, 1);
}
p:nth-of-type(1) { -moz-animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 3.65s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 8.65s both; -webkit-animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 3.65s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 8.65s both; animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 3.65s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 8.65s both;
}
p:nth-of-type(2) { -moz-animation: text-in 0.35s both 8.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 13.8s both; -webkit-animation: text-in 0.35s both 8.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 13.8s both; animation: text-in 0.35s both 8.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 13.8s both;
}
p:nth-of-type(3) { -moz-animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 14.05s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 18.05s both; -webkit-animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 14.05s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 18.05s both; animation: text-in 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 14.05s both, text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 18.05s both;
}
p:nth-of-type(4) { -moz-animation: text-in 0.35s both 18.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 22.3s both; -webkit-animation: text-in 0.35s both 18.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 22.3s both; animation: text-in 0.35s both 18.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 22.3s both;
}
p:nth-of-type(5) { -moz-animation: text-in 0.35s both 22.55s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 29.05s both; -webkit-animation: text-in 0.35s both 22.55s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 29.05s both; animation: text-in 0.35s both 22.55s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 29.05s both;
}
p:nth-of-type(6) { -moz-animation: text-in 0.35s both 29.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 34.8s both; -webkit-animation: text-in 0.35s both 29.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 34.8s both; animation: text-in 0.35s both 29.3s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 34.8s both;
}
p:nth-of-type(7) { -moz-animation: text-in 0.35s both 35.05s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 40.55s both; -webkit-animation: text-in 0.35s both 35.05s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 40.55s both; animation: text-in 0.35s both 35.05s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 40.55s both;
}
p:nth-of-type(8) { -moz-animation: text-in 0.35s both 40.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 45.8s both; -webkit-animation: text-in 0.35s both 40.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 45.8s both; animation: text-in 0.35s both 40.8s cubic-bezier(0.4, 0.64, 0.68, 1), text-out 0.35s cubic-bezier(0.4, 0.64, 0.68, 1) 45.8s both;
}
p:nth-of-type(9) { -moz-animation: text-in 0.35s both 46.05s cubic-bezier(0.4, 0.64, 0.68, 1); -webkit-animation: text-in 0.35s both 46.05s cubic-bezier(0.4, 0.64, 0.68, 1); animation: text-in 0.35s both 46.05s cubic-bezier(0.4, 0.64, 0.68, 1);
}
.img-clip { -moz-animation: clip-in 4s forwards 3.5s, clip-out 2s forwards 13.8s; -webkit-animation: clip-in 4s forwards 3.5s, clip-out 2s forwards 13.8s; animation: clip-in 4s forwards 3.5s, clip-out 2s forwards 13.8s;
}
.start-point { -moz-animation: pulse 1s 3 forwards 19.05s; -webkit-animation: pulse 1s 3 forwards 19.05s; animation: pulse 1s 3 forwards 19.05s;
}
.line-point { -moz-animation: clip-point 1s both 21.55s; -webkit-animation: clip-point 1s both 21.55s; animation: clip-point 1s both 21.55s;
}
.line-point:after { -moz-animation: color-in 1s both 22.55s; -webkit-animation: color-in 1s both 22.55s; animation: color-in 1s both 22.55s;
}
.line-top { -moz-animation: height-in 1s both 23.55s ease-out; -webkit-animation: height-in 1s both 23.55s ease-out; animation: height-in 1s both 23.55s ease-out;
}
.line-left { -moz-animation: width-in 1s both 23.55s ease-out; -webkit-animation: width-in 1s both 23.55s ease-out; animation: width-in 1s both 23.55s ease-out;
}
.box-dimensions { -moz-animation: dimensions 3s forwards 30.3s ease-out; -webkit-animation: dimensions 3s forwards 30.3s ease-out; animation: dimensions 3s forwards 30.3s ease-out;
}
.clip-width { -moz-animation: clip-width 1s both 31.1s; -webkit-animation: clip-width 1s both 31.1s; animation: clip-width 1s both 31.1s;
}
.clip-width:after { -moz-animation: color-in 1s both 31.8s; -webkit-animation: color-in 1s both 31.8s; animation: color-in 1s both 31.8s;
}
.clip-height { -moz-animation: clip-height 1s both 31.8s; -webkit-animation: clip-height 1s both 31.8s; animation: clip-height 1s both 31.8s;
}
.clip-height:after { -moz-animation: color-in 1s both 32.3s; -webkit-animation: color-in 1s both 32.3s; animation: color-in 1s both 32.3s;
}
.clip-property { -moz-animation: opacity-in 0.35s both 10.3s ease-out; -webkit-animation: opacity-in 0.35s both 10.3s ease-out; animation: opacity-in 0.35s both 10.3s ease-out;
}
.clip-property i:nth-of-type(1):before, .clip-property i:nth-of-type(2):before, .clip-property i:nth-of-type(3):before, .clip-property i:nth-of-type(4):before { -moz-animation: text-out 0.35s both 16.55s; -webkit-animation: text-out 0.35s both 16.55s; animation: text-out 0.35s both 16.55s;
}
.clip-property i:nth-of-type(1):after, .clip-property i:nth-of-type(2):after, .clip-property i:nth-of-type(3):after, .clip-property i:nth-of-type(4):after { -moz-animation: text-in 0.35s both 16.55s; -webkit-animation: text-in 0.35s both 16.55s; animation: text-in 0.35s both 16.55s;
}
.arrows { -moz-animation: bounce-arrows 1s both 10 ease-in-out, opacity-in 0.5s forwards 10s reverse; -webkit-animation: bounce-arrows 1s both 10 ease-in-out, opacity-in 0.5s forwards 10s reverse; animation: bounce-arrows 1s both 10 ease-in-out, opacity-in 0.5s forwards 10s reverse;
}
.notification { -moz-animation: opacity-in 0.5s forwards 10s reverse; -webkit-animation: opacity-in 0.5s forwards 10s reverse; animation: opacity-in 0.5s forwards 10s reverse;
}
.calc-desc { -moz-animation: opacity-in 1.35s both 40.55s; -webkit-animation: opacity-in 1.35s both 40.55s; animation: opacity-in 1.35s both 40.55s;
}
.play-pause { -moz-animation: hidden 0.5s forwards 51.05s; -webkit-animation: hidden 0.5s forwards 51.05s; animation: hidden 0.5s forwards 51.05s;
}
.inner:hover * { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused;
}
.inner ~ .play-pause .icon-pause, .inner ~ .play-pause .icon-pause:after, .inner:hover ~ .play-pause .icon-play, .inner:hover ~ .play-pause .icon-play:after { display: none;
}
.inner ~ .play-pause .icon-play, .inner ~ .play-pause .icon-play:after, .inner:hover ~ .play-pause .icon-pause, .inner:hover ~ .play-pause .icon-pause:after { display: block; -moz-animation: play-state 0.5s forwards; -webkit-animation: play-state 0.5s forwards; animation: play-state 0.5s forwards;
}
/* keyframes */
@-moz-keyframes hidden { 0% { display: block; } 100% { display: none; }
}
@-webkit-keyframes hidden { 0% { display: block; } 100% { display: none; }
}
@keyframes hidden { 0% { display: block; } 100% { display: none; }
}
@-moz-keyframes clip-out { 0% { clip: rect(200px, 280px, 300px, 160px); opacity: 1; } 60% { clip: rect(0, 600px, 414px, 0); opacity: 1; } 100% { clip: rect(0, 600px, 414px, 0); opacity: 0; }
}
@-webkit-keyframes clip-out { 0% { clip: rect(200px, 280px, 300px, 160px); opacity: 1; } 60% { clip: rect(0, 600px, 414px, 0); opacity: 1; } 100% { clip: rect(0, 600px, 414px, 0); opacity: 0; }
}
@keyframes clip-out { 0% { clip: rect(200px, 280px, 300px, 160px); opacity: 1; } 60% { clip: rect(0, 600px, 414px, 0); opacity: 1; } 100% { clip: rect(0, 600px, 414px, 0); opacity: 0; }
}
@-moz-keyframes text-in { 0% { -moz-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes text-in { 0% { -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes text-in { 0% { -moz-transform: translate3d(0, 80px, 0); -ms-transform: translate3d(0, 80px, 0); -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-moz-keyframes text-out { 0% { top: 0; } 100% { top: -80px; }
}
@-webkit-keyframes text-out { 0% { top: 0; } 100% { top: -80px; }
}
@keyframes text-out { 0% { top: 0; } 100% { top: -80px; }
}
@-moz-keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes opacity-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes pulse { 0% { visibility: visible; box-shadow: 0px 0px 0px 0px #3498db; } 80%, 100% { visibility: visible; box-shadow: 0px 0px 0px 20px rgba(52, 152, 219, 0); }
}
@-webkit-keyframes pulse { 0% { visibility: visible; box-shadow: 0px 0px 0px 0px #3498db; } 80%, 100% { visibility: visible; box-shadow: 0px 0px 0px 20px rgba(52, 152, 219, 0); }
}
@keyframes pulse { 0% { visibility: visible; box-shadow: 0px 0px 0px 0px #3498db; } 80%, 100% { visibility: visible; box-shadow: 0px 0px 0px 20px rgba(52, 152, 219, 0); }
}
@-moz-keyframes height-in { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); }
}
@-webkit-keyframes height-in { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); }
}
@keyframes height-in { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); }
}
@-moz-keyframes width-in { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); }
}
@-webkit-keyframes width-in { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); }
}
@keyframes width-in { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); }
}
@-moz-keyframes clip-point { 0% { clip: rect(0, 0, 100px, 0); } 100% { clip: rect(0, 165px, 100px, 0); }
}
@-webkit-keyframes clip-point { 0% { clip: rect(0, 0, 100px, 0); } 100% { clip: rect(0, 165px, 100px, 0); }
}
@keyframes clip-point { 0% { clip: rect(0, 0, 100px, 0); } 100% { clip: rect(0, 165px, 100px, 0); }
}
@-moz-keyframes clip-width { 0% { clip: rect(0, 0, 80px, 0); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@-webkit-keyframes clip-width { 0% { clip: rect(0, 0, 80px, 0); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@keyframes clip-width { 0% { clip: rect(0, 0, 80px, 0); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@-moz-keyframes clip-height { 0% { clip: rect(0, 150px, 80px, 150px); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@-webkit-keyframes clip-height { 0% { clip: rect(0, 150px, 80px, 150px); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@keyframes clip-height { 0% { clip: rect(0, 150px, 80px, 150px); } 100% { clip: rect(0, 150px, 80px, 0); }
}
@-moz-keyframes color-in { 0% { color: transparent; } 100% { color: #fff; }
}
@-webkit-keyframes color-in { 0% { color: transparent; } 100% { color: #fff; }
}
@keyframes color-in { 0% { color: transparent; } 100% { color: #fff; }
}
@-moz-keyframes dimensions { 0% { visibility: visible; width: 0; height: 2px; background: rgba(52, 152, 219, 0); } 30% { width: 120px; height: 2px; background: rgba(52, 152, 219, 0); } 60% { width: 120px; height: 100px; background: rgba(52, 152, 219, 0); } 100% { visibility: visible; width: 120px; height: 100px; background: rgba(52, 152, 219, 0.5); }
}
@-webkit-keyframes dimensions { 0% { visibility: visible; width: 0; height: 2px; background: rgba(52, 152, 219, 0); } 30% { width: 120px; height: 2px; background: rgba(52, 152, 219, 0); } 60% { width: 120px; height: 100px; background: rgba(52, 152, 219, 0); } 100% { visibility: visible; width: 120px; height: 100px; background: rgba(52, 152, 219, 0.5); }
}
@keyframes dimensions { 0% { visibility: visible; width: 0; height: 2px; background: rgba(52, 152, 219, 0); } 30% { width: 120px; height: 2px; background: rgba(52, 152, 219, 0); } 60% { width: 120px; height: 100px; background: rgba(52, 152, 219, 0); } 100% { visibility: visible; width: 120px; height: 100px; background: rgba(52, 152, 219, 0.5); }
}
@-moz-keyframes bounce-arrows { 0%, 100% { height: 50px; -moz-transform: translateY(0); transform: translateY(0); } 50% { height: 70px; -moz-transform: translateY(-10px); transform: translateY(-10px); }
}
@-webkit-keyframes bounce-arrows { 0%, 100% { height: 50px; -webkit-transform: translateY(0); transform: translateY(0); } 50% { height: 70px; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@keyframes bounce-arrows { 0%, 100% { height: 50px; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 50% { height: 70px; -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@-moz-keyframes play-state { 0% { opacity: 1; -moz-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); transform: scale(2.5); }
}
@-webkit-keyframes play-state { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@keyframes play-state { 0% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); -ms-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5); }
}

Understanding CSS clip - Script Codes JS Codes

/*
Pure CSS, as always.
Inspired by Chris Coyier
https://codepen.io/chriscoyier/pen/lotjh
Image by Unsplash
https://unsplash.com/
For details go here
https://codepen.io/ARS/blog/understanding-css-clip
*/

Home Page	Home
Developer	Arsen Zbidniakov
Username	ARS
Uploaded	October 13, 2022
Rating	4.5
Size	8,794 Kb
Views	12,144

Do you need developer help for Understanding CSS clip?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arsen Zbidniakov (ARS) Script Codes

Name	Size
Apple Devices Mockup	2,484 Kb
Long Shadows for Font Awesome	3,424 Kb
Pastel Loader	3,365 Kb
ELEKS Digital Production	9,176 Kb
Timer	2,845 Kb
HTML5 Audio Player	5,934 Kb
Shattering Text Animation	5,244 Kb
IPhone lockscreen	3,923 Kb
Infinity Morph	2,974 Kb
Animated Gradient Ghost Button Concept	3,590 Kb

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Comment Jquery	SquishyAndroid	2,421 Kb
Sketchy Box	Mnicpt	3,033 Kb
Testing Code Pen	Jduprey	1,468 Kb
Virtual vinyl	Davidpanik	3,474 Kb
Knob rotation	Alemesre	2,122 Kb
Pure CSS Menu	Bronsrobin	3,321 Kb
Simple content swap	Snografx	1,859 Kb
Calculator	Rzencoder	4,572 Kb
Twitch JSON API	Jvhti	2,808 Kb
HTML5 Video Autoplay	Zivcos	1,352 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!