8 Great Icon Font Generators to Give Your Site a Custom Feel High-quality images can make the difference between a good website and a great website. However, they also add file weight, aren't easily scaled, edited or manipulated, and result in additional HTTP requests. When it comes to responsive design, the best solution is often not to use an image at all, and instead use icon fonts when appropriate. They're easily customized, allow for transparency and have good browser support. And because they contain fewer characters than a complete typeface, they also take up less memory. Creating icon fonts doesn't have to be time-consuming, because there are several generators that let you build your own custom font — using only the icons you really need — to help reduce file size. Using an icon font can improve load times by up to 14%, and because they're vector in nature, they're infinitely scalable, while still being smaller in size than an image sprite. Show As Gallery Have something to add to this story? Image: Credit
Photoshoplr csscss by zmoazeni What is it? csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations. What is it for? One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps. To do that, you need to have all the rulesets in your head at all times. How do I use it? First you need to install it. $ gem install csscss Note: csscss only works on ruby 1.9.x and up. Then you can run it in at the command line against CSS files. Run it in a verbose mode to see all the duplicated styles. $ csscss -v path/to/styles.css Run it against remote files by passing a valid URL. $ csscss -v You can also choose a minimum number of matches, which will ignore any rulesets that have fewer matches. $ csscss -n 10 -v path/to/style.css # ignores rulesets with < 10 matches If you prefer writing in Sass, you can also parse your sass/scss files. $ gem install sass $ csscss path/to/style.scss
CSS Image Effects #5: Lomography This is part of a series of posts breaking down visual effects using CSS filters and blend modes. Read Part 1: The Vintage Washout Effect, Part 2: 3d Glasses, Part 3: Vignettes, and Part 4: Bokeh Textures for some background on blend modes and filters. In this post we'll explore a relatively new photography technique founded in Austria in the early 90's, called Lomography. A Google search for Lomography yields beautifully vibrant results. A Little Background on Lomography Lomography (AKA Lomo) was based on and inspired by a cheap Russian toy camera, the Lomo LC-A. So, Lomography is very saturated, sometimes blurred, and contains unexpected light leaks. Playing with Filters A common trait in Lomography is vibrant, saturated colors. Following Lomography principles of not over-thinking image composition and capturing real life, I may or may not have taken this sample photo in the bathroom of the coffee shop from which I am writing this post. Original Image Blur within the lines Image Source
CSS Sprite Generator, Editor, and Code 960 Grid System SpritePad - Create and edit css sprites 6500 Pixel Perfect Flat Icons Set Bundle