Combining Modern CSS3 and HTML5 Techniques
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
Join Net Premium
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 Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Thank U Jeffrey!
NetTuts is the best!
Greetings from Colombia
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?
You can only see the “Preview” video, not the tutorial.
You have to become a Premium member first. :) http://tutsplus.com/join/
You are rock Jeffery :)
Keep up the great work and post more of these videos. :-)
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!
I’d also like to see a second part on that tutorial, so +1 on that. :)
Haha. Dropped the ball a bit on that one. :)
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.
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! :)
you really know how to touch our feelings to sign up lol.
nice one! tnx
thats true. this tut was intentionally created to touch our feelings
Gross.
It’s always important to touch your feelings.
Wow, this is really cool and I love HTML5!
Great tutorial!
The draggable snipplet (without jQueryUI) would be nice to have.
Okay – I’ll try to upload one to Gist later today.
Thanx! That would be very nice!
What’s the difference between $(‘li’, imgContainer) and $(‘images li’)? Or rather, why is the first one preferable?
Great tutorial, btw!
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.
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.
Ah, that made it somewhat clearer, thanks!
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.
Great. Thanks!!
Best practices when coding
Nice..!
I’m so glad i subscribed to the Premium content!
Nettuts is really the BEST.
Cheers
Jeffrey Way, give me your contact adress please?
I want talk with you please?
You can email nettuts@tutsplus.com. :)
Please add an option to download the screencast.
There is. Visit the Net Plus tab, and there will be a “Download Screencast” right next to the article.
Thanks a lot….
Quite strange it doesn’t show the download link, when you view latest plus tutorials [All aites].
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.
Thanks, Matt! And yes, I tend to agree with you. :)
Awesome stuff Jeff! And also, don’t forget about the Titanium tutorial! I’ve been waiting for that one with baited breath. :)
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. :)
Wow, this is really cool and I love HTML5!
I can not wait until HTML5 and CSS3 kick Flash into the third dimension.
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
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.
: )
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.
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. :)
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 :(
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. :)
Fantastic …
nettuts is really good .. i am looking for advanced lavel CSS3 ..:)
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.
Thank you! It’s great!
Hi,
The only fuzzy section was the beginning, using JSON to acquire the feed. Any tips on that?
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 :)
This has been very helpful! Thanks for sharing.
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.
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