5 New Video Quick Tips
videos

5 Super Helpful Web Development Video Quick Tips

on Sep 17th 2009 with 37 comments

It occurred to me that many of you might not be aware that, once a week or so, I post a five minute web development video quick tip for our Twitter followers. From now on, I’ll make a posting on Nettuts+ after every five new quick tips – for the rest of you. Here’s the first set. We cover a variety of neat CSS3 features, Photoshop, and more!

Creating Your First Template With CodeIgniter

Preview a Tiling Background Image Directly from Photoshop

Learn how to use the CSS3 Property: text-shadow

How to Add a Drop-Shadow Across All Browsers

How to Make Rounded Corners with CSS and JavaScript


 
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://www.aqibmushtaq.co.uk Aqib Mushtaq

    Looks cool, need to definitely check the rounded corners one.

  • http://www.fatlizardmedia.com Juan C Rois

    Jeff, thanks a lot for this quick tips. And you are right, I was not aware of this because I try to stay away from most social media sites like twitter or facebook.
    I would especially pay attention to the “First template with Code Igniter” since I already got hooked with your previous CI series.

    Once again, thanks for making this tuts available.

  • arnold

    I love these quick tips…keep it coming

  • Stoian Kirov

    THANK YOOOOUUUU JEFFREEEYY :))))))))))))

  • Al

    Jeff, love your screencasts BUT screenr does not make it very easy to find the screenr competition screencasts. the general search on #nettuts just shows too much data, including all the tweets where all of the other tweets are repeated. not usually very interested in all of those.

    thanks for the link http://twitter.com/nettuts/favorites which works very nicely. just too much stuff on any other search, which is just clutter.

    Al

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

      Yeah. I’m favoriting every submission to twitter.com/nettuts/favorites for that very reason. :)

  • David Ferguson

    @JW: Don’t ya just love having to talk 90 mph to try to get everything in, in less than 5 minutes? :)

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

      It’s really damn hard. :) I had to completely redo the screencast at the very top because I didn’t realize that I had gone way over 5 minutes.

  • Alexander

    Great stuff Jeffrey! So when is the CI day 7 coming up? :)

  • Joe

    Fantastic Jeff!

  • http://www.yorickpeterse.com/ Yorick Peterse

    About the CodeIgniter screencast :

    It’s much easier to just create a templates directory and use the following PHP code : http://pastie.org/621030

    There’s no need for another PHP file to load the header and footer :)

  • http://www.secretspedia.com Waseem

    amazing , I need the text-shadow across all browsers

    Thanks

  • Nikolius

    Thanks again for this great tutorial.
    i have a question, i already try the rounded corner tutorial.

    just it doesn’t work in IE 7 and Opera 10.
    i already check my code, and it’s already exactly like in this tutorial..

    everyone have same problem?

    • http://ramon.com.ua Ramon

      Yup, doesn’t work in IE 8 for me too

      • Al

        I noticed that too! although if you go to the plugin info page, then that does work with IE7. not sure what the difference is. have not been able to work it out.

  • http://www.xtensives.com Hasanga

    Wow! thanks a lot nettuts!

  • Santana

    Wow Jeffrey very nice tips!! thank u man!

  • Althalos

    I did not know you did that! Thx a lot for posting it here… I might even sign up to the twitter feed just because of this!

  • http://www.code-pal.com Sumeet Chawla

    I really enjoyed the first tip where you are creating templates in codeignitor. The best part of that tip was the codeexpander thingy.. I never knew such thing existed :P Looks quite interesting..

  • http://www.vision18.in Saifu

    amazing……..thanks….

  • http://www.ademaweb.nl Jeroen

    rounded corners are so yesterday ;)

    • Al

      I am beginning to think the same of the cycling of images as well

      modern day version of marquee

  • W. Rast

    Man, that solution for IE is way overcomplicated. Just use IE’s proprietary filter CSS property to drop a shadow in behind your element. Like so:

    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color=’#333333′, Positive=’true’)

    Problem solved. All the other browsers will ignore it. No need to use the clunky js solution.

  • Andreas

    Were can I write a tutorial suggestion?

    My problem:
    I would like to have a three colum layout and then when the user clicks on the middle it will rotate it 90 degresse, any ideas?

  • http://www.webhostdesignpost.com/website/ Cody

    Nice Videos – Thanks!

  • Mike Schneider

    Awesome stuff. I like these quick tips a lot =D Nice job Jeff

  • http://www.rizqtech.net rizq

    Thanks Jeff….. Cool !

  • Rich

    If you’re going to have to use JS to get rounded corners or shadows to work in IE, why bother with the CSS3 as well? atleast at the moment anyway.

  • http://www.utdwebdesignireland.com Cian Foley

    Very good Jeff, I must put a few vids together for my blog, thanks for the inspiration!

  • http://labs.dariux.com Dario Gutierrez

    Excellent list for my inspiration, thanks Jeff!

  • http://ercell.co.cc ercell

    vaov! thanks Jeff!

  • Jiert

    Okay, so I know this is one of those instances where I’m going to end up looking stupid, but in the tut about previewing background images in PS, I don’t actually have the “Preview” button on my “save for web and devices” dialog. Working with CS3.

    Is there something I’m missing?

  • Paal

    I like it, keep it comming

  • http://www.YoungStream.net MrSuitUp

    Just found out about your site from a friend…
    Gotta say I’m in love!

    Surprised how easy and _fun_ it is to learn from videos!

  • http://www.generateaname.com flash

    I dont use twitter or FB, so thank you for posting them here.. very helpful too!

  • http://www.linkedin.com/in/pearsestreet social network web development

    I tend to agree with your post. I’ve had difficulty finding any worthwhile information on this subject. Thanks for your thourough and informitive post.

  • Mithat

    In the Templating tutorial, you made the controller responsible for loading both the template and the content. Could you instead not make the view be itself responsible for managing its own templated structure? E.g.:

    file: contact_us.php

    $this->load->view(‘includes/header);
    This is the contact page
    $this->load->view(‘includes/footer);

    file: about_us.php

    $this->load->view(‘includes/header);
    >p<This is the about page>/p<
    $this->load->view(‘includes/footer);

    Then the views would be called as they would be for “non-templated” views.

    I like the fact that in your approach there is no repetition of the template structure in the files contact_us.php and about_us.php. But the price for this is the repetition of code in getting the view content” in the controller as well as IMHO what might be a less clear delineation of control and view responsibilities.