/
Gists
/
CSS
Gists - CSS
On gists
JavaScript
CSS
CSS trick
Prevent Body Scrolling on iOS
ios-prevent-scroll-fix.js #
const $body = document.querySelector('body');
let scrollPosition = 0;
export default {
enable() {
scrollPosition = window.pageYOffset;
$body.style.overflow = 'hidden';
$body.style.position = 'fixed';
$body.style.top = `-${scrollPosition}px`;
$body.style.width = '100%';
},
disable() {
$body.style.removeProperty('overflow');
$body.style.removeProperty('position');
$body.style.removeProperty('top');
$body.style.removeProperty('width');
window.scrollTo(0, scrollPosition);
}
};
On gists
CSS
CSS trick
Pure css paralax
index.html #
<!-- https://codepen.io/keithclark/pen/ndEygj -->
<div id="title" class="slide header">
<h1>Pure CSS Parallax</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img src="https://picsum.photos/980/600">
<img src="https://picsum.photos/960/600">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
On gists
Image from edge to container
•
Tailwind CSS
CSS
index.html #
<!--
@sources
https://play.tailwindcss.com/om6YbfPx0J
https://www.setrimsmalinou.cz/
-->
<!-- FROM LEFT TO RIGHT -->
<div class="relative h-[500px] border-2 border-black">
<!-- image -->
<div class="absolute inset-y-0 w-1/2 bg-red-300">
<img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
</div>
<!-- container -->
<div class="mx-auto flex h-full max-w-6xl justify-end border-2 border-green-500">
<div class="w-1/2">Content ...</div>
</div>
</div>
<!-- FROM RIGHT TO LEFT -->
<div class="relative h-[500px] border-2 border-black">
<!-- image -->
<div class="absolute inset-y-0 right-0 w-1/2 bg-red-300">
<img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
</div>
<!-- container -->
<div class="mx-auto flex h-full max-w-6xl justify-start border-2 border-green-500">
<div class="w-1/2">Content ...</div>
</div>
</div>
On gists
CSS
CSS trick
triangles in CSS (3 ways)
index.css #
/* https://htmixl.medium.com/how-to-create-triangles-in-css-three-easy-ways-49bd6dce7810 */
/* 1. borders */
.triangle{
width: 0;
height: 0;
border-left: 150px solid red;
border-top: 150px solid transparent;
}
/* 2. clip-path */
.triangle{
width: 150px;
height: 150px;
background-color: blue;
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* 3. gradient */
.triangle{
width: 150px;
height: 150px;
background-image:
linear-gradient(to top right, green 50%, transparent 0);
background-repeat: no-repeat;
}
On gists
JavaScript
CSS
CSS trick
CSS Clamp builder (responsive fluid typography)
clampBuilder.js #
// https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case
// https://royalfig.github.io/fluid-typography-calculator/
// https://fluid-typography.netlify.app/
function clampBuilder( minWidthPx, maxWidthPx, minFontSize, maxFontSize ) {
const root = document.querySelector( "html" );
const pixelsPerRem = Number( getComputedStyle( root ).fontSize.slice( 0,-2 ) );
const minWidth = minWidthPx / pixelsPerRem;
const maxWidth = maxWidthPx / pixelsPerRem;
const slope = ( maxFontSize - minFontSize ) / ( maxWidth - minWidth );
const yAxisIntersection = -minWidth * slope + minFontSize
return `clamp( ${ minFontSize }rem, ${ yAxisIntersection }rem + ${ slope * 100 }vw, ${ maxFontSize }rem )`;
}
console.log(clampBuilder(320, 1920, 1, 3)); // "clamp( 1rem, 0.6rem + 2vw, 3rem )"
On gists
CSS
CSS trick
Grid trick - stacking & centering (no position absolute needed)
index.html #
<!--
https://jsbin.com/febanurovo/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.stacked {
display: grid;
border: 1px solid red;
place-items: center;
isolation: isolate;
}
.stacked > * {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.stacked > .media {
z-index: -1;
}
img {
max-width: 100%;
height: auto;
}
</style>
<body>
<div class="stacked">
<h1>Some heading</h1>
<img class="media" src="https://kinsta.com/wp-content/uploads/2021/07/web-components-1024x512.png" alt="">
</div>
</body>
</html>
On gists
CSS
CSS trick
Video header
video-header.css #
/*
https://jsbin.com/razumivece/edit?css,output
https://jsbin.com/qejuforoba/edit?css,output
*/
header {
position: relative;
background-color: black;
height: 400px;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
}
/* or */
video {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}