Ornament patterns are a great (and easy) way to add some elegant flavor to your design. Some time ago I made a nice pack of free vector ornaments for one of the best free vector site. Today I have for you free vector patterns based on this vector ornament. With Adobe Illustrator CS6 it took me a moment to make great vector patterns, I just love Pattern Options!

Add some colors, play with opacity and blending modes – get inspired and have fun! You’re free to use them in any project.

Terms of use :

This Free Vector Ornament Patterns file is free for personal and commercial use. You are allowed to use these vector patterns in your projects, change them and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

Today I share with you a new pack of free Photoshop Brushes. Free Technical PS Brushes is made from old technical drawings. Hope you enjoy this free PS Brushes Pack.

Terms of use :

This Free Technical PS Brushes file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell Free Technical PS Brushes files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

This was one of the first sunny day this spring. Bike trip with camera and here you have – a nice pack of 19 Nature Photoshop Brushes.

Terms of use :

This 19 Nature Silhouettes Trees & Grass Photoshop Brushes pack is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

Hi, recently I was working on the design for the Baby Shower Invitation Template and I decided to share with you some of the assets I prepared. I took photos of cute baby shoes and prepared the PNG files on transparent background. Now you’re free do download and use them! Hope you like it and find it useful.

Terms of use :

This Free PNG Baby Shoes file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the PNG Baby Shoes files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

In this tutorial, I will present you my alternative solution to the select form tag. It’s css-only and it looks simple but really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element.
Of course you have to provide some fallback for mobile devices (and IE8 if you wish). I discuss that briefly in the final part of this tutorial.
Check the demo and choose your favorite beer.

Step 1 – HTML

Here is the html we use within a form

<fieldset class="radio-container">
	<div class="radio-options">
		<div class="toggle">Choose your beer</div>
		<ul>
			<li>
				<input type="radio" name="my-beer" id="choice1" value="choice1">
				<label for="choice1">Cul Dorcha</label>
			</li>
			<li>
				<input type="radio" name="my-beer" id="choice2" value="choice2">
				<label for="choice2">Rowers Red Ale</label>
			</li>
			<li>
				<input type="radio" name="my-beer" id="choice3" value="choice3">
				<label for="choice3">Belfast Ale</label>
			</li>
			<li>
				<input type="radio" name="my-beer" id="choice4" value="choice4">
				<label for="choice4">O'Hara Irish Stout</label>
			</li>
		</ul>	
	</div>
</fieldset>

Step 2 – The idea

To make things simple I tried to “sketch” my idea. I hope it is clear enough.

Step 3 – CSS

Let’s add some css that reflect the idea presented in the scheme above. For the brevity of this tutorial I omit some parts of the css (e.g. triangle arrows) that only add some visual flavor – you’ll find the complete version in the attached files.
Note that the vendor prefixes are omitted for the same reason.
For the outer containter (“.radio-container”) we’ll have

radio-container {
  position: relative;
  height: 4em; /* 3em (being the max-height of the inner container) + 1em ("margin") */
 }
.radio-container:hover {
    z-index: 9999; }

And for the inner one

.radio-options {
  position: absolute;
  max-height: 3em;
  width: 100%;
  overflow: hidden;
  transition: 0.7s;
}
.radio-options:hover {
  max-height: 100em; 
}

Next

  .radio-options .toggle {
    position: relative;
    cursor: pointer;
    padding: 0.75em;
    background: darkgreen;
    border-radius: 10px;
    z-index: 1; }
/* li are stacked at the same position as .toggle, only .toggle is visible */
  .radio-options li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
  }
  .radio-options label {
    display: block;
    opacity: 0;
    transition: 0s; }

We hide the inputs, we could just use display : none, but that would not work in browsers (some mobile ones) where clicking the label does not focus the associated input.

.radio-options input {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 3em;
  opacity: 0;
  z-index:1;
  cursor: pointer; 
}

Step 4 – What happens on hover – CSS continued

Now let’s look closer at what happens on hover, already : .radio-container gets a high z-index and .radio-options increases its max-height, we’ll add

/* li elements have a normal flow within the .radio-options container */
.radio-options:hover li {
    position: relative; }
.radio-options:hover label {
    opacity: 1;
    transition: 0.5s; }

Step 5 – input:checked

To style the checked option we will use the general sibling selector. It uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The first element (E) has to occur before the second (F) one and they have to share the same parent (li items in our case).
If one of the radio is checked, we’ll see its label instead of the toggle :

