Articles in the ‘Articles’ Category

  • Prefix or Posthack

    Posted: 2 years ago in Articles

    As CSS browser support increases, including impressive strides by the IE9 team, more and more authors are plunging into CSS3. As they do so, they’re facing vendor prefixes—the — properties like -moz-border-radius, -webkit-animation, and so on. There’s been some grumbling about these prefixes.

    We ought to praise vendors for using prefixes, and indeed encourage them to continue. Beyond that, I hold that prefixes should become a central part of the CSS standardization process. I do this not for the love of repetition, but out of a desire to see CSS evolve consistently. I believe that prefixes can actually accelerate the advancement and refinement of CSS…

    VN:F [1.9.13_1145]
    Rating: +1 (from 1 vote)

    Read More: Prefix or Posthack

  • Supersize that Background, Please!

    Posted: 2 years ago in Articles

    With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code. But which image size will be big enough? Monitors and operating systems have evolved quickly, and as a result there is a wide range of available screen resolutions.

    A better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images. CSS3 backgrounds to the rescue…

    VN:F [1.9.13_1145]
    Rating: +1 (from 1 vote)

    Read More: Supersize that Background, Please!

  • Stop Forking with CSS3

    Posted: 2 years ago in Articles

    It seems like virtually every day there’s a fantastic new example of something amazing you can do with CSS3. Whether it’s as complex as full-blown animations or as relatively simple as RGBa colors, drop shadows, or rounded corners, I marvel at how far we’ve come since the lowly days of CSS1 or shudder the @font element. The current state of CSS3 reminds me of a typical cinematic device: The scene opens with us, this happy-go-lucky family of developers out for a picnic by the lake on a beautiful summer afternoon. And as we laugh, play, and scamper about entertaining ourselves, the camera pans around, bringing us over to the lake where, beneath the surface, something stirs. Something ominous and foreboding…

    VN:F [1.9.13_1145]
    Rating: +3 (from 3 votes)

    Read More: Stop Forking with CSS3

  • Pure CSS Twitter Fail Whale

    Posted: 2 years ago in Articles

    The Twitter “Fail Whale” fully rendered using just CSS. If you’re using a Webkit browser Safari or Chrome, you’ll also see it’s animated. If you are viewing in IE8 or below, well, this isn’t an experiment for you…

    VN:F [1.9.13_1145]
    Rating: 0 (from 2 votes)

    Read More: Pure CSS Twitter Fail Whale

  • CSS Three – Connecting The Dots

    Posted: 2 years ago in Articles

    Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate…

    VN:F [1.9.13_1145]
    Rating: 0 (from 0 votes)

    Read More: CSS Three – Connecting The Dots

  • Efficiently Rendering CSS

    Posted: 2 years ago in Articles

    I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?

    This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

    Let’s cover some of the big ideas they present, and then discuss the practicalities of it all…

    VN:F [1.9.13_1145]
    Rating: 0 (from 0 votes)

    Read More: Efficiently Rendering CSS

  • -webkit-font-smoothing

    Posted: 2 years ago in Articles

    I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack using -webkit-text-stroke that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling. So you can imagine how happy I was when I saw Faruk Ateş tweeting something about -webkit-font-smoothing. Being the CSS geek I am, I whipped up a demo page you need the latest WebKit Nightly to properly see that page to see what exactly it did…

    VN:F [1.9.13_1145]
    Rating: 0 (from 2 votes)

    Read More: -webkit-font-smoothing

  • Everything you Know about Clearfix is Wrong

    Posted: 2 years ago in Articles

    Too often, authors trigger hasLayout without thinking of adding the necessary styling to create the same rendering across all browsers. Because of this, they end up adding IE specific declarations to “patch” their styling. This does not mean we should avoid clearfix at all costs though. It is a great tool which is safe to use as long as we remember that besides containing floats, it may also prevent collapsing margins and will “escape” surrounding floats in IE…

    VN:F [1.9.13_1145]
    Rating: 0 (from 0 votes)

    Read More: Everything you Know about Clearfix is Wrong

  • CSS3 Transforms & @font-face Experiment

    Posted: 2 years ago in Articles

    This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction…

    VN:F [1.9.13_1145]
    Rating: +1 (from 1 vote)

    Read More: CSS3 Transforms & @font-face Experiment

  • CSS3 Transition-Delay

    Posted: 2 years ago in Articles

    In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s currently compatible with webkit browsers like Safari or Google Chrome…

    VN:F [1.9.13_1145]
    Rating: +2 (from 2 votes)

    Read More: CSS3 Transition-Delay

Page 2 of 1512345...10...Last »