drdstq
Last Updated: February 25, 2016
·
5.357K
· elad2412
Elad1

CSS Click Event?!

CSS3 added support to let you know if a radio or a checkbox input elements are checked, using this capability I have created the 3D Flipping Cards in this protip I will show you how it is done.

How to make Select Event in CSS.

Using the new pseudo class :checked we can make advanced features that let "CSS remember", this new capability creates a better connection between the CSS and the HTML.

Picture

Let's Begin!

I have decided to make 4 cards that are showing there back side, and by clicking on them, they show there front and same by clicking again.

HTML

I created a list of items and added checkbox input and label to each li element:

<ul class="flipping-cards">
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">
      <span class="wrapper">
        <span class="image"></span>
        <span class="back"></span> 
      </span>
    </label>    
  </li>
/*....(3 more with different ID and different reference from attribute For of the label)*/

** CSS **

I have added styles that show the backface of the card and hide the front:

input[type="checkbox"]{position:absolute;z-index:5;}
ul,li{list-style:none;padding:0;margin:0;}

.flipping-cards li{
  position:relative;
  float:left;
  margin-right:10px;
}
.flipping-cards label{  
  display:block;
  width:200px;
  height:250px;
  cursor:pointer;
}

.flipping-cards .wrapper{
  display:block;
  width:200px;
  height:250px;  
}
.flipping-cards .wrapper span{
  display:block;
  width:200px;
  height:250px;
  position:absolute;
  top:0;
  left:0;
}

.flipping-cards label .back{
  border-radius:10px;
  background-color:gray; 
}

.flipping-cards label .image{
  display:none;  
}

The result so far: see example

As you can see, by clicking on one of the card the checkbox get checked and unchecked if clicking again.

Now we add the front images of the cards, nothing will happen after we add them, because they are hidden with display:none.

CSS

label[for="item1"] .image{background-image:url(http://farm6.staticflickr.com/5339/8879221754_51e07afc5e_o.png);}

label[for="item2"] .image{background-image:url(http://farm8.staticflickr.com/7398/8878601839_e5a56dc65f_o.png);}

label[for="item3"] .image{background-image:url(http://farm6.staticflickr.com/5461/8879221878_b22fdf9ff8_o.png);}

label[for="item4"] .image{background-image:url(http://farm8.staticflickr.com/7458/8878601681_b8c0499874_o.png);}

The result so far: see example

Like I said, nothing happened. Now we just need to add the logic.

Add CSS logic

This CSS is checking if input is checked, then if true it's goes to is sibling label and find inside him the element with class="image", and then add styles to show the image and put it in front over the backface element (the back and front are sibling element).

Beside this I will hide the checkbox's as we don't need to display them anymore.

.flipping-cards input[type="checkbox"]:checked + label .image{
  display:block;
  position:absolute;
  right:0;
  left:0;
  z-index:2;
} 

input[type="checkbox"]{/*added*/display:none;}

That's it! We have flipping card, The final result example available here: see example

Yeay! Working good... but still little dry, I have added more style's for this example that make it a lot little more pretty with 3D CSS (transition and transform) and some gradient that I use from Lea Verou - CSS3 Patterns Gallery, she's really amazing and I suggest you to check out her blog.

Here is the full and final example - 3D Flipping Cards!.

Enjoy!

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

If liked this post, you may also like:
- CSS Target Event.

I got the inspiration by CSS3 Treeview. No JavaScript

Say Thanks
Respond

1 Response
Add your response

7289
02688ffd42b4265a4fa2ca1683115e4e

It's amazing how many interfaces you can create with hidden checkboxes/radios and adjacent labels. I have found myself using the pattern extensively in all of my recent projects.

I have found that there are some cross-browser issues with this approach. Inputs set to display: none; or zero-size don't seem to select on label-click in older versions of IE--and of course, the :checked pseudo isn't supported. I feel like I was also experiencing problems on IE8? where a ":checked + label" CSS rule was not redrawing immediately.

My workaround has been to absolutely position the inputs (but not the labels) with a high negative left value, and to use JS to explicitly set a class for :checked elements. Workarounds aside, it's a great approach.

over 1 year ago ·