Mustardseed Media Inc.

or

CSS Sprites

In honor of the iPhone 3G release, today's episode starts with a look at Apple's main navigation menu and the method they use to build it...CSS Sprites! This episode was spawned by comments from a previous episode so keep that feedback coming...let me know what you'd like to learn about and I'll do my best to fake it!

Just discovered this podcast

Just discovered this podcast yesterday, I'm really liking it!! :)
Already learned something new!

Thanks

:-) That was helpful, thanks!

thanks - great podcast

Hi Bob - this is an excellent series; thank you.

I was wondering - what is your production workflow for these screencasts? I have listened to your G&G screencasting episode, and grabbed IShowU. The video quality that I am seeing straight off your site however is way better than what I am able to achieve at the moment, off my little ibook G4... and what player are you using on your site?

I'd love to have an insight into the various settings that you are using. I'm guessing that you are capturing at 720p, (and not full screen - just partial screen). what is your "final" format that you are putting up on the site - are you using Asset module, or something else?

(Sorry about all the questions!)

Cheers
Pete

Screenflow!

Hey Pete...
In the latest episode of G&G, I mentioned that shortly after our screencasting podcast, I switched to screenflow instead of iShowU (which was great...but screenflow is better!) Screenflow is a total screencasting solution...I no longer use final cut pro for anything...it's produced 100% within screenflow.

Screenflow only captures full screen...but then during editing it allows you to crop a section and only use that part...that's actually an improvement I made starting in this episode. To display on the site, it is indeed the Asset module. Hope that info helps!

iPod Feed Fixed

Everyone here must be on the HD feed :) The iPod feed was broken over the weekend..my apologies. It's now fixed and the video is functional there.

thanks - here's a videocast idea

thanks Bob - I thought it might have been Screenflow... Looks like I need a new machine :) cos it only runs on Leopard. (like I need an excuse to buy a new machine??....)

Future Screencast idea: theming the "contact us" page in Drupal (5 or 6). That'd be great to see. I gather it's not as simple as building a node-contact.tpl.php file (or is it?)

Cheers
Pete

Apple

Great cast
just wondering how apple went about doing the whole bar and all the states (ie: multiple buttons) as one image?
Paul
sejtraav

Apple's Menu

Hey Paul...
Are you asking how they did more than the one state that I showed here (ie. hover)? It's really just the same method to do multiple states, as they have done. You'd make your image include many more states (as you can see in their image) and then just add additional CSS rules for the additional states such as visited, active, click, etc...

Some of those states will require additional HTML/CSS classes (and maybe even some javascript) since anchor tags don't include all these states (for example, active). So, you'd have to get the CSS classes inserted in there dynamically as needed.

As for doing the multiple buttons as one image: In my example you'll notice that I was just shifting the image up and down....to use one image for multiple buttons, you also need to set your background location using the left/right parameters so it shows the part of the image that coincides with your button.

Hope that helps

Thanks

Thanks Bob.
I was asking about that second thing you talked about - multiple buttons as one image. Thanks for explaining - i get it now - pretty simple!

Paul

Also..

Also, what program are you using here to do the css editing?

Coda

Hey Paul....
I'm using the Coda software. I switched to it a few weeks ago (as you see the change on the podcast) and it's been an awesome change. I highly recommend it!

Thanks

Bob, I just wanted to say thanks. I'm new to Drupal and webdesign, and you are nailing the key pieces I need to get started.

Grateful.

Funny

Hey Brian...
No prob, glad these are helping. The really halarious part is your name (no offense)...one of my main Drupal developers is named Brian Miller and he's a total Drupal ninja...so it's funny to see someone with the same name saying you're new to Drupal :)

Good luck...let me know if there's any particular topic I can cover to help you out further!

Thanks for doing this

Thanks for doing this episode. I didnt even know there was such a thing as CSS Sprites.

Really Cool

Im just learning how to do design Widgets for Dashboard i found this tut very interesting, thanks so much!!!

sweet!

great stuff! I like the CSS stuff you do, very refreshing. I 'd like to see more CSS. I was an old school cat that was doing everything in tables! and now I'm on CSS buzz
love the show !

Nate.

I have found interesting

I have found interesting sources and would like to give the benefit of my experience to you.
I am tuning my pc by the best software for free, with the file search engine DornFall
May be you have your own experience and could give some useful sites too. Because this social site help me much.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This ensures you're an actual human being...not one of those sassy web robots.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.