Holy Smokes, you should watch this right now. Mixing up Tron, Dubstep, illuminated dancing and some genius coreography…it's just awesome. Checkout the thought and planning that must have gone into the jump cuts and part in the middle where they look like they're floating. So very cool.
In Episode 36 we look at a sweet CSS3 animator, an even sweeter vintage hydroplane, what you missed at LessConf, dogs in Trees, folicular activity and our picks from DesignersMusic.
While working on the new 47m site we decided that we wanted our portfolio images to look like they were in a browser. Easy enough, right? But I didn't want to save out every image with some fake browser thing at the top. That would be a huge pain if we ever wanted to change the style in the future. CSS to the rescue!
Let's start with your markup:
<div class="faux-browser"> <img src="/images/image.jpg" /> </div>
I've opted for a pretty simple browser design, but you could totally get crazy with url fields, back/forward buttons. That would probably require an image, though and I was trying to avoid that. To get the browser are at the top we need the containing div to use the :before CSS selector.
Then add some CSS:
Keep Reading
Do webkit transforms make your head spin? Wish that cool thing you just did in CSS3 actually worked in more than 2 browsers? Hype to the rescue! It slaps a GUI on what you want to do and spits out CSS and Javascript code for those browsers that aren't in the cool club yet. Did we mention it supports mobile browsers, too?
Hype looks very promising!
Learn how to get out of junkmail, pick up a cool new kids book for free, and check out the new 47m site! We'll talk about being on ShopTalk Show, spam comments and our picks from DesignersMusic.
Just watch it. It's amazing. Via everyone.
Note - I was going to have this all be one article, but it was too big and I don't want to bore you. So! Part Uno will focus on the design and stragegy while Part Dos will focus on the dirty technical details - from HTML5 & CSS3 to Responsive layouts and ExpressionEngine programming. Part Uno begins now:
Have you ever climbed to the top of a mountain, cooked a whole pound of bacon, ate it, hiked back down and built a mansion with your bare hands? That's what it felt like redesigning the FortySeven Media site.
Version 1 of fortysevenmedia.com was super gray and boring (seriously, it was gray). We were afraid to be ourselves and thought that in order to make it as a design studio we needed to be stuffy, businessy and impersonal.
Next year we sat down and decided that if we were going to have our own company we should darn well act like it. With version 2 we overhauled the identity, made snarky pages like “Don't Hire Us,” created a blog and before we knew it, we were getting business from all over the place.
We had stumbled onto something, and quite frankly re-designing that kind of success is scary, especially when it provides for your family. The Lizard Brain was in full effect. We got talked about quite a bit when we launched the old site and we didn't want miss that magic this time around. Every time I sat down to work on it I just got overwhelmed. Could we make something nearly as iconic as the first go around? Turns out it didn't matter, because after waiting 4 years we were becoming obsolete. Don't get me wrong, the business was doing better than ever, but the jobs coming through the contact form were less interesting than they were a few years ago.
Keep Reading
We're very excited to announce today that we're becoming part of the Fusion Ads Network! So many of our heroes are part of this network that it would be foolish to start trying to name one or two. Seriously, just go check out the list. To say we're humbled and honored is an understatement.
We love the ethos behind Fusion - that only ad per page is allowed and that they encourage you to make it fit the style of your site. Plus the products and services they're showing are razor focused towards you guys. Ads that are actually useful! Imagine that.
So, hey! If you see something over there that catches your eye it's ok to click. It helps us keep writing more posts, tutorials and deep (sometimes) thoughts. Thanks for reading!
I didn't think Ok Go's videos could get any crazier, but good grief. Watch this thing. How long did this take to setup? They basically drive by hundreds of chimes, guitars, pianos and makeshift drums banging on them to make music. It's rad.
You silly, nutty ok going guys. Just keep on blowing our minds with your video awesomeness.
Sometimes you just have to draw a dog wearing a bowtie. It was a good excuse to set up mydrawing tablet a bit better as I'm still new to this whole pen table thing.
Pears is a great idea from the Simplebits and Dribbble mastermind Dan Cedarholm - Create common UI patterns with the HTML and corresponding CSS for basic styling for a quick reference too. I think we all do this to an extent with snippets in our code editors, but this goes a bit further “pearing” them together (see what I did there?).
Even more interesting, it's also an open source Wordpress theme so you can use the framework to make your own pears.
In an effort to have a little more fun with the blog, we will be adding our silly sketches for your enjoyment. Let's get this silliness kicked off!
When you build a new website, it's best to have a look at your old content and see what you could do better. One of those areas for us was pictures. We built the old site longe before I had a clue about photography so we thought we'd take some shiny new photos that really reflected our personalities. Here's what we have to show for it. Our families will surely be proud.
Keep Reading
Those ConvergeSE guys have great timing! Right on the heels of our brand new site they've launched the conference site. Besides the awesome scrolling design and robotic battle dinosaurs (scroll down and see what happens to him!) the conference itself looks amazing.
Nate and I will be doing a workshop based on the Kicktastic project we're working on, so if you want to find out our secrets in person, register on February 16th. We'll try not to ruin the otherwise great list of speakers.
ConvergeSE is April 27-28 2012 in Columbia, SC.
The ShopTalk show is a live podcast by CSS Tricks/Wufoo master Chris Coyier and Paravel pointman Dave Rupert. Chances are we'll talk about the Kick Awesome Show and maybe even this new website! Send in your questions now or join us live to pick our brains.
February 2nd, 1pm. Mark your calendars.
Troy returns to the Kick Awesome Show as we high five Transcribe, The UI Toolkit, and get all dramatic reading spam comments! Music picks are there too. Enjoy friends from the interwebs!
This week we look at Popclip, a motion tracking device called Swivl, what we learned at LessConf, a spam comment and our picks from DesignersMusic.
After I got my UP wristband several people asked me to let them know how it was working out. Now that I've had it for a month and a half I think I have a pretty good idea of how well it works. In my last post I said I was only interested in the activity and sleep cycle parts of the band and after using it that's still true. In all honesty, the food tracker isn't very helpful anyway.
As 2011 draws to a close we continue the tradition of short, lame Christmas shows.Scary sing-a-longs, Italian Christmas Mobsters and or course - Christmas Tic Tac Toe. Merry Christmas Kick Awesome Friends!
Welcome to Episode 32! Join us as we look at Stripe, Safe Harbor, some crazy Dubstep dancing, Guy on a Buffalo, Taking care of your finances, a spam comment and our picks from DesignersMusic. Whew!
A project by 47m
Learn how we made 50% more last year.