.radio-options input:checked ~ label {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   opacity: 1;
/* is above the .toggle so is visible */
   z-index: 2;
/* has tha same styles as .toggle */
   padding: 0.75em;
   background: darkgreen;
   border-radius: 10px; }

On hover it returns to the normal flow

.radio-options:hover input:checked ~ label {
  position: static;
  border-radius: 0; }

Step 6 – What about mobile devices

Since our element is activated on hover you’ll have to provide some fallback for touch devices. One solution is to leave the radio labels visible all the time not only on hover.
Here is my solution to keep the drop-down list, I detect the touch devices with a custom modernizr build and add the following script

$(document).ready(function(){
	if (Modernizr.touch) {
			$(".radio-options").bind("click", function(event) {
				if (!($(this).parent('.radio-container').hasClass("active")))	{
				$(this).parent('.radio-container').addClass("active"); 
				event.stopPropagation();
				}
			});	
	$(".toggle").bind("click", function(){ 
		$(this).parents('.radio-container').removeClass("active"); 
		return false;
		 });  
	}
})

In my css I modify every :hover definition like that

.no-touch .radio-container:hover, .active.radio-container  {
    z-index: 9999; }
.no-touch .radio-options:hover, .active .radio-options {
  max-height: 100em; 
}
.no-touch .radio-options:hover li,  .active .radio-options li {
    position: relative; }
.no-touch .radio-options:hover label, .active .radio-options label {
    opacity: 1;
    transition: 0.5s; }
....

Step 7 – What about IE8

Again, it’s up to you, the fallback solutions are not the main part of this tutorial. Here is my approach:

<!--[if (IE 8)]>
<script>
	$(document).ready(function(){
		$(".radio-options li").bind("click", function() {
			$(this).siblings(".checked").removeClass("checked");
			$(this).addClass("checked");
		});
	});
</script>
<![endif]-->

I have to add to my css the .checked class declarations, e.g. (see the attached files for the complete version):

.radio-options .checked label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.75em;
  background: #1b9e4d;
  visibility: visible;
  z-index: 2; }
....

That’s all. I hope you’ll find this technique useful, let me know what you think. Thanks.

Terms of use :

You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

Hi! Today, I had the idea to offer you a monthly calendar/wallpaper. I start with Mars, since I realize that January and February have no more interest. You can find the file in JPEG format in the following sizes:

• 1920 x 1200
• 1680 x 1050
• 1600 x 1200
• 1280 x 800
• 800 x 600

Hi folks! Today, I offer you a nice pack of social icons (again? yes…) in PNG format and in 7 different sizes. (512, 256, 128, 64, 48, 32 and 24 pixels). You will also find for each service, the PNG file for hover-style. Enjoy!

You will find the following services :

• 500px (2 versions)
• AIM (2 versions)
• Apple
• Baidu
• Basecamp (2 versions)
• Bebo
• Behance
• Blogger
• Delicious
• DeviantART
• Digg
• Dribbble (2 versions)
• Drupal
• Etsy
• Evernote
• Facebook
• Feedburner
• Flickr
• Forrst
• Foursquare (2 versions)
• Github
• Google +
• Grooveshark
• Hi5
• iCloud (2 versions)
• ICQ
• Identi.ca
• Instagram
• Kik
• Last FM
• Linkedin
• MSN
• MySpace
• Netvibes
• Ning
• Path
• PayPal
• PEPSized (hahahaha !)
• Picasa (new logo)
• Pinterest
• Pixelapse
• Qik
• Reddit
• Skype
• SoundCloud
• Spotify
• Steam
• StumbleUpon
• Technorati
• Tumblr
• Twitter
• Viadeo
• Vimeo
• Vine
• Weibo
• WordPress
• Xing
• Yahoo!
• Yahoo! Messenger
• Yelp
• Youtube (2 versions)
• Zerpli
• Zynga

And some useful tools :

• @ symbol
• Download
• Favorite
• Love/Heart
• Home
• Facebook Like
• Mail
• RSS
• Search
• Settings
• Share (3 versions)

Terms of use :

This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays.
We’ll use a custom set of social icons generated with IcoMoon App and we will add a fancy effect on hover.

Step 1 Quick Visit to IcoMoon App

For the purpose of this tutorial we select 6 social networks icons : dribbble, facebook, twitter, pinterest, tumblr, flickr, google plus and github. What follows is as easy as clicking “Font” and “Download”. Our custom font icons set is ready to use.

