CSS, HTML

CSS3 Content Filter Using negation pseudo-class

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


CSS3 Content Filter

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

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
15
16
17
18
19
20
21
22
23
24
25
26
27

<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
7
8
9
10
11

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+

Tags: ,

Related Posts

About Pritesh Gupta

Pritesh Gupta is the one behind this Blog, he is also a web developer and designer. Learn more about him here and follow him on Twitter at @PriteshGupta.
View all posts by Pritesh Gupta →
  • Anonymous

    Holy cow!  Amazing.

  • http://twitter.com/PerryRoper Perry Roper

    What’s your reasoning behind using [class="music"] instead of .music?

  • Sandy

    Totally freaking cool!! thanks for the article…keep em coming!

  • http://twitter.com/dumaurier dumaurier

    This seems familiar: http://blog.vogtjosh.com/post/12237994218/element-filtering-using-css3-negation-pseudo-class

  • Pingback: SDL Tridion WCM by rhertel - Pearltrees

  • http://www.markupwiki.com Vijay Gupta

    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 :)

  • http://twitter.com/PerryRoper Perry Roper

    The height: 0 etc are not there to replicate display: none, they are there for the transition to different values.

  • http://twitter.com/dumaurier Josh Vogt

    Hi Pritesh, thanks for including a link to my post that you based yours off of. 

  • http://twitter.com/dumaurier Josh Vogt

    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. 

  • Guest

    thanks for declare some code related to filter…….Web Filter

  • http://www.stylifyyourblog.com/ Prayag Verma

    Awesome functionality with CSS alone. Really useful

  • Drw158

    I don’t think css transitions can apply to display:none

CssChopper PSD to HTML Christmas Offer


Advertise Here