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

1 — Check for user color theme preference

If you ever need to detect whether the user prefers dark or light mode to style your site accordingly, CSS gives you this ability through the media query API.

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

2 — Text tooltips

CSS tooltips are easy and if planned and use right, can do a whole lot for you. The limitation is that they can only show text but I went over so many details in a video dedicated to this where I demonstrate how to add positioning, theme, and more. But this relies on pseudo-elements and the ability of their content being something you set in an attribute of their parent. Then all you do is the absolute position it and style it.

<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);
}

3 — The direction arrow

One thing that actually goes great with a tooltip is the little down arrow pointing to the button with the tooltip (image above). The conversation bubble arrow. It works by removing the width and height of the pseudo-element and adds borders only which with a width and height of zero forms 4 triangles which you can set the color to be transparent and then target a specific one to color, whether the top, right, bottom or left.

.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

If you ever try to customize your text underline you will quickly run out of options and get frustrated. Some websites require custom text underlines as fonts normally don't help and what you are trying to highlight often gets lost.

.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;
}
.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;
}

5 —No HTML for wrapper needed

There are probably have been times where you wanted the container to take full width but what is inside the container to only go up to 1200px, for example. What devs normally do is wrap the content inside a wrapper container and set a max-width on it. Something similar to the following markup and CSS.

<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;
}

6 — Extend the clickable area

Let's say you have a clickable element that is small and on mobile, it appears too small to become easily clickable. You can increase the clickable area of the element without changing the element to look any differently just by using pseudo-elements. Since they are part of the element, when they get a click the click naturally propagates to the parent. You just have to make them invisible.

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);
}

7 — Responsive text

If you ever wanted your font size to adapt with the size of the site — which you should if you ever code frontend — then this simple formula got you covered;

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

Something that has been there forever and got adopted by designers and all at sudden 80% of all designs started including is the frosted glass effect. You simply use the backdrop filter and the color is determined by the background.

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

9 — Image grid with random height (Mansory Layout)

This is the famous Pinterest layout that you can use the old column property to accomplish quite easily.

<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;
}

10 — Math with Calc

Nothing in this world requires no math and the CSS calc function is magical. What makes it magical is the fact that you can mix unit types and do extensive calculations to help you position, resize, rotate elements easily. You already saw a good use case with tip #5 and tip #7 but here a few useful bunches you can use.

// 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

CSS is fun and full of magic and it is always great when you feel like you know something more and the process of discovering CSS tricks is simply a good one. Sometimes it is about exploring the options, reading the specs and sometimes it can appear like it is pure luck, but CSS is growing and the tricks will never end.

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