< >

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’s Wooden Backgrounds

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!

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:

image

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

Continue to tutorial  →

Free Romantic Fonts

via 25 romantic fonts | a subtle revelry

(source: blog.clippington.com)

X 2 3 4 »