5 Examples That Prove CSS Is A Beast

5 Examples That Prove CSS Is A Beast

In their endeavor to seize the market and retain singularity, web designers go all out when designing websites. They are making amazing use of CSS3 transformations and its awesome features to dress up things a bit with the intent of catching the fancy of their audience.

If you are a graphic designer who apparently doesn’t live under a rock, you’d probably agree that you can go beyond the traditional practice of using fancy images and flash to add gloss to your website. With CSS3 gradients, transitions, and all the other technical mumbo jumbo, designers are equipped more than ever to implement such elements in a comparatively easier manner.

1693931

 

Despite it being used since the dawn of time, we are yet to realize the full potential of CSS. Let’s dive in and explore the CSS territories a little deeper. You may have stepped inside them already, but let us place on a more firm ground:

Foundations-of-Front-End-Development-Course

 

For Styling the Checkbox

The CSS check box is a hot property in the web realm. And if you look around the web, you will find plenty of people asking and answering questions around them. The :checked pseudo-classes of HTML checkboxes already make them formidable and highly capable. The ‘label’ here can be used to inject the styling code and it is used to swing the pseudo-classes into action.

 

HTML


<input class="custom-checkbox" id="checkbox" type="checkbox" />

<label class="checkbox-label" for="checkbox">Click me</label>

We will hide the checkbox before appending the pseudo-element. Let’s take a look at the code:

 

CSS

.custom-checkbox {
display: none;
}

.checkbox-label:before {
content: "";
margin: 0 10px 0 0;
float: left;
width: 16px;
height: 16px;
background: #fff;
border: 1px solid #222;
border-radius: 3px;
}
.custom-checkbox:checked + .checkbox-label:before {
content: "?";
font-weight: bold;
}

 

For Hiding/Showing Content

Now, hiding and showing content is a practice that can be performed using JavaScript, but it involves hell of a lot of code in the whole exercise. But, let us accomplish the same feature using CSS. The markup for the same is not complicated at all.

Our list has to look something like this:

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
<a href="#">Item 6</a>
<a href="#">Item 7</a>
<a href="#">Item 8</a>

We will wrap the ones that have to be hidden and then create clickable action to show them. We will apply the style of the anchor and also enable toggling.

 

HTML

<div class="items-list"><a href="javascript:void(0);">Item 1</a>
<a href="javascript:void(0);">Item 2</a>
<a href="javascript:void(0);">Item 3</a>
<a href="javascript:void(0);">Item 4</a>
<input class="show-all-items" id="show-all-items" type="checkbox" />
<label id="list-label" for="show-all-items"></label>
<div class="more-items"><a href="javascript:void(0);">Item 5</a>
<a href="javascript:void(0);">Item 6</a>
<a href="javascript:void(0);">Item 7</a>
<a href="javascript:void(0);">Item 8</a></div>
</div>

CSS for it will look like:

a, label {
display: block;
border-bottom: 1px solid #000;
padding: 10px;
width: 100%;
color: #545454;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
}

.more-items {
display: none;
}

.show-all-items {
display: none;
}

.items-list {
position: relative;
padding-bottom: 43px;
}

label {
position: absolute;
bottom: 0;
}

label::before {
content: "Show More Items";
}

.show-all-items:checked ~ .more-items {
display: block;
}

.show-all-items:checked + label:before {
content: "Hide Items";
}

 

For Facilitating Off-Canvas Navigation

Many websites are using the off-canvas feature to make their web pages lighter. Again, when you are attempting to use the JavaScript, you are inviting a lot of setup to be performed.

With CSS however, you are spared using the JavaScript, and instead opt for a lighter and more effective approach:

<input class="checkbox" id="checkbox" type="checkbox" />
<label class="menu-icon" for="checkbox"></label>
<label class="close" for="checkbox"></label>

We will set all the base styles and assign proper functionalities.

 

The final CSS would look like:

.checkbox {
display: none;
}
.menu-icon {
position: absolute;
right: 0;
width: 25.5px;
height: 5px;
background: #000;
margin: 25px;
transition: right 0.3s ease;
cursor: pointer;
}

.menu-icon::before, .menu-icon::after{
content: "";
position: absolute;
background: #000;
width: 26px;
height: 5px;
}

.menu-icon::before {
top: -10px;
}

.menu-icon::after {
bottom: -10px
}
.close {
position: absolute;
top: 0;
right: 250px;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.off-canvas {
position: fixed;
right: -250px;
width: 250px;
height: 100%;
background: #ccc;
transition: right 0.3s ease;
}
.container {
position: relative;
left: 0;
transition: all .3s ease;
}
.checkbox:checked ~ .off-canvas {
right: 0;
}

.checkbox:checked ~ .menu-icon {
right: 250px;
}

.checkbox:checked ~ .close {
pointer-events: auto;
}

.checkbox:checked ~ .container {
left: -250px;
}

 

Leveraging the :target pseudo selector

:target pseudo selector hands you over with one of those methods that can be used to implement features that otherwise require intricate JavaScripts.

We can doctor the styles of elements as we activate this class on elements that contain the same URL hash that is there on the element’s ID.

Let us see the code that can be used to leverage  :target pseudo selector in the best way possible:

HTML

<a href="#content">Show content</a>
<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus nec orci vestibulum suscipit quis sodales tortor. Maecenas vitae hendrerit orci, eu faucibus libero.</p>
<a class="hide-content" href="#">Close</a>

CSS

#content {
display: none;
margin: 20px 0
}
#content:target {
display: block;
}
.hide-content {
display: none;
}
#content:target + .hide-content {
display: block;
}

 

Building a Modal Dialog with only CSS

JavaScript has always been instrumental in creating some interactive modals, and CSS can also use :target to create models that are more detailed that can close when you want them to.

We have an empty.modal-close anchor and it is placed right behind the .modal element. 

Let’s have a look at the HTML and CSS codes for them:

<a href="#popup">Show modal</a>
<div class="popup-body" id="popup">
<div class="popup"><a id="close" href="#">X</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit augue eu tincidunt sollicitudin. Morbi bibendum enim vel mauris ultrices volutpat. Nam imperdiet ultrices faucibus. Vivamus mattis tempus ipsum, sit amet faucibus tortor porta at. Sed tincidunt mauris in risus euismod adipiscing. Nullam ullamcorper arcu sit amet odio sodales, et sollicitudin ipsum eleifend. Proin mattis nunc aliquet diam varius porta. Donec pellentesque non metus ut bibendum.</div>
</div>

CSS

p {
font-size: 14px;
margin-top: 10px
}

.popup-body {
display: none;
}

.popup-body:target {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.75);
}

.close-popup {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
cursor: default;
}

.popup {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0 auto;
width: 350px;
padding: 15px;
background: #fff;
border: solid 2px #000;
}

#close {
position: absolute;
right: 10px;
top: 2px;
text-decoration: none;
}

We thus had a comprehensive look at multiple click events that can be triggered using CSS. But CSS also goes beyond them, and going by the keenness of web designers to take leaps from one wave to another, we can only expect grander things coming our way.

Posted in CSS
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Samuel Dawson

Samuel Dawson loves blogging and is one of the best HTML to Wordpress theme converter by profession. He is constantly enthused about imparting data identified with most recent web patterns. As of now, he is serving at Designs2html Ltd., a rumored name in the site markup transformation administrations space.