Combining Modern CSS3 and HTML5 Techniques
plus

Combining Modern CSS3 and HTML5 Techniques

on Apr 14th 2010 with 51 comments
Tutorial Details
  • Technologies: HTML5, CSS3, jQuery
  • Difficulty: Intermediate - Advanced
  • Format: 49 Minute Screencast

Just because some techniques don’t work in decade old browsers doesn’t mean that you shouldn’t be learning everything you can! Stay on the cutting edge, as we use everything from CSS shadows and animations, to HTML 5 mark-up and local storage, to utilizing jQuery to work with the Picasa API. We’ll also take advantage of the excellent jQuery library, and review some best practices when coding.

Give back to Nettuts and sign up for a Premium membership!

Preview

You’ll Learn About:

  • HTML5 Mark-up that you can use in all your projects today
  • CSS transitions and shadows
  • Making IE understand HTML5 mark-up
  • Working with the Picasa API, combined with jQuery’s $.getJSON
  • Best practices when coding
  • How to take advantage of features in the yet to be released Firefox 3.7
  • Drag and Drop with jQuery UI
  • And plenty more in this in depth video tutorial
Screenshot
Screenshot

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Give back to Nettuts and sign up for a Premium membership!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://alejonanez.tumblr.com Alejandro Ñañez

    Thank U Jeffrey!
    NetTuts is the best!
    Greetings from Colombia

  • Codedude

    Ok…this is weird. It says it is a Premium tutorial but how can I can access the video even though I’m not a premium member?

    • http://newarts.at Drazen Mokic

      You can only see the “Preview” video, not the tutorial.

  • Ahmed

    You are rock Jeffery :)

    Keep up the great work and post more of these videos. :-)

  • Jason Andreoni

    Awesome, I can’t wait to work through this this weekend!

    On a side note, any idea if we’ll ever see a Part 2 to the Login for a Simple Site tut?

    http://net.tutsplus.com/articles/news/how-to-build-a-login-system-for-a-simple-website/

    Thanks!

    • http://nike1.se/ Nike

      I’d also like to see a second part on that tutorial, so +1 on that. :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Haha. Dropped the ball a bit on that one. :)

  • Purple

    Jeff, how the heck do you accomplish so much? I am constantly amazed at the amount of knowledge that you pick up and pass on along with doing your daily duties. My hat is off to you.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      The sad thing is – not being conceited at all – I have managed to learn quite a bit. And I still pale in comparison to some of you guys. So irritating! :)

  • http://www.zainals.com/blog Moe

    you really know how to touch our feelings to sign up lol.

    nice one! tnx

    • http://twitter.com/maxberndt Max

      thats true. this tut was intentionally created to touch our feelings

      • w1sh

        Gross.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        It’s always important to touch your feelings.

  • http://theblogtemplates.com TheBlogTemplates

    Wow, this is really cool and I love HTML5!

  • http://twitter.com/webjohan webjohan

    Great tutorial!

    The draggable snipplet (without jQueryUI) would be nice to have.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Okay – I’ll try to upload one to Gist later today.

      • http://twitter.com/webjohan webjohan

        Thanx! That would be very nice!

  • http://www.virtualerik.com Erik

    What’s the difference between $(‘li’, imgContainer) and $(‘images li’)? Or rather, why is the first one preferable?

    Great tutorial, btw!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      The first one sets a context. We’ve already found $(‘#images’), and have stored it in the variable imgContainer. So then, we say, get all list items that are children of imgContainer.

      The second example searches the dom for it from scratch. But we don’t need to do this.

      • http://net.tutsplus.com Jeffrey Way

        Actually, I should note that imgContainer is references the element, but it’s not wrapped in the jQuery object. When setting a context, it should technically be a dom element.

      • http://www.virtualerik.com Erik

        Ah, that made it somewhat clearer, thanks!

  • http://www.home-theatre-systems.net HD Guy

    Looks like another great tutorial. I’ve been following your tutorials for a long time Jeff. so I think it will be worth becoming a premium member.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Great. Thanks!!

  • http://sonergonul.com/ Soner Gönül

    Best practices when coding

    Nice..!

  • http://madebyross.com Ross

    I’m so glad i subscribed to the Premium content!
    Nettuts is really the BEST.

    Cheers

  • Akmyrza

    Jeffrey Way, give me your contact adress please?
    I want talk with you please?

  • Akshay

    Please add an option to download the screencast.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There is. Visit the Net Plus tab, and there will be a “Download Screencast” right next to the article.

      • Akshay

        Thanks a lot….

        Quite strange it doesn’t show the download link, when you view latest plus tutorials [All aites].

  • Matt

    Nettuts is truly an awesome resource. These are certainly exciting times. HTML5 / CSS3 has so much potential. I’ve got books on pre-order and can’t wait until they become available. So, it’ll be quite a while I think before I tired of this subject matter. More like this, please.

    Jeffrey, you do video so very well. I’m glad to see yet another from you. Since you quit the CodeIgniter series, I must say I find myself preferring a written version to go along with it (or instead of it). Anyway, keep up the good work!

    “The instant” I realize I don’t have to signup for a separate PayPal account to subscribe / cancel, you’ll have my money for the “Premium Content” for a whole year in advance! As fluent in web development technologies as you all are, allowing your visitors to use their existing Envato accounts seems like a simple change. I imagine it’d be especially those who have already deposited or regularly deposit funds.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Matt! And yes, I tend to agree with you. :)

  • http://www.labusdesign.com Bill Labus

    Awesome stuff Jeff! And also, don’t forget about the Titanium tutorial! I’ve been waiting for that one with baited breath. :)

    • http://net.tutsplus.com Jeffrey Way

      Yep – put it on a hold last week during the Apple scare. But, now that all seems well, we’re moving forward. We’ll also be teaching about how to make it an iPad app as well. :)

  • http://www.tenaxtechnologies.com software outsourcing

    Wow, this is really cool and I love HTML5!

  • http://spotdex.com Davidmoreen

    I can not wait until HTML5 and CSS3 kick Flash into the third dimension.

    • http://- cristian

      Hahaha, keep playing with this little toys HTML+Javascript+CSS3 and continue giving us the Pro’s, the Flash Platform. Call me when you’ll be able to do things like I do with papervision, Away3D and Five3D!

      Cheers! lol

  • Jay

    Hi Jeffrey!

    Another great tutorial, I love all of these CSS 3 techniques, but as usual IE has to be difficult. (IE 9 looks likes its finally caring about standards : ) )

    Anyway I was looking at the jQuery UI site and found an option to set the Z-index higher on the currently dragged item.

    If you go to http://jqueryui.com/demos/draggable/ then go to the “Options” section and right at the very bottom there are two options, “Stack” and “zIndex” they look like what you were looking for.

    Thanks again Jeffrey you’re screencasts and articles are great and the internet would be boring without you.

    : )

    • Jay

      Hi again,

      I tried you’re demo file and it didn’t seem to lag when I viewed it in Safari, but I was thinking its maybe because when you drag the element you are changing the top and left position and the webkit-transition is animating every time the elements top and left values change.

      I think you fixed it anyway because it works fine for me.

      • http://net.tutsplus.com Jeffrey Way

        Hey Jay –

        I included a readme file with the download explaining it. The problem was applying the transition styling to the element. When I moved that info to the hover state, the lag fixed itself. :)

  • Ben

    Oh guys, I’m very frustrated now. I just wanted to join Premium Membership and pay via paypal, and now tuts+ want me to name a credit card at paypal?! I dont have a credit card – that’s the reason I once registered at paypal :(

  • Cody Robertson

    It would have been cool if you took it a step further and used either LocalStorage or a LocalDatabase to save the place you dragged each picture too.

    I’m not a premium member anymore, It was a bit too basic, but I might buy it again just to help out the site. :)

  • Santanu

    Fantastic …

    nettuts is really good .. i am looking for advanced lavel CSS3 ..:)

  • Gregory

    Looks interesting unfortunately I can’t afford $9 a month to use 1/8 of what I’m paying for. I say you need a cheaper plan for people who wont use it’s all very well if your into image manipulation as there’s about 3-4 tuts sites concerning images but if you only want the net tutorials then it doesn’t quite work out worth it.

  • http://psd-labs.com Roland

    Thank you! It’s great!

  • Wasabi

    Hi,

    The only fuzzy section was the beginning, using JSON to acquire the feed. Any tips on that?

  • Djkanna

    Okay I became a premium member (not going to lie – just for this) and I’ve gotta say it was more than worth it,
    nice work Jeffrey :)

  • http://www.brettwidmann.com Brett Widmann

    This has been very helpful! Thanks for sharing.

  • http://dev.gdesign.com/photos David Green

    Hi I tried the tutorial and it is great. The only issue I ran into was that the zindex didn’t seem to work properly.. Wondering what I could have overlooked.

  • Karthik

    Hi jeff, I have the premium tutorial of this with demo source.The problem i am encountering are:
    1.Throw Photos are not working.Photos are aligned one behind other.
    2.In Chrome when i single click and drag photo a dimmed version of image is appearing.

    Please give siolutions to above problems.

    Thank you