Advertisement

HTML/CSS

Latest Posts
  • HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    271 shares
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • HTML/CSS
    Unicode: A Beginner's PrimerUnicode retina 400x400
    310 shares
    Believe it or not, there's an image format which is built right into your browser. It allows images to be downloaded even before you need them, renders them perfectly on Retina screens, and allows them to have CSS colours and effects applied to them. Ok, I'm not being entirely truthful there. It's not an image format as such – but the rest still applies. Using Unicode you can create icons that are resolution independent, have virtually no download time and can also be styled with CSS.Read More…
  • HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    200 shares
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • HTML/CSS
    Quick Tip: Spare a Thought for Vertical Break PointsVertical retina
    183 shares
    I've seen this happen a few times recently, usually on websites with fixed navigation running down the left hand side. They'll have lovely, fluid layouts, which stretch out on wide screens and stack up on smaller devices, but they'll still fall foul of a sneaky break point few people think about. I'm taking about viewport height.Read More…
  • HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    143 shares
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    12 shares
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • HTML/CSS
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    145 shares
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    155 shares
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    19 shares
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • HTML/CSS
    What You May Not Know About the Z-Index PropertyZineex thumb
    1083 shares
    The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples.Read More…
  • Compass
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    32 shares
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Compass
    Setting up Foundation With Sass and CompassFoundation sass retina
    22 shares
    Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…
Advertisement
Advertisement