Articles in the ‘Tutorials’ Category

  • CSS Counters: counter-increment and Friends

    Posted: 2 years ago in Tutorials

    The CSS2.1 spec introduced a new technique allowing developers to combine three CSS properties and a pseudo-element to create auto-incrementing counters – similar to what is displayed in an ordered list.

    While counters for lists are limited to <ol> or <ul> elements and only with simple incrementation, the new counter method introduced in CSS2.1 allows for integers to be prepended to any set of elements, and is quite flexible.

    This technique is a bit confusing because it uses multiple CSS properties, and looks different than most CSS code. I hope to clarify how it’s used and I’ll run down some possible ways it can be implemented, along with some benefits and drawbacks…

    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    Read More: CSS Counters: counter-increment and Friends

  • Start Experimenting With CSS3 Keyframe Animations

    Posted: 2 years ago in Tutorials

    CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them.

    For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in…

    VN:F [1.9.17_1161]
    Rating: +2 (from 2 votes)

    Read More: Start Experimenting With CSS3 Keyframe Animations

  • CSS Run-in Display Value

    Posted: 2 years ago in Tutorials

    CSS has a value for the display attribute called run-in. It allows a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques…

    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    Read More: CSS Run-in Display Value

  • Word-Wrap: A CSS3 Property That Works in Every Browser

    Posted: 2 years ago in Tutorials

    Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5…

    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    Read More: Word-Wrap: A CSS3 Property That Works in Every Browser

  • Understanding CSS3 border-image

    Posted: 2 years ago in Tutorials

    The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers…

    VN:F [1.9.17_1161]
    Rating: 0 (from 0 votes)

    Read More: Understanding CSS3 border-image

  • Semantically Correct Website Logos

    Posted: 2 years ago in Tutorials

    How to mark up your website logo has always been a really controversial topic on the web. There are literally hundreds of articles about the topic and, well, this is another one…

    VN:F [1.9.17_1161]
    Rating: +1 (from 1 vote)

    Read More: Semantically Correct Website Logos

  • Pure CSS collapsible tree menu

    Posted: 2 years ago in Tutorials

    The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well…

    VN:F [1.9.17_1161]
    Rating: 0 (from 4 votes)

    Read More: Pure CSS collapsible tree menu

  • Font metrics and vertical space in CSS

    Posted: 2 years ago in Tutorials

    We put a lot of effort into the quality of the fonts in the Typekit library. As part of that work, we’ve been researching the relationship between font math and CSS, and would like to share what we’ve found. If you’ve ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this post is for you…

    VN:F [1.9.17_1161]
    Rating: +1 (from 1 vote)

    Read More: Font metrics and vertical space in CSS

  • CSS Webkit Appearance

    Posted: 2 years ago in Tutorials

    I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners. After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI…

    VN:F [1.9.17_1161]
    Rating: +1 (from 3 votes)

    Read More: CSS Webkit Appearance

  • CSS Content Property

    Posted: 2 years ago in Tutorials

    CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector with the colon, but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page…

    VN:F [1.9.17_1161]
    Rating: 0 (from 2 votes)

    Read More: CSS Content Property

Page 9 of 45« First...7891011...203040...Last »