10 CSS Tricks You Need to Know About (Part 2)

Image for post
Image for post

1 — Check for user color theme preference

@media (prefers-color-scheme: dark) {
// your code for dark mode here
}

2 — Text tooltips

<button type="button" class="tooltip" data-tip="This css tooltip">
I have a Tooltip
</button>
// only add tooltip when there is a message
.tooltip[data-tip]:not([data-tip=""])::before {
content: attr(data-tip);
position: absolute;
background-color: rgba(0,0,0,0.8);
color: #fff;
padding: 15px 10px;
border-radius: 3px;
max-width: 300px;
width: 250%;
left: 50%;
transform: translate(-50%, 0);
bottom: calc(100% + 12px);
}
Image for post
Image for post

3 — The direction arrow

.tooltip[data-tip]:not([data-tip=""])::after {
content: '';
border-width: 6px;
border-style: solid;
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
width: 0;
height: 0;

display: inline-block;
position: absolute;
left: 50%;
bottom: 100%;
transform: translate(-50%, 0);
}

4 — Custom text underline

.shadow-underline {
display: inline;
box-shadow:
inset 0 -0.23em white,
inset 0 -0.25em green,
inset 0 -0.3em white,
inset 0 -0.4em red;
text-shadow: 0.04em 0 white, -0.04em 0 white;
}
Image for post
Image for post
.custom-underline {
display: inline;
background:
linear-gradient(90deg, black 50%, white 0) 0 78%/4px 2px repeat-x,
linear-gradient(90deg, white 50%, black 0) 0 82%/4px 2px repeat-x;
text-shadow: 0.04em 0 white, -0.04em 0 white;
}
Image for post
Image for post

5 —No HTML for wrapper needed

<main>
<div class="wrapper">
<h2>Lorem ipsum, dolor ...</h2>
<p>Lorem ...</p>
</div>
</main>
main {
background: #3F51B5;
color: #fff;
width: 100vw;
}
.wrapper {
margin: 0 auto;
padding: 15px 25px;
max-width: 900px;
}
main {
background: #3F51B5;
padding: 15px calc((100vw - min(900px, calc(100vw - 50px))) / 2);
color: #fff;
}
Image for post
Image for post
Image for post
Image for post

6 — Extend the clickable area

button {
border: none;
background: #222;
width: 10px;
height: 10px;
border-radius: 50%;
padding: 0;
position: relative;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

width: 200%;
height: 200%;
display: inline-block;
/* for demo purpose only - should be removed */
background: rgba(0,0,0,0.2);
}
Image for post
Image for post

7 — Responsive text

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
font-size: clamp(min, viewport-width-unit, max);

8 — Frosted glass effect

.container {
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
}
Image for post
Image for post

9 — Image grid with random height (Mansory Layout)

<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
.container {
width: 600px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;

-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
.item {
display: block;
// match gap size
margin-bottom: 15px;
}
Image for post
Image for post

10 — Math with Calc

// position 20px from the right and 10px from the bottom
background-position: calc(100% - 20px) calc(100% - 10px);
.header {
height: 100px;
}
.content {
height: calc(100% - 100px);
}
transform: rotate(calc(3turn + 45deg));
[data-columns="1"] .col { width: calc(100% / 1); }
[data-columns="2"] .col { width: calc(100% / 2); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="6"] .col { width: calc(100% / 6); }
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}

Conclusion

Blog & YouTube Channel for Web, UI & Software Development - beforesemicolon.comyoutube.com/c/BeforeSemicolon

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store