Alright, you guys have convinced me to deviate from my original plan and come back to a part 2, 3, and maybe 4 of building a site in 10 minutes. If you haven’t watched part 1 yet, you might be a little lost, so make sure you go back and watch that.
Today we’re going to look at part 2, which ended up going a little bit over my 10 minute mark to 12 minutes (so I cut off the ending :P), but we’re talking gradients, the little refinements, and some cool CSS3 techniques to do it. To get help with CSS Gradients, we can use this tool that’s free and works great for both Webkit and Firefox browsers. If you’re using Chrome like me and want to download the Pendule tool I use to bring up a color pick, make sure to get the extension here.
Part 1 in the Building a Site in 10 minutes series, can be watched here. See you tomorrow for part 3!
The video is kaput, haven’t you noticed?
@sonneteer It’s still playing properly for me.
What’s happening for you?
Thank you AJ! That is exactly what I was looking for. It was a big help.
@zzbloggerzz Glad you liked it!! Enjoy watching the rest of the series as well!
It won’t play. There’s a no-go sign over it. I’m using an iPad right now but all other videos are ok. Tried to watch it on Vimeo but you seem to have stopped uploading there, right?
@sonneteer Is the video still not playing for you? I haven’t tired on an iPad, but this hosting provider seems to say they should work. We’re using non-flash embedding, so it should work.
Hi AJ
Video was fine for me.
Interesting to see how you did the gradients.
And no surprise that IE ignores the CSS.
Regards Chrome – are you using it now instead of Firefox?
I use Firefox because it has firebug to inspect elements, but I notice that you are using Chrome and the developer tools.
Would you advise going the Chrome / developer tools route?
@wmwebdes Yah, I don’t remember if I mentioned that IE was going to ignore it. I believe that CSS Gradients are slated for IE10, but don’t quote me on that. 😛
I use Chrome 100% of the time. I made one video with Firefox and remembered why I didn’t like it (it’s too slow and memory intensive on my Mac). I also love that Chrome/Safari have great built-in developer tools, so I don’t need to use Firebug anymore. Not to say that there’s still not any uses for Firebug, but I don’t have to go in there as much now. 🙂
@AJMorris
Thanks AJ.
Probably give Chrome a run out.
Sorry for second comment, but if you want a great colour picker for free – take a look here.
http://www.iconico.com/colorpic/
Great and useful series, AJ. Thank you. I am working my way through it and hope to feel a lot more comfortable with HT 3.X very soon.
@almondize Glad to hear it! 🙂 Hopefully it will help others get more comfortable with Headway 3.x as well.
Why not use a tiled image for the gradients? Wouldn’t that work better for Internet Explorer, which is what most people still use? Or should you do both, perhaps?
Thanks!
@p888 Trying to keep within 10 minutes for each video I chose 1 way to show. I did mention this wouldn’t work in IE, but since I was on a Mac, I just used what I knew what would work. 🙂
Video froze in Firefox, but played in Explorer and in Chrome. By the way, Firefox does have a nice little colorpicker add-on called ColorZilla.
Off to part 3. So far, this is great. Thanks 🙂
I would like to apply the same concept (using the linear gradients) to change my background wrapper color but I cant seem to be able to figure out how to target the background wrapper. What CSS would I need?Videos are great and very helpful. Thanks!
@oceansands99 Please post your question on the forums so this can be handled in the support area. Thanks
Hi AJ,
What was the tool you used in Chrome for picking the colors?
@shockeyj Hi there shockeyj,I found out it was this tool called Pendule for Chrome, install it from the link below, then open it from it’s icon on Chrome (top right for me) and choose Miscellaneous, then Display color picker, hope it helps : )The link to Pendule:https://chrome.google.com/webstore/detail/pendule/gbkffbkamcejhkcaocmkdeiiccpmjfdi
Hi – please would you correct this syntax, I’m afraid I couldn’t read your screen:
.block-type-navigation { background, -moz-linear-gradient(19% 75% 90deg,#000000, #464646), }