Select Page

Responsive Breakpoints

// Responsive breakponts // ——————— // Fallback / v-small .class{ color:orange; } // mobile @media (min-width: 576px) { .class{ color:white; } } // large mobile @media (min-width: 768px) { .class{ color:red; } } // tablet...

Black and White filter

CSS3 has some really great, convenient features. One that you may or may not know about is you can convert an image to black and white using only CSS. This is great when you don’t want/need to edit the original image. Here’s how to do it The CSS 1 2 3 .blackandwhite {...

On page class switcher

<div class=”test” style=”padding: 1rem; font-size: 12px; position: absolute; left: 0; margin-left: 1rem; width: 160px; top: 50px; border: solid 1px #000; background-color: #00000055;”> <button onclick=”mbStyle1()”...

CSS external links

a[target=”_blank”]:after {  content: “”;  width: 16px;  height: 12px;  padding-right: 0.5rem; margin  background: url(/app/uploads/2020/09/icon-new-window.svg) no-repeat right top;  display: inline-block; ...

Smooth Box shadow

<div class=”box”> </div> .box { box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px...