The IcoMoon download folder contains a style.css file that will use as a base. Here’s what we’ll start with:

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-dribbble:before, .icon-twitter:before, .... {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-dribbble:before {
	content: "e00a";
}
.icon-twitter:before {
	content: "e00b";
}
....

Step 2 HTML

Let’s look at the markup

<ul class="social">
  <li><a href="#" aria-hidden="true" class="icon-dribbble"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-twitter"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-facebook"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-pinterest"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-flickr"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-google-plus"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-tumblr"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-github"></a></li>
</ul>

The aria-hidden state indicates whether an element is visible or not, we use it to tell the screen reader that an element is not visible to assistive technology.

Step 3 Hover Effect – the idea

The idea is to create a kind of a movement effect on hover. We’ll have the “li” elements with overflow set to hidden, and the “a” elements being twice as high. With the a:after pseudo-elements we duplicate the icon. What happens on hover is : “li” changes its background color, the “a” element shifts up half its height (see the image below). Both changes with a subtle transition.

Step 4 Additional Font Icons styles

What we have to do is to duplicate the icon-*:before styles for icon-*:after :

.icon-dribbble:before, .icon-twitter:before, ..., .icon-github:before,
.icon-dribbble:after, .icon-twitter:after, ..., .icon-github:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-dribbble:before, .icon-dribbble:after {
  content: "e00a"; }

.icon-twitter:before, .icon-twitter:after {
  content: "e00b"; }
...

Step 5 CSS continued

Note that, for the simplicity, I don’t use the vendor prefixes for transition.

ul.social {
  text-align: center; }
  ul.social li {
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    line-height: 60px;
    background: #404040;
    /* --- optional, it looks nice also with simple squares --- */
    border-radius: 100%;
    transition-duration: 0.7s; }
    /* --- hover effect : background color change --- */ 
    ul.social li:hover {
      background: #33cc99;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); }
    ul.social li a {
      display: block;
      width: 100%;
      height: 200%;
      position: relative;
      top: 0;
      color: #33cc99;
      transition: top 0.7s; }
       /* --- hover effect : shift up --- */ 
      ul.social li:hover a {
        top: -60px; }
      ul.social li a:after {
        position: absolute;
        width: inherit;
        height: 50%;
        left: 0;
        bottom: 0;
        color: #404040;
        line-height: 60px;
        text-align: center; }

And that’s all. I hope you’ve found this tutorial useful, looking forward to your comments. Thanks.

Terms of use :

You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

Here is a free pack of 75 social icons in heart shape for Valentine’s day. They are available in PNG files, in 3 sizes: 64 x 64 px (32 x 32 px @2x), 48 x 48 px. I added several services that were not in my previous packs. You will find there:

• 500px (2 versions)
• AIM (2 versions)
• Apple
• Baidu
• Basecamp
• Bebo
• Behance
• Blogger
• Delicious
• DeviantART
• Digg
• Dribbble (2 versions)
• Drupal
• Etsy
• Evernote
• Facebook
• Flickr
• Forrst
• Foursquare (2 versions)
• Github
• Google +
• Grooveshark
• Hi5
• iCloud (2 versions)
• ICQ
• Identi.ca
• Kik
• Last FM
• Linkedin
• MSN (ahem…)
• MySpace
• Netvibes
• Ning
• Path
• PayPal (2 versions)
• Picasa
• Pinterest
• Pixelapse
• PlayStation
• Qik
• Reddit
• Skype
• SoundCloud
• Spotify
• Steam
• StumbleUpon
• Technorati
• Tumblr
• Twitter
• Viadeo
• Vimeo
• WordPress
• Xing
• Yahoo
• Yahoo Messenger
• Yelp
• Youtube (2 versions)
• Zerply
• Zynga

And some tools:

• Favorite (2 versions)
• Like on Facebook
• Love
• Mail (2 versions)
• RSS
• Share (2 versions)

Terms of use :

This icons pack is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.

This time I share with you a pack of six sweet and subtle seamless photoshop patterns. Full of hearts, they may be especially useful for Valentine’s Day. Enjoy!

Terms of use :

This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. We do not require that you give us credits. Still, all references to our site, a particular author or a particular article are always highly appreciated.

You are not allowed to just copy and sell the resource files. You are not allowed to re-share them without mentioning our authorship and a link to pepsized.com.
If you mention this post somewhere else, please don’t just copy the entire article. You are not allowed to link directly to our .zip files, always link to this article.