This plugin is a very small javascript library which gives you the ability to write clever and specific CSS rules to refine your website design for each different browser, platform, device and operating system.
The post Detectr.js : JS Library to write Clever CSS Selectors appeared first on jQuery Rain.
Mini jQuery Temperature styled Gauge plugin, that replaces Temperature Values with an Temperature Gauge.
Features:
The post TempGauge : jQuery Temperature styled Gauge plugin appeared first on jQuery Rain.
Whether you're creating marketing materials for a client, working on your comic book side project, or designing your own greeting cards, we've got something that'll save you a ton of time on any design project. Get the Mega Graphics Bundle for $19 at SitePoint Shop.
This valuable bundle usually goes for $1,325, so don't miss your chance to grab it for 98% off. You'll get 1,260 elements, all with an Extended License so you can use them again and again. Create greeting cards with the hundreds of love patterns and holiday elements. Choose from dozens of logo designs for your small business. Dress up fliers, business cards, and posters with colorful backgrounds and nature and weather elements. And work on your comic book with dozens of comic book elements and speech bubbles.
Save 98% on the Mega Graphics Bundle. Get it for $19 at SitePoint Shop.
Continue reading %Get 1,200+ Design Elements for $19%
Some months ago, I wrote an article about MixItUp, a popular jQuery plugin for filtering and sorting. In today’s article, I’ll show you how to build your own simple filterable component with jQuery and CSS animations.
Without further ado, let’s get started!
As a first step, I’ll show you the HTML structure of the component. Consider the following markup:
[code language="html"]
<div class="cta filter">
<a class="all active" data-filter="all" href="#">Show All</a>
<a class="green" data-filter="green" href="#">Show Green Boxes</a>
<a class="blue" data-filter="blue" href="#">Show Blue Boxes</a>
<a class="red" data-filter="red" href="#">Show Red Boxes</a>
</div>
<div class="boxes">
<a class="red" data-category="red" href="#">Box1</a>
<a class="green" data-category="green" href="#">Box2</a>
<a class="blue" data-category="blue" href="#">Box3</a>
<!-- other anchor/boxes here ... -->
</div>
[/code]
Notice that I’ve set up some pretty basic markup. Here’s an explanation of it:
data-category attribute. The value of this attribute determines the category that each element belongs to.data-filter attribute to the filter buttons. The value of this attribute specifies the desired filter category. For instance, the button with the data-filter="red" attribute/value will only show the elements that belong to the red category. On the other hand, the button with data-filter="all" will show all the elements.Now that you’ve had an overview of the required HTML, we can move on to explore the CSS.
Each time a filter category is active, its corresponding filter button receives the active class. By default, the button with the data-filter="all" attribute gets this class.
Here are the associated styles:
[code language="css"]
.filter a {
position: relative;
}
.filter a.active:before {
content: '';
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #333 transparent transparent transparent;
}
[/code]
In addition, I’m going to use flexbox to create the layout for the target elements.
See the related styles below:
[code language="css"]
.boxes {
display: flex;
flex-wrap: wrap;
}
.boxes a {
width: 23%;
border: 2px solid #333;
margin: 0 1% 20px 1%;
line-height: 60px;
}
[/code]
Lastly, I’m defining two different CSS keyframe animations that I’ll use later on to reveal the elements:
[code language="css"]
@keyframes zoom-in {
0% {
transform: scale(.1);
}
100% {
transform: none;
}
}
@keyframes rotate-right {
0% {
transform: translate(-100%) rotate(-100deg);
}
100% {
transform: none;
}
}
.is-animated {
animation: .6s zoom-in;
// animation: .6s rotate-right;
}
[/code]
With the markup and CSS in place, we can start building the JavaScript/jQuery.
Continue reading %Building a Filtering Component with CSS Animations & jQuery%
