Create Dark mode website theme by adding a single line of CSS

Swaroop — Thu, 24 Dec 2020 02:28:32 +0000

We all know that now a days dark website theme become very popular each and every popular sites are providing dark theme.

You know need to write multiple line of Javascript or jQuery or even CSS to achieve this. All you need is just one line of CSS.

Still don't believe me?
Without wasting time let's jump into the code.

Here's the code

html.dark-theme {
    filter: invert(1);
}

Click here for live example

Turn Horizontal lines into a close button

Swaroop — Wed, 14 Aug 2019 07:02:28 +0000

In this article, I'm going to show you how to turn Horizontal lines into a close button with very minimal coding using simple CSS.

Mostly we will use these horizontal lines to create a mobile menu. We can also call Horizontal lines as Navigation lines.

HTML Code looks like below:

<span> </span>
<span> </span>
<span> </span>

CSS Code to create Horizontal lines:

.navlines {
    width: 24px;
    height: 24px;
    position: relative;
}

.navlines span {
    position: absolute;
    width: 100%;
    border: 1.5px solid #582c83;
    border-radius: 9px;
    transition: all 0.5s ease;
}
.navlines span:nth-child(1) {
    top: 0px;
}
.navlines span:nth-child(2) {
    top: 10px;
    width: 18px;
}
.navlines span:nth-child(3) {
    top: 20px;
}

Horizontal lines ready, now we need to convert horizontal lines to close button.

CSS Code to turn Navigation lines to Close button:

.navlines:hover span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
}
.navlines:hover span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.navlines:hover span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 50%;
}

Demo here:

DEV Community: Swaroop

Create Dark mode website theme by adding a single line of CSS

Here's the code

Turn Horizontal lines into a close button