Advertisement

CSS

  • HTML & CSS
    Quick Tip: Detect CSS3 Support in Browsers with JavaScriptDetect css support with js
    11 shares
    Isn't it fun that we get to play with the latest CSS techniques, like shadows and transitions? There's only one problem: how do we compensate, or more importantly, detect the browsers that do not support them? Well, there's a few solutions. In this tutorial and screencast, though, we'll create a JavaScript function that will accept a CSS property name as its parameter, and will return a boolean, indicating whether or not the browser supports the passed property. Read More…
  • PHP
    How to Squeeze the Most out of LESSPreview
    11 shares
    During a sick day a few weeks ago, I got around to something I've been meaning to look at for about a year: LESS. If anything web technology is worth a look, I promise LESS is. In this article, we'll look at the amazing power of LESS and its ability to streamline and improve your development process. We'll cover rapid prototyping, building a lightweight grid system, and using CSS3 with LESS.Read More…
  • HTML & CSS
    The Easiest Way to Create Vertical Text with CSSVertical text with css
    10 shares
    Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! Read More…
  • HTML & CSS
    Crash Course: YUI Grids CSSYuigrids
    2 shares
    The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often left unnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries. Today, I'd like to give you a tour of the YUI Grids CSS library.Read More…
  • 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
    85 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
    8 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…
Advertisement
Advertisement