/
Gists
/
CSS trick
Gists - CSS trick
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>
On gists
CSS variables (get/set + javascript)
•
Popular ⭐
JavaScript
CSS
CSS trick
usage.js #
// Getting a CSS Variable's Value
getComputedStyle(document.documentElement) // or specific element
.getPropertyValue('--my-variable-name'); // #999999
// Setting a CSS Variable's Value
document.documentElement.style // or specific element
.setProperty('--my-variable-name', 'pink');
// OR
var root = document.querySelector(':root'); // = document.documentElement
On gists
CSS
CSS trick
CSS (how to write logical statement)
solution.css #
/* https://stackoverflow.com/questions/2797091/css-and-and-or */
/* or || */
.registration_form_right input:not([type="radio"]):not([type="checkbox"]) {}
/* and && */
.registration_form_right input:not([type="radio"]),
.registration_form_right input:not([type="checkbox"])
On gists
CSS
CSS trick
External links only CSS
external-links.css #
/* https://davidwalsh.name/external-links-css */
/* long version */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]),
a[href^="//"]:not([href*="mysite.com"]), {
}
/* shorter version! */
a[href*="//"]:not([href*="mysite.com"]) {
/* external link styles, use :before or :after if you want! */
}
On gists
Full width
•
CSS
CSS trick
full.css #
.full-width {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
.full-width2 {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background: coral;
}
.full-width3 {
/* max-width: 100vw; */
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
background: lime;
}
On gists
CSS
CSS trick
Flex with gap
demo1.css #
/* https://coryrylan.com/blog/css-gap-space-with-flexbox */
.emulated-flex-gap {
--gap: 12px;
display: inline-flex;
flex-wrap: wrap;
margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
width: calc(100% + var(--gap));
}
.emulated-flex-gap > * {
margin: var(--gap) 0 0 var(--gap);
}
On gists
CSS
CSS trick
Parent - child - overlay - increase parent by child
index.html #
<!-- DEMO: http://kod.djpw.cz/ilcd -->
<div class="row">
<div class="content">
obsah row <br>
</div>
<div class="overlay">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
<div class="row">
<div class="content">
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
obsah row<br>
</div>
<div class="overlay">
<div>1</div>
</div>
</div>
On gists
CSS
CSS trick
Fluid images
fluid-images.css #
/* https://www.zachleat.com/web/fluid-images/ */
img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}
/* Let SVG scale without boundaries */
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}
On gists
CSS
CSS trick
Transform origin - Filled buttons
index.html #
<!-- https://jsbin.com/bowaxu/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>
<a href="" class="button"><span class="button-text"></span></a>
</body>
</html>