/
Gists
/
CSS
Gists - CSS
On gists
CSS
CSS trick
Restart CSS Animation
restart.js #
// https://css-tricks.com/restart-css-animation/
// retrieve the element
element = document.getElementById("logo");
// reset the transition by...
element.addEventListener("click", function(e) {
e.preventDefault;
// -> removing the class
element.classList.remove("run-animation");
// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
// Oops! This won't work in strict mode. Thanks Felis Phasma!
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void element.offsetWidth;
// -> and re-adding the class
element.classList.add("run-animation");
}, false);
// other solution
var elem = this;
elem.className = '';
setTimeout(function () {
elem.className = 'run-animation';
}, 0);
On gists
JavaScript
CSS
CSS trick
Simple rating (odometer)
example.html #
<section>
<button id="minus">-</button>
<div>
<span style="--state: -10">- 9-8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9</span>
</div>
<button id="plus">+</button>
</section>
On gists
Non-Rectangular Headers (Tilt / Trapezoidal)
•
Popular ⭐
CSS
CSS trick
demo1.html #
<!--
SVG
https://codepen.io/erikdkennedy/pen/ygpwZg?editors=1100
-->
<header>
<h1>Header Content</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="red" points="0,100 100,0 100,100"/>
</svg>
</header>
<section>
<h1>Section Content</h1>
</section>
On gists
CSS
CSS trick
Flexbox masonry
example.css #
/* https://codepen.io/collection/XPjvPP/ */
/* Render items as columns */
.container {
display: flex;
flex-flow: column wrap;
}
/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* Force new columns */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
On gists
CSS
CSS trick
Animating link
app.css #
/* https://jsbin.com/piwefoxacu/edit?html,css,output */
a {
position: relative;
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
}
a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}
a:hover::before {
transform: scaleX(1);
}
/* Animate the line from the right */
a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: top right;
transition: transform 0.3s ease;
}
On gists
Full Width Containers in Limited Width Parents
•
CSS
CSS trick
demo.css #
/* https://css-tricks.com/full-width-containers-limited-width-parents/ */
/* With Known % Width */
main {
width: 60%;
margin: 0 auto;
/* creates 20% margins on either side */
}
.full-width {
/* 1/3 of 60% = the 20% margin on either side */
margin-left: -33.33%;
margin-right: -33.33%;
}
/* With Known Non-% Parent Width */
@media (min-width: 500px) {
main {
width: 500px;
margin: 0 auto;
}
.full-width {
margin-left: calc(-100vw / 2 + 500px / 2);
margin-right: calc(-100vw / 2 + 500px / 2);
}
}
@media (min-width: $max-width) {
.full-width {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
@supports (width: 100vw) {
.full-width {
width: 100vw;
}
@media all and (min-width: 40rem) {
.full-width {
transform: translateX(calc((40rem - 100vw)/2));
}
}
}
/* No calc() needed */
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/*
tohle asi taky funguje
.my-image{
max-width: 100vw;
width: 100vw;
margin: 0 calc(-50vw + 50%);
height: 70vh;
}
*/
On gists
CSS
CSS trick
Textfield label animation
demo.html #
<!-- https://codepen.io/codegem-io/pen/poeeZOd -->
<style>
.wrapper {
display: block;
position: relative;
width: 300px;
}
.placeholder {
position: absolute;
left: 9px;
top: 13px;
padding: 0 4px;
color: var(--accent-color);
background-color: var(--bkg-color);
transform-origin: top left;
transition: all 120ms ease-in;
}
.textfield:focus + .placeholder,
.textfield:not(:placeholder-shown) + .placeholder {
top: -5px;
transform: scale(0.8);
font-weight: bold;
}
</style>
<label class="wrapper">
<input type="input" class="textfield" autocomplete="off" placeholder=" " />
<span class="placeholder">Name</span>
</label>
On gists
CSS
CSS trick
Inline horizontal rule
liner.scss #
// https://codepen.io/kcko/pen/qBrpVjO
.liner {
display: flex;
align-items: flex-start;
text-align: center;
&:before {
content: '';
flex-grow: 1;
height: 1px;
background: #D66853;
min-width: 20px;
margin: auto;
}
&:after {
content: '';
flex-grow: 1;
height: 1px;
background: #D66853;
min-width: 20px;
margin: auto;
}
&:after {
margin-left: 20px;
}
&:before {
margin-right: 20px;
}
}
On gists
CSS
CSS trick
Flex / Grid with border-bottom on each row
example.html #
<!--
https://jsbin.com/rekekomexa/1/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h3>GRID</h3>
<section class="grid">
<div>AAA</div><div>AAA</div>
<div class="line"></div>
<div>BBB</div><div>BBB</div>
<div class="line"></div>
<div>CCC</div><div>DDD</div>
<div class="line"></div>
</section>
<h3>FLEX</h3>
<section class="flex">
<div>AAA</div><div>AAA</div>
<div class="line"></div>
<div>BBB</div><div>BBB</div>
<div class="line"></div>
<div>CCC</div><div>DDD</div>
<div class="line"></div>
</section>
</body>
</html>