Amazing Resource: We Love Icon Fonts

I’ve been working on a few projects lately that require icons and social icons and I’ve always used images because I thought that downloading icon fonts, converting them to svg (for firefox and ie), uploading them and then inserting them into the code was way too much work for like 5 icons. 

Well I’ve just stumbled upon this amazing little gem that is similar to Google Webfonts BUT USING ICON FONTS! Basically, you pick the packs you want and then simply insert the generated, hosted code files into your css. Done! How simple was that! 

VISIT THE SITE

Detailed instructions on how use the fonts are on the site (and it’s really simple to use also!).

theme-hunter:

RESOURCE ROUND-UP #5

Halftone Creator Photoshop Plugin

Clipping Magic (Online alternative to Photoshop that removes the background from images)

CSS3 Text-Shadow Effects (A project on CodePen, neat way to learn new tricks)

Magnific Popup (jQuery pop-up plugin)

CSS Tube Map by John Galantini

Free PSD: Flat File Icons

CSSmatic (Generator for gradients, border-radius, box shadow and noise texture)

Wooden Backgrounds & Textures (shared by ninpen)

owuru:

i’ve been making colour palettes from posts i’ve seen on my dash, and it was a fun exercise until i realized i might’ve made too many

so here are my favourites!

ninpen:

Here is my collection of wooden backgrounds and textures. 

Download

theme-hunter:

RESOURCE ROUND-UP #3

jQuery (Tumblr) Photoset Grid (linked to here as well)

Koken (not tumblr related but for anyone planning on hosting a site or alike)

Lorem Pixel (I’m sure everyone is familiar with Lorem Ipsum, this is the image placeholder)

Coffitivity (my personal favourite - recreates a coffee shop vibe to help creativity)

CSS Beautifier

Imageloader.js

CSS Only Alternative to the Select Element

Custom Google Background (not theme related but I’m sure we have a lot of Google/Chrome users)

Wow this resource round-up is great. I’m definitely loving JS photoset grid and Koken!

Responsive Tumblr photosets with jQuery Photoset Grid

buildthemes:

jQuery Photoset Grid makes Tumblr photosets resizeable (no more chopped off photosets), breaking the constraints of Tumblr’s own photoset script which can only be set to widths of 250px, 400px, 500px or 700px .

This plugin was originally used internally in Style Hatch’s premium Tumblr themes, but has now being released for free use by the folks at Style Hatch.

Using Photoset Grid: the Basics

HTML

The HTML is based on the photoset block, remember to include photosets within the posts block:

{block:Photoset}
  <div class="photoset" data-layout="{PhotosetLayout}" data-id="photoset{PostID}">
    {block:Photos}
      <img src="{PhotoURL-500}" />
	{/block:Photos}

  {block:Caption}
	{Caption}
  {/block:Caption}
{/block:Photoset}

Be sure to reference the jQuery library and Photoset Grid plugin in your HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>

jQuery

At the most basic level, the jQuery plugin simply has to be called like so:

<script>
$('.photoset').photosetGrid();
</script>

By default, the plugin generates a responsive grid without space (gutter) between images.

Be sure to check out the theme documentation to further customize your photoset with options, a lightbox plugin, plus HTML for a Tumblr photoset that links each image.

Download the plugin at Github

Read complete documentation

OMG THANK YOU SO MUCH. THIS IS AMAZING c:

ATTENTION ALL THEME MAKERS!

Finally, a fix for Tumblr’s photosets! I know how annoying photosets on Tumblr are since you can only make them 250px, 400px, 500px, or 700px. So the other day I started learning the slightest bit of javascript/jquery (I’m so noob at it lol) and after that and lots of Googling, I think I’ve managed to create a code that lets you resize the photosets on Tumblr to almost any size!

Continue to tutorial

Filters of Images.

html-and-etc:

See the live preview here. 

Blur:

.blur{-webkit-transition-duration: .60s;}
.blur:hover{-webkit-filter: blur(2px);-moz-filter: blur(2px);-ms-filter: blur(2px);-o-filter: blur(2px);filter: blur(2px);}

Saturate:

.saturate{-webkit-transition-duration: .20s;}
.saturate:hover{-webkit-filter: saturate(40%);-moz-filter: saturate(40%);
-ms-filter: saturate(40%);-o-filter: saturate(40%);filter: saturate(40%);}

Sepia:

.sepia{-webkit-transition-duration: .60s;}
.sepia:hover{-webkit-filter: sepia(100%);-moz-filter: sepia(100%);-ms-filter: sepia(100%);-o-filter: sepia(100%);filter: sepia(100%);}

Gray:

.gray:hover{
-webkit-transition: opacity 0.8s linear;
opacity: 0.60;
-webkit-filter:grayscale(100%);
}
.gray{
-webkit-transition: opacity 0.8s linear;
opacity: 1;
-webkit-filter:none;
}

Brightness:

.brightness{-webkit-transition-duration: .20s;}
.brightness:hover{-webkit-filter: brightness(0.2);-moz-filter: brightness(0.2);-ms-filter: brightness(0.2);-o-filter: brightness(0.2);filter: brightness(0.2);}

Contrast:

.contrast{-webkit-transition-duration: .20s;}
.contrast:hover{-webkit-filter: contrast(150%);-moz-filter: contrast(150%);
-ms-filter: contrast(150%);-o-filter: contrast(150%);filter: contrast(150%);}

If you want to use it use this code . 

FLOWER TEXTURES / STOCKS

Download (6.76 MB)

contains 3 x high res images that I’ve taken from around my house

In this tutorial, we’ll be learning how to create a multi-coloured top bar (well, that’s what I call it anyway) that have become very popular lately in web-design. This is what we’ll be creating:

Prerequisites: It’s recommended you have some knowledge of HTML/CSS, but it’s not necessary.

Continue to tutorial  →