/
Gists
/
CSS trick
Gists - CSS trick
On gists
CSS
CSS trick
Parent - Child (height - min-height inherited)
app.css #
/* 1 */
.parent
{
min-height: 200px;
height: 1px;
border: 3px solid black;
}
.child
{
background: mistyrose;
height: 100%;
}
/* 2 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: flex;
}
.child
{
background: mistyrose;
width: 100%;
}
/* 3 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: flex;
flex-direction: column;
}
.child
{
background: mistyrose;
flex: 1;
}
/* 4 */
.parent
{
min-height: 200px;
border: 3px solid black;
display: grid;
}
.child
{
background: mistyrose;
}
/* 5 */
.parent
{
min-height: 200px;
border: 3px solid black;
}
.child
{
background: mistyrose;
min-height: inherit;
}
On gists
CSS
CSS trick
Css scrollable centered modal
style.css #
/* to the body element */
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
inset: 0;
place-items: center;
}
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: grid; }
/* this code is not strictly necessary: just to make this demo a bit pleasant */
.overlay div {
width: 80%;
max-width: 650px;
padding: 30px;
background: rgba(255,255,255, .95);
}
.overlay {
background: rgba(40,40,40, .75);
}
* { box-sizing: border-box; }
button { padding: 1.5em 4em; cursor: pointer;}
pre { background: #fafafa; padding: 15px; border: 1px #ccd dashed; }
pre + p { margin: 5vh 0; }
On gists
CSS
CSS trick
Flexbox Solver
solver.css #
/*
https://kentondejong.medium.com/this-css-1-liner-will-improve-your-flexbox-7e40e977ef5c
*/
.parent {
--gap: 20px;
--columns: 5;
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
.child {
flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}
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
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
Grid full-bleeding, full width
•
CSS trick
example.css #
/*
https://fatbuddhadesigns.co.uk/journal/full-bleed-layouts/
https://www.joshwcomeau.com/css/full-bleed/
https://blog.logrocket.com/full-bleed-layout-css-grid/
*/
.wrapper {
display: grid;
grid-template-columns: 1fr min(60ch, calc(100% - 64px)) 1fr;
grid-column-gap: 32px;
}
.full-bleed {
grid-column: 1 / -1;
}
.full-bleed {
width: 100%;
grid-column: 1 / 4;
}
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>