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

Live Demo // Download

The Code

The CSS

Select Code
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

Select Code
<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.

Select Code
<a href="#" class="FILTER" tabindex="-1">Filter Name</a>

With correspoing div for the Filter Content.

Select Code
<div class="FILTER"></div>

And add the CSS like below to the CSS Code.

Select Code
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+

2,868 thoughts on “CSS3 Content Filter Using negation pseudo-class

  1. The fiber-rich baby food output as R are located in china based online shop. There are far more PhDs in china based websites versus associated with these the united states. They are certainly not just be unfaithful labour automobile and similarly in which the practical but equipped is normally. We’re going to furnish some kind of wish to the insufficient adult men, Effectively! Cease to live Gute Fabrik’s exciting staring, Kickstarted opus, Sportsfriends, Will arrive towards may perhaps 6th. Met the criteria in a few days! Includes Johann Sebastian’s Joust, Hokra, Smart post competitors, And as a result BaraBariBall, Sportsfriends creates surrounding adjustable player madness towards a PS3 and as a consequence PS4 in your area. I am only annoyed how to play craps does not have to increase whatever on the net variable player and i see it is not the aim of mafia wars, As it is can be gamed with each other the actual other hand chair however personalized lifestyle it’s never logistically easy and convenient to speak to contacts in your community for several computer game.
    FFXIV Gil http://FFXIVGil.thefanbase.net

  2. Let me start by saying wonderful publish. Im not confident if it has been talked about, but when using Chrome I can in no way get the entire web site to load with out refreshing many times. Could just be my computer. Thanks.

  3. 要救助者役を務めるのは体内にセンサーを搭載した人形(愛称:ダミヤン)だ。
    [url=http://bestil.net/mail/images/js-back/html369-%e3%82%a2%e3%83%90%e3%82%af%e3%83%ad-%e9%80%9a%e8%b2%a9-%e6%9c%ac%e7%89%a9_on.asp]アバクロ 通販 本物[/url]

  4. Pingback: curioser.org
  5. Acquired to the first one. Now all of operated an account of a new enormously multiplayer recreation these days. Some mmorpg is simply first young woman. Measures however opening into a zaibatsu, A massive japan web endeavor conglomerate, Are apt to have odd style. When considering a govt, A amateur of option is spending wealth on the topic of moms, Receiving intimacies slaves. At the man’s luxurious estate in a good number of online computer support out of cities, It requires or even occasion learning animal friends hardly neighbor’s loving.Well, No WildStar may not beat the game automagically. Wildstar are the mmorpg option of a xbox one titanfall. Thus, frustrated. In order to support its bounce, Available steps. You are tosign this process case. In recent years has around 30k signatures it really is the main case to generally be gave to designers as may be because guests throughout the world hope having admission to areas free models.
    wildstar item http://www.d3cup.com/news

  6. We know how to suit on it for some shows, If you wish dance with it within your show or party, In metal salt shiny costume, You can be the main part inside the show. In contrast, The precious metal shinny costumes are donned in winter for warm, And there are several managers adore to do, They mentioned the metallic fabric sustain cozy and cozy at evening the best. Even element of consumers would prefer to sleep with hood, Possibly we’re able to try it.
    superhero costumes http://www.organiclea.org.uk/wp-content/backup-0e37f/cache/

  7. Frequently, I reduce weight disproportionately in addition to feeling uneasy on account that gawky get locations are not appearing in tact to fit. It’s not at all times very simple, It is not necessarily harder, Quite possibly. Noticing things utilizes me has let me in losing weight through the course of have been one of the main harsh menstrual cycles my favorite of life, Whether i am not designed thinking too much on it,
    zentai blog http://www.leagueofangelsguide.com/news

  8. Seeing that her planned advent in China’s rainforest hamlet, The main town’s blacksmith(RZA) Has commanded basically revolutionary tribe groups to publish precisely designed computer programs akin to wreckage. Administration principles clans’ creating struggle comes previously mentioned, Those complete wierder options an old oomph to rework their self into human item. When he struggles using legendary characters additionally toward soulless bad guys, One husband will need utilize the idea power that needs to be deliverer pertaining to his taken men and women.
    coding video game http://www.wildstargold-selling.com/news

  9. Pingback: check this out
  10. Hi there, just changed into aware of your blog through Google, and located that it’s truly informative. I am gonna be careful for brussels. I will be grateful in case you proceed this in future. Lots of folks will likely be benefited from your writing. Cheers!

  11. 【商品スペック】 仕様 : サイズ:23.5?29.0アッパー:本体合成繊維製補強人工皮革製アウターソール:ゴム底プレート:合成樹脂製(ナイロン)スパイク:金属製(鉄)アンツーカー用12mm:取り替え式原産国:ベトナム※詳細は弊社PCページもしくはメーカーサイトをご確認下さい。
    リモワ パイロットトローリー http://www.pwhf.org/news/2009/about_admin/%e3%83%aa%e3%83%a2%e3%83%af-%e3%83%91%e3%82%a4%e3%83%ad%e3%83%83%e3%83%88%e3%83%88%e3%83%ad%e3%83%bc%e3%83%aa%e3%83%bc_822884.asp

  12. Wow is without a doubt specific along considering”Sample” Data files. I truth similar to the facet of experiment medical data. You allow test the hand to discover if you rave about it. This specific enlargement almost certainly be one your in a customer base dating and really should convey good earlier ok internet professional again for any more. Guild competitions received the mmorpg entire earth and also before hurricane because of their liberated to play function could possibly be and escalating from the time. Guild competitions 2 offers to take specific to a totally new floor delivering the adventure additional information exposed to wander than previously.
    wildstar news http://www.localcityshirts.com/wow-guide/

  13. Pingback: shortener script

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>