SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)

    This Week in CSS—November 4, 2013

    Here are some nice links that we've gathered for you this week:

    Articles

    For the more geeky amongst us, here's a nice article by Paul Irish about how much speedier the latest version of Flexbox is.

    Perhaps even more geeky is this analysis of the image resizing algorithms used by popular web browsers.

    Resources

    If you prefer to write CSS rules as you think of them, your style sheet can end up a bit of a mess. CSScomb is a pretty cool tool for sorting your CSS properties in specific order. You can choose what that order is. It also integrates nicely with a wide range of code editors.

    It's pretty amazing what you can do with CSS3, such as creating patterns. Lea Verou's CSS3 Pattern Gallery is pretty darned inspiring. (Check out Lea's article on patterns if you want to learn how she does it.) You can also submit a new pattern to her site if you are feeling ambitious. If you'd prefer to have a tool to help you along, check out Paternify.

    Also take a look at Dudley Storey's CSS only venetian blind effect.

    Not for those who like to write their own code, but Typeform is a pretty cool app for creating pretty cool forms.

    For design inspiration, it's worth checking out Pattern Tap, which features a lot of nice sites, designs and tools on the web.

    Features

    Icon fonts

    There's a trend away from using images as icons, in favor of icon fonts. These have the advantage of being light weight and yet scalable too. There are some handy tools out there for generating icon fonts, such as:

    IcoMoon
    Fontello
    Fontastic
    Pictonic

    For more reading, Chris Coyier has a handy intro to icon fonts, and DesignShack also compares some of the services linked above.


    SVG images, sprites and imagemaps

    Another emerging option for icons is to use SVG. Using a vector program like Illustrator, you can save your files as a .svg and include it in your pages with a normal <img> element:

    Code:
    <img src="logo.svg" alt="site logo">
    And if SVG really floats your boat, check out Craig's cool article on using SVG for sprites.

    Or you might like to use SVG to create some awesome patterns.

    Or perhaps you'd like to animate your checkboxes and radio buttons with SVG.

    "Is that the best you've got?" Heck no! Perhaps you'd like to try creating a responsive imagemap with SVG.

    "O, but c'mon dudes, SVG isn't well supported, right?" If that's what you're thinking, then take a look at what caniuse has to say about that ...


    Tips

    And once again, some lighthearted tips for the week, courtesy of @H9RBSjs ...

    If your website is not responsive in browsers that don't yet exist, you're doing it wrong.

    source
    If you're wondering about the difference between "adaptive" and "responsive", remember that one is adaptive and the other is responsive.

    source
    If your personality was a CSS value, I'm pretty sure it would be something other than "normal".

    source



    Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue.

    You can also view a list of previous posts here.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There are some more nice CSS pattern links on Dudley Storey's site, such as:

    Pop Art Backgrounds
    More background patterns
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •