October 31, 2015

Weebly Tricks #99 - CSS3 Filter Function

Posted by Domingo Tambasacan at 10/31/2015



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.








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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top