Kami Studio Blog

A well-organized overview on design that’s put together...

Tue, 03 Apr 2012 14:26:00 -0400

A well-organized overview on design that’s put together quite nicely - by @wellsriley

A better-behaved CSS box model

Tue, 07 Feb 2012 14:43:00 -0500

@paul_irish writes about a quick way to make the box model behave more logically. That means once you define the width of an element to be 100px wide, it will always be 100 pixels wide - whether you add a 20px padding or not. This also takes away headaches of setting up columns with padding, since a 50% wide element will still be 50% of the parent container’s width regardless of padding. Bonus points for strong support on all modern browsers.



/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Read the full article

Tips// Border-Radius Image Styles Web Designer Wall posted up a...

Tue, 07 Feb 2012 13:48:00 -0500

Tips// Border-Radius Image Styles

Web Designer Wall posted up a great guide on styling images that have border-radius applied. A lot of room for creativity as shown in the embossed and soft-embossed styles.

Demo | Article

Kami’s main site is taking a bit longer than originally...

Thu, 26 Jan 2012 17:03:51 -0500

Kami’s main site is taking a bit longer than originally anticipated - in the meantime, please drop by and show some love for our temporary portfolio!

Micro Portfolio

Inspiration// One Hour per Second Lovely illustrations and...

Tue, 24 Jan 2012 12:58:15 -0500

Inspiration// One Hour per Second

Lovely illustrations and execution for YouTube’s One Hour per Second.
(via @honeydesign)

Tools// JPEGmini Crunch your JPGs by up to 5x! Just like magic.

Tue, 24 Jan 2012 12:41:53 -0500

Tools// JPEGmini

Crunch your JPGs by up to 5x! Just like magic.

SOPA/PIPA - help stop this nonsense. Take action...

Wed, 18 Jan 2012 11:37:08 -0500

SOPA/PIPA - help stop this nonsense.

Take action here: http://americancensorship.org/

Beautiful compositions for IKEA - by Carl Kleiner. Via...

Tue, 17 Jan 2012 16:25:25 -0500

Beautiful compositions for IKEA - by Carl Kleiner.

Via www.ignant.de

Indie Game: The Movie Can’t wait to check this out. Read...

Tue, 17 Jan 2012 16:21:00 -0500

Indie Game: The Movie

Can’t wait to check this out. Read more about it on Wired here.

Tools// Extensis Web Font Plugin We’ve found ourselves...

Tue, 17 Jan 2012 13:53:00 -0500

Tools// Extensis Web Font Plugin

We’ve found ourselves relying more and more on Google Web Fonts, especially as the collection has grown exponentially over time. This free Photoshop plugin seems to make the process of using them in layout much easier. We’ll post an update as soon as we’ve had a chance to play around with it in depth.

Treehouse just launched Code Racer which is a fresh take on...

Thu, 12 Jan 2012 19:03:40 -0500

Treehouse just launched Code Racer which is a fresh take on learning basic web programming while having fun. 2012 is shaping up to be the year where coding goes mainstream!

Crafting a few emoticons to fill in downtime.

Fri, 06 Jan 2012 14:17:06 -0500

Crafting a few emoticons to fill in downtime.

Tools// Guide Guide Nifty tool that helps make grids &...

Tue, 03 Jan 2012 13:25:00 -0500

Tools// Guide Guide

Nifty tool that helps make grids & guides behave nicely.

Dealing with grids in Photoshop is a pain
With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements. Best of all it’s free.

Inspiration// Socket Studios Clean and simple portfolio site...

Tue, 03 Jan 2012 13:14:48 -0500

Inspiration// Socket Studios

Clean and simple portfolio site that’s all about showcasing their work. There doesn’t seem to be a way to get in touch with them though :)

Why not learn to code this year? Learning is more accessible...

Tue, 03 Jan 2012 12:49:00 -0500

www.codeacademy.com

www.jqueryair.com

Why not learn to code this year? Learning is more accessible than ever thanks to creative and interactive approaches that ease you in. A few favorites we’ve come across are JqueryAir and CodeAcademy

Inspiration// PresentPlus PresentPlus is functional design at...

Thu, 22 Dec 2011 17:53:00 -0500

Inspiration// PresentPlus

PresentPlus is functional design at its best. Subtle use of JS to enhance the experience goes a long way, and the minimalist approach brings focus to their beautiful photography and design work.

Inspiration // Rally Interactive Rally’s beta site is...

Thu, 22 Dec 2011 17:52:00 -0500

Inspiration // Rally Interactive

Rally’s beta site is looking sweet, with slick canvas/css3/JS animations and great use of geometric shapes that complement their clean and uncluttered layout.

Custom width for Tumblr photosets

Fri, 16 Dec 2011 11:51:00 -0500

While building our blog, we ran into some issues with getting the native Tumblr photosets to play nicely with our layout. We needed the iframe to expand beyond the default 500px to look proper (we’re using 830px for our image-based posts) and realized there was little to no documentation on how to do so.

After a lot of head scratching and researching, we were able to get it to work - there’s 2 parts to the equation where the first uses jQuery to swap out part of the iframe src url which Tumblr uses to dictate the width of the photoset content, and the second where you use jQuery to resize the height of the iframe upon load.

The following code swaps out the default 500px in the iframe src url string to 830px. If your post width is 750px, you’ll just need to swap out the ‘830’ with ‘750’.


$(".photoset").each(function() { 
	var newSrc = $(this).attr("src").replace('500','830');
	$(this).attr("src", newSrc);		
});

If you refresh your site, you’ll notice that the iframe that hosts the photoset is now the proper width. Only problem is that if you have a lot of images in the set, the bottom part will most likely have been cut off. To remedy this, you’ll need to past in this following code to resize upon the page loading. Resize script via the always awesome CSSTricks.


$(function(){
var iFrames = $('.photoset');

function iResize() {
	for (var i = 0, j = iFrames.length; i < j; i++) {
		iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
	}
	
	if ($.browser.safari || $.browser.opera) { 
		iFrames.load(function(){
			setTimeout(iResize, 0);	
		});
		
		for (var i = 0, j = iFrames.length; i < j; i++) {
			var iSource = iFrames[i].src;
			iFrames[i].src = '';
			iFrames[i].src = iSource;
		}
	} else {
		iFrames.load(function() {
			this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
		});
	}
});

That’s all! Happy Tumbling :)

HTML5 Advent Calendar Various css3/html5 tricks that may come in...

Thu, 15 Dec 2011 16:45:00 -0500

HTML5 Advent Calendar

Various css3/html5 tricks that may come in handy.

Some favorites from @boxheadstudio - www.boxheadstudio.com

Mon, 12 Dec 2011 16:44:00 -0500

Some favorites from @boxheadstudio - www.boxheadstudio.com