This tutorial shows how we filter content only by using CSS3 and then add some easing transitions to it. Content Filtering is done by CSS’ negation pseudo-class and the class attribute and the transitions are again by CSS only, there is no JavaScript/jQuery involved. You can see the code(s) below, download the full working file or check out a live demo.
via vogtjosh.com
The Code
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
body {
width: 980px;
margin-left: auto;
margin-right:auto;
font-family:"Myriad Pro", "Myriad Web", Myriad, Frutiger, Calibri, sans-serif, Arial Black, Gadget;
overflow:hidden;
background: #545454;
background:-webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed;
background:-webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
background:-moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
background:-o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
}
section {
display:block;
float:left;
min-height:450px;
width:100%;
}
a {
display:block;
float:left;
width:25%;
text-decoration:none;
text-align:center;
padding:5px 0;
color:#a9a9a9;
background:#d7d7d7;
font-weight:bold;
font-size: 30px;
border-top:5px solid #999;
border-bottom:5px solid #999
}
div {
display:block;
float:left;
height:150px;
width:205px;
border:10px solid #999;
margin:10px;
-webkit-transition:all .85s linear;
-moz-transition:all .85s linear;
-o-transition:all .85s linear;
-ms-transition:all .85s linear;
transition:all .85s linear;
margin-top:20px;
}
div[class="web"] {
background:url(images/web.jpg);
}
div[class="graphic"] {
background:url(images/graphic.jpg);
}
div[class="music"] {
background:url(images/music.jpg);
}
a:focus[class] {
background: #ebebeb;
outline:none;
}
a[class="web"]:focus ~ div:not([class="web"]) {
height:0px;
width:0px;
border:none;
margin:0;
}
a[class="graphic"]:focus ~ div:not([class="graphic"]) {
height:0px;
width:0px;
border:none;
margin:0;
}
a[class="music"]:focus ~ div:not([class="music"]) {
height:0px;
width:0px;
border:none;
margin:0;
}
|
The HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section>
<a href="#" class="all" tabindex="-1">All</a>
<a href="#" class="web" tabindex="-1">Web</a>
<a href="#" class="graphic" tabindex="-1">Graphic</a>
<a href="#" class="music" tabindex="-1">Music</a>
<div class="web"></div>
<div class="music"></div>
<div class="graphic"></div>
<div class="web"></div>
<div class="music"></div>
<div class="graphic"></div>
<div class="music"></div>
<div class="graphic"></div>
</section>
|
Adding New Filters
Adding new filter is fairly easy, you can add as many filters as your want, add an anchor tag like below to the HTML Code.
1 |
<a href="#" class="FILTER" tabindex="-1">Filter Name</a>
|
With correspoing div for the Filter Content.
1 |
<div class="FILTER"></div>
|
And add the CSS like below to the CSS Code.
1 2 3 4 5 6 |
a[class="FILTER"]:focus ~ div:not([class="FILTER"]) {
height:0px;
width:0px;
border:none;
margin:0;
}
|
Where FILTER is the filter name, you will also need to change CSS of the layout if you intent to use the default file only.
Compatibility
For Working:
- Firefox 3+
- Safari 3+
- Chrome (any)
- Opera 10+
- Internet Explorer 9+
For Transitions:
- Firefox 4+
- Safari 4+
- Chrome 4+
- Opera 10.5+
Holy cow! Amazing.
What’s your reasoning behind using [class="music"] instead of .music?
Totally freaking cool!! thanks for the article…keep em coming!
This seems familiar: http://blog.vogtjosh.com/post/12237994218/element-filtering-using-css3-negation-pseudo-class
Very nice article Pritesh, a very good use of CSS3
properties. Just one thing I want to add that you can use
“display:none” to hide Div instead of using
height:0px;
width:0px;
border:none;
margin:0;
It will shorten your CSS markup, also you can create a
common animation class in stylesheet instead of using it again and again in
each class…just a suggestion, great website Keep it up
The height: 0 etc are not there to replicate display: none, they are there for the transition to different values.
Hi Pritesh, thanks for including a link to my post that you based yours off of.
It’s likely because my version (scroll down for the link) used the “data” attribute for filtering so I based the selector on the data- value not the class.
thanks for declare some code related to filter…….Web Filter
Awesome functionality with CSS alone. Really useful
I don’t think css transitions can apply to display:none
I want my images to be different, so how do I code this so that all of my images under music are different yet still under the category of ‘music’? Trying to figure this out has me stuck and frustrated. Please help!
This is exactly what I was looking for. You’ve got one more fan!