Advertisement
Latest Posts
  • Web Design
    HTML & CSS
    Quick Tip: Solving the Equal Height Column ConundrumFloat columns
    There's one familiar problem in web design which has been around ever since we moved from the days of table-based design into the CSS era, and that is: "How can I have 100% height backgrounds in my flexible multi-column layout?". Today, we'll look at some solutions.Read More…
  • Web Design
    Javascript
    Responsive Design, Retina Images and Debugging for Google Maps APIGoogle map rwd retina
    This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and debugging tools which make life a lot easier.  It gives a whistle-stop tour through a whole range of areas, which you can explore further in your own projects.Read More…
  • Web Design
    Complete Websites
    Build a Modular Dashboard Interface With PurePure retina
    Today, we will be making a beautiful, minimal dashboard using Pure (view the project on GitHub), the new mini-CSS module library from Yahoo!. We will be talking about and using some of the principles of SMACSS (Scalable and Modular Architecture for CSS). We'll also be using icons from WeLoveIconFonts.com.Read More…
  • Web Design
    HTML/CSS
    Create a Quick, Sticky MenuSticky menu retina
    During this quick tutorial we're going to implement a sticky menu with CSS, toggling its visibility with jQuery. It's the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.Read More…
  • Web Design
    HTML/CSS
    Build a Responsive Pricing Table with Neat Hover StatesCss pricing tables retina
    During this tutorial we'll be creating a sleek pricing table with some striking hover effects. We'll use Lea Verou's Prefixfree script to keep our CSS clean, plus we'll make the whole thing responsive, shifting the layout at a couple of breakpoints.Read More…
  • Web Design
    Site Elements
    Your Logo, as a Web Font LigatureLigature retina
    Let's look at an alternative approach for displaying logos on a web page. Normally, you'll approach the challenge by using an <img> tag. Perhaps you'll use image replacement through CSS, perhaps you'll even venture into SVG files, but have you considered what's possible by designing your own web font ligature?Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation: Off Canvas PatternsNav patterns preview
    This is the final part in a Premium series about responsive navigation patterns. But here's the bonus: this one's freely available for everyone! In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding!Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Create a Stack of Paper With a Single ElementPaper preview
    Today we're going to do something really simple (but effective) with CSS. We're going to take a single div element, then style it to emulate a stack of paper, as popularized by Orman Clark.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Make the Most of CSS Attribute SelectorsSelectors preview
    If you've never used attribute selectors in your CSS before, you're missing out on a great way to manipulate your styles. Let's take a look at how you can make the most of them..Read More…
  • Web Design
    Typography
    Working With WebINK: Pro-Quality Fonts for the WebWebink preview
    WebINK by Extensis is a web font service which gives you access to over a thousand font families, produced by the best foundries in the industry. As a designer, you can use their fonts in Photoshop and in development, for free, before handing over the whole project to your client's WebINK account.Read More…
  • Web Design
    HTML/CSS
    The Role of Table Layouts in Responsive Web DesignTable preview
    Fluid layouts are the perfect way to house our content at any viewport size. Text can flow as containers grow and shrink, images and even video and iframes can flex and squish too. But what if we have content which shouldn't alter dimensions? What about ad blocks, for example, which are often designed with very specific sizing in mind? Oddly enough, this is where table layouts come to the rescue..Read More…
  • Web Design
    HTML/CSS
    Responsive Navigation: Toggle Patterns - New on PremiumNav patterns preview
    Welcome to the third in a Premium series which looks at responsive navigation patterns. This tutorial will walk you through three patterns where navigation is toggled on and off to conserve space at the top of the page. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…
Advertisement