a sample of 4 of the Free avatar vectors showing human faces with hair and accessories

Looking for unique & free avatar vectors?

I bet you are! We all try to add some creativity in our designs and websites. That is what I put in mind when I created my previous freebies: 15 Islamic Vector Illustrations &  14 Flat Business Vector Icons

Today, I bring you a full set of free avatar vectors that varies between males and females features. Feel free to use the vectors for your personal or commercial purpose. You can use it in your blog, your website, your designs or any other. I did my  best to provide different faces and expressions for both genders to meet all your needs, so I wish they do. You will find PNG files for direct usage and also an illustrator file for ease of customization if you would like. Enjoy!

internal page

Download Now

This work is licensed under a Creative Commons Attribution 4.0 International License.

Did you like the set? then don’t forget to share it, so others can benefit as much as you did. Also, Suggest what should be our next freebie.

3 images showing the different hovers offered in this free plugin and the WordPress logo

Following on with the previous post: 9 Free Hover Effects with CSS3 Transitions , I developed this Free WordPress image hover plugin. Simply, install it through an easy to use shortcode, as described below. Go ahead and download this freebie to give your WordPress images a unique style.

Download Now

 

Shortcode:
[cr_image]

 

Parameters:
src:  Add your image link , preffered images to be square  --- {default: ""} 

size:  Write number to be the width and height for this image  --- {default: "250"}

overlay  style1 , style2 , none  --- {default: style1}

center_link  Add link for center icon  --- {default: ""}

center_animation  slide , scale  --- {default: slide}

center_icon  link , share  --- {default: link}

top_left_link  Add link for top left icon  --- {default: ""}

prettyphoto  Add image link or leave empty to be off  --- {default: off}

 

Examples:
[cr_image src="http://creiden.com/wp-content/uploads/2014/10/8.jpg" overlay="style1" center_link="themes.creiden.com/circleflip/" center_animation="slide" center_icon="link"]

[cr_image src="http://creiden.com/wp-content/uploads/2014/10/8.jpg" overlay="style1" center_link="themes.creiden.com/circleflip/" center_animation="scale" center_icon="link"]

[cr_image src="http://creiden.com/wp-content/uploads/2014/10/8.jpg" overlay="style2" center_link="themes.creiden.com/circleflip/" center_animation="scale" center_icon="share" prettyphoto="http://creiden.com/wp-content/uploads/2014/10/8.jpg" top_left_link="themes.creiden.com/circleflip/"]
3 images showing an example of the hovers offered in this freebie

This image hover animation set is created with an intend to offer users, like me, smooth animation for their designs. As you would see in the live preview, the set has 2 overlay style and 3 buttons animations that are described in details below to guide you for ease of application. This is my first set of freebie, so I will appreciate your feedback, guys. Hope you like them.

Download Now

 

Overlay Example 1 :

It’s a rectangle shape which separated to 2 triangles with different colors.

<li class="imgHover triangleScale style1">
 <img src="img.jpg"/>
</li>
<style>
.imgHover.triangleScale.style1:before, .imgHover.triangleScale.style1:after {
 border-width: 250px; /* Image Width */
}
</style>

 

Overlay Example 2 :

It’s the same rectangle shape, but shifted from the side by 20px.

<li class="imgHover triangleScale style2">
 <img src="img.jpg"/>
</li>
<style>
.imgHover.triangleScale.style2:before, .imgHover.triangleScale.style2:after {
 border-width: 210px; /* Image Width - Shifted space * 2 */
}
.imgHover.triangleScale.style2:hover:before {
 left: 20px;
 top: 20px;
}
.imgHover.triangleScale.style2:hover:after {
 right: 20px;
 bottom: 20px;
}
</style>

 

Button Example 1 :

This button starts from the upper right corner to the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="cornerLink"><span class="cr-icon-link"></span></a>
</li>

 

Button Example 2 :

This button will scale from 0 to 1 in the center of the image.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="scaleLink"><span class="cr-icon-link"></span></a>
</li>

 

Button Example 3 :

This is 2 buttons triangle shaped, in 2 opposite corner.

<li class="imgHover">
 <img src="img.jpg"/>
 <a href="#" class="topLeftLink"><span class="cr-icon-link"></span></a>
 <a href="#" class="bottomRightLink"><span class="cr-icon-search"></span></a>
</li>
15 islamic illustrations

Here in Creiden, we, designers, keep on searching for the tiniest tools that would save any web designer’s time to do it him/ her self. That’s how we come up with ideas for our sets of freebies. while searching, we found that the Islamic community is increasingly joining the web nowadays, so we thought about inspiring the designers of these websites. This time our set includes 15 incredible Islamic vector illustrations that would add a lot to the world of Islam on the web. Enjoy!

 

Pixel Perfect

fully customizable

Download Now

This work is licensed under a Creative Commons Attribution 4.0 International License.

Did you like the set? then don’t forget to share it, so others can benefit as much as you did.

14 Free Flat Business vector icons

We keep on studying the field of web design and development to find out the most needs of designers that would help them through designing  websites. Previously, we found a need for eCommerce icons, so my talented teammate, Sara created a set of pretty awesome flat icons set for eCommerce use. Today we discovered another group of icons that you, designers, might need for your business website. Enjoy this set of 14 free flat business vector icons, and remember, a little comment with your opinion will definitely help me in my next set.

 

Download Now

This work is licensed under a Creative Commons Attribution 4.0 International License.
Did you like the set? then don’t forget to share it, so others can benefit as much as you did.