Advertisement

CSS

  • HTML & CSS
    Mastering the 960 Grid SystemPreview
    18 shares
    We're already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you'll master the 960 grid system by dissecting the 24-column version demo. If you've only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you'll be able to convert your designs to HTML and CSS in no time at all.Read More…
  • Web Development
    Start Using HTML5 WebSockets TodayPreview
    42 shares
    One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol.Read More…
  • 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
    4 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
    47 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…
Advertisement
Advertisement