Weebly Tricks #99 - CSS3 Filter Function

For sure you can't resist our next tutorial. Something that sorts your images using only CSS3. The demo shows smooth appearance of photos being sorted. Additionally, a simple hover effects has been applied.

CLICK HERE FOR LIVE DEMO

---

CSS

---

.ff-container{
width: 564px;
  height: 50px;
margin: 10px auto 30px auto;
}
.ff-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
width: 25%;
  text-align: center;
height: 30px;
  font-weight: bold;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 30px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
float:left;
box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
}
.ff-container label.ff-label-type-all{
border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
border-radius: 0px 3px 3px 0px;
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
background: #646d93;
background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad));
background: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
color: #424d71;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
}
.ff-container input{
display: none;
}
.ff-items{
position: relative;
margin: 0px auto;
padding-top: 0px;
}

.ff-items a{
display: block;
position: relative;
padding: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 4px;
width: 160px;
height: 120px;
}
.ff-items a span{
display: block;
background: rgba(113,123,161, 0.9);
font-style: italic;
color: #fff;
font-weight: bold;
padding: 20px;
position: absolute;
bottom: 10px;
left: 10px;
width: 120px;
height: 0px;
overflow: hidden;
opacity: 0;
text-align: center;
text-shadow: 1px 1px 1px #303857;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
height: 80px;
opacity: 1;
}
.ff-items li img{
display: block;
}

.ff-items li{
margin: 0px;
float: left;
width: 188px;
  margin: 10px 0 0 0;
height: 148px;
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{
opacity: 1;
}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
opacity: 0.1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
display:none;
}

---

HTML

---

<section class="ff-container">

<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
<label for="select-type-all" class="ff-label-type-all">All</label>

<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
<label for="select-type-1" class="ff-label-type-1">Web Design</label>

<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
<label for="select-type-2" class="ff-label-type-2">Illustration</label>

<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
<label for="select-type-3" class="ff-label-type-3">Icon Design</label>

<div class="clr"></div>

<ul class="ff-items">
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Chameleon</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff1.jpg" />
</a>
</li>
<li class="ff-item-type-3">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Portfolio</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff2.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Flower</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff3.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Website</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff4.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-3">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Mobile Version</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff5.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Cake</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff6.jpg" />
</a>
</li>
</ul>

</section>

---

CONCLUSION

---

There are three available effects for this Filter Function, you can see it on the code source at the demo page. I can insert any of those on your site if you like, just click the SUPPORT tab on above.

Note that there are few adjustments made from the original codes. This is necessary to create a great output on Weebly site. Enjoy because there will be more awesome tutorials coming..

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!