64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

CSS

  • HTML & CSS
    Quick Tip: Multiple Borders with Simple CSS200x200
    7 shares
    Did you know that we can achieve multiple borders with simple CSS, by using the :after amd :before psuedo-classes? This is something I recently learned myself! I'll show you how to add more depth to your designs, without images, in just a few minutes. Read More…
  • HTML & CSS
    CSS DIY Organization200x200
    1 shares
    I detest looking at code or mark-up that I've written in the past, which I don't understand right off the bat. I'm surely no different from you in that I want to be able to come back years later, pick the code up, and understand exactly what is going on. I don't want to dissect the simplest concepts, where the brackets are located, or even how the mark-up is indented. I have created habits to help me with rapid development, which have kept my sanity somewhat intact. I will be honest though, I have never given much thought to how I write and organize my CSS until recently, and that is what I am sharing today.Read More…
  • HTML & CSS
    Quick Tip: Practical CSS Shapes200x200
    7 shares
    A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I'll show you how in four minutes. Read More…
  • HTML & CSS
    Quick Tip: Understanding CSS Specificity200x200
    3 shares
    The "C" in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn't always the case. There's something else you have to take into consideration, as well: specificity. In this quick tip, I'll show you how to do just that. Read More…
  • HTML & CSS
    Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters200x200
    44 shares
    Two months ago, I, in a video quick tip, demonstrated how to use the underscore and star hacks to target Internet Explorer 6 and 7 in your stylesheets. In today's quick tip, we'll take things one step further, as we introduce a new hack that targets IE8 and below as well. It should be noted that this is not a best practice, and conditional comments should be used instead 98% of the time. With that said, it's always important to know what you can do - plus it's fun, right? Read More…
  • Web Development
    Quick Tip: How to Write a Neat FlipNav ScriptFlipnav
    2 shares
    Somehow, I inadvertently started a navigation series over the last few weeks. It's purely coincidence, mostly spawned by emails and such. This week, we're going to mimic the neat navigation functionality, found on JohnMayer.com. Simply mouse over one of the navigation items to see the effect. However, we're going to make it a bit more flexible by removing the need for images. We'll achieve the effect using only CSS and JavaScript. Read More…
  • HTML & CSS
    How to Create a Simple iTunes-like Slider200x200
    8 shares
    When space is at a premium, making use of sliders is the optimal way to present information. Today, we'll take a look at how to create a slider similar to the one used in the iTunes store.Read More…
  • Design
    How to Build and Enhance a 3-Level Navigation Menu200x200
    10 shares
    Perhaps more than any other topic, I'm most often contacted about how to build cross-browser navigation menus. Understandably, the reason is because every web designer has built one at some point, if not during every project! Nonetheless, it can absolutely be a tricky task. In this video tutorial, I'll teach you how to build an attractive cross-browser navigation menu; notable features include CSS3 gradients, multiple sub-menus, and jQuery animations. Read More…
  • Design
    Quick Tip: Different Layouts for Different Widths200x200
    1 shares
    It's becoming more and more common for web sites and applications to provide different layouts dependent upon the user's window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions. In this video quick tip, we'll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method. Read More…
  • Design
    Quick Tip: How to Work with @Font-face200x200
    5 shares
    Due to the fact that @font-face can be a bit overly complicated, it hasn't caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it's worth. But - in five minutes, I'll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch! Read More…
  • Web Development
    5 Examples of Beautiful Resume/CV Web Templates200x200
    25 shares
    Did you know that we recently launched a new sub-category on ThemeForest, specifically for resumes/CVs optimized for the web? It's becoming more and more common for potential employers to simply request a link to your website, rather than a sheet of paper. Though the category only launched a few weeks ago, we've already received a handful of beautiful designs. Read More…
  • HTML & CSS
    How to Build a Newspaper Website with a GridCode
    2 shares
    In this Tuts+ video tutorial, you’ll learn how to utilize a grid to create a simple newspaper-like website. Along the way, you’ll learn helpful techniques, such as easy ways to target IE7 and IE6 with only a single character, using the 960 grid system, and even using CSS3 to create columns! It’s an hour long; ready to dig in?Read More…
Advertisement
Suggested Tuts+ Course
Chrome Developer Tools$15
Advertisement