/
Gists
/
CSS trick
Gists - CSS trick
On gists
CSS
CSS trick
Fake slide pure css
index.html #
<!-- DEMO: https://jsbin.com/goyapuworo/edit?html,css,output -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fake slide by me</title>
<style>
.grid {
display: flex;
translate: 0;
transition: 300ms;
}
.grid > div {
width: calc(100% - 4rem);
flex-shrink: 0;
padding: 2rem;
}
.grid > div:first-child {
background: pink;
}
.grid > div:first-child + *{
background: lime;
}
article
{
border: 2px solid green;
overflow: hidden;
}
input {
margin-bottom: 20px;
}
input:checked + article .grid {
translate: -100%;
}
</style>
</head>
<body>
<input type="checkbox">
<article>
<div class="grid">
<div class="col">AA</div>
<div class="col">BB</div>
</div>
</article>
</body>
</html>
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;
}