Grow your CSS skills. Land your dream job.

How to Create Stunning Effects With 165 Media Queries or Less!

Published by Guest Author

Today's post is by Arley McBlain (@ArleyM), a front end developer in Burlington Ontario, at Thrillworks. Arley recently redesigned his site and it has some pretty neat CSS effects on it. I asked him if he'd like to share some of them and this article is his kind oblige.

Responsive Web Design is the big buzz topic of the industry right now, and with little wonder; serving your site to be visually optimized for different devices and contexts is a brilliant idea. Your site exists to be seen, so why leave anyone out?

Weird RWD Side Effect

One bizarre trend emerging in this new RWD era is desktop-browsing web designers resizing their browsers to watch the break-points change the layout. The average user never sits at their desk repetitively shrinking and expanding the browser window like a mad scientist. Yup, we're all strange. The personal website of someone like you and I likely has this kind of strange browser-resizing user as the target demographic, and most frequent visitor, so why not play to that?

Responsive Text is a relatively new sub-topic that is only just beginning to be explored (Frankie Roberto recently made this post on responsive text). Today I want to talk about changing a headline to create a striking effect using media queries. This effect is created by having many media queries that trigger in short succession. Using this approach there is no limit to the jaw dropping visuals your site can produce.

It Starts With a Personal Project

I recently refreshed my personal site ArleyM.com. There are some "old-school" responsive effects on my front page (loosely based on this responsive framework Chris Coyier tweeted about a few months back) in that the picture of me slides under my first name, but on top of my last name. This is done by having a percentage based position on the image. I figured I would be remiss to not have some other eye catching responsive feature on the site, so I dug back into my experiments. A personal project is the perfect place to do something crazy that you'll otherwise never get the chance to do on client work. I decided to add 'responsive adjectives' shown at the bottom of this image:


"Be Shocking." vs. "Be Weird." - Changing text using an army of media queries.

I call the use of countless media queries "Lark Queries" (The word 'lark' often refers to something done for fun, or playfully, but I also like to think of it as taking a simple concept to an extreme level). Quite simply the user will see different words based on the width of their browser. Many users will never realize that there is anything unusual going on - but when someone checks if the site is responsive, they may be surprised at this uncommon effect.

Creating the effect

There are a couple ways to achieve this. I chose to use CSS for everything. I made a media query breakpoint every 10px from 300px to 1920px, and then a
couple extra break points above that for dual-monitor, and 27" cinema display users. I then used the CSS Content attribute to place the text in the h2. The content attribute isn't supported by IE7, but for my site all versions of IE represent less than 4% of all traffic.

The HTML

Here we have a simple h2 with a parent div to make the selector unique (this isn't something I want on every h2 on my site!).

<div class="row">
  <h2>Be <span></span></h2>
</div>

The empty span is there to allow the CSS to render the content after. If I had to deal with older versions of IE I would actually put a static default word within the span, and only display it as needed using conditional wrappers (as demonstrated in How to Create an IE only stylesheet).

The CSS

@media (max-width: 980px) {
  .row h2 span:after { content: 'Unusual.' }
}

Here's just one line of the many media queries I made (165 in total!). All that changes is the max-width value, and the content value. The media queries were the easy part, thinking of a different word and arranging in order of shortest to longest was really time consuming (Thanks thesaurus.com)!

The result is striking - the text rapidly changes with the shrinking browser. Fun! The Content element automagically adds the new word after the span with every media query breakpoint. It just feels nice to use this handy content attribute for something other than ul bullet points for once!

View Demo   Download Files

It was fun to see the differences this rarely used property has in each browser! For example, only Opera will let you select the content text, or copy / paste it.

Getting into Semantics

They say it's a best practice to keep your content in HTML, your styles in CSS, and your behaviour in JavaScript. So am I breaking some rules by literally using a content property? I don't think so.

You could put all of the content values in HTML and use the media queries to toggle display:none/inline, but if a screen reader or Google ever had the chance to read all of that, the result might not be what you're after! JavaScript could do this job just fine (and with less code if you put all of the content values into an array), but my CSS demo will work even if JS is turned off. I personally find the content property charming as well, not sure why.

I would also argue that this effect does fall more into the style category than real content. It's a bit of a gimmick, so I'm not too worried about semantics for my own project.

So What Next?

Obviously a tiny part of me would die inside every time this code with exact text was used verbatim, so how else could this massive media query technique be used? That's where you come in! I would love to hear some ideas in the comments. Don't let the daunting realization of how much time these would take to do hamper your imagination.

Here are a handful of other ideas I've thought of:

  • Changing colors: The media queries could change color / background-color to shift through the color spectrum, saturation scale, or go through the tints / tones of a color (0to255.com is a good place to get some hex for this). This could happen for a small element like the color of a title, or more extreme: like a full site color scheme change.
  • Faux-Animate an image:* If you could use a high quality DSLR that can rapidly take shots you could create a stunning faux animation effect (image preloading would become key, this RWD effect comes with a high bandwidth cost). There is so much potential here!
  • Changing Focus: It would be amazing if changing the browser size shifted the depth-of-field focus of the images on the page!
  • Go Crazy: With a little JavaScript it should be easy to tell that a browser is resizing, and no longer at the size it was on load. You can mess with those pesky browser resizing designers by having the site go insane on resize! I'm thinking Katamari Ball crazy.
  • User hints: This could actually be used in a practical way to give users cues that they should rotate their phone into landscape. But 'practical' sounds kinda boring next to the other ideas.

As I draw to a conclusion and reflect on this list of things that can be done without being shy of media queries I can't help but feel like we're just looking at the tip of an iceberg. A crazy resizing iceberg.

I'm going to go practice resizing my browser in anticipation!

Update

Sass Loop implementation by Hugo.

Comments

  1. Tim Chase
    Permalink to comment#

    I tried to put some content in the <span> tag in case it was looked at with CSS turned off, orthe user wanted to select something sensible (see the aside about Opera and copy/paste), orin case screen readers had trouble with :after pseudoelements. My attempts either hid/removed the <span> and the :after, or failed outright (such as trying to set content:""; on the span itself). Any suggestions?

    • Tim Chase
      Permalink to comment#

      And apparently, css-tricks.com doesn’t allow <ul> and <li> tags as part of the “You can use basic HTML”.

    • Permalink to comment#

      Before, I believed <ul> and <li> are part of “basic HTML” too. :)

    • T.J. Crowder
      Permalink to comment#

      This (include default content in the HTML, then switch it out with the CSS) was my first thought as well. Progressive enhancement and all that…

    • Mike M.
      Permalink to comment#

      Maybe include a span with one class, put the content in there, put in an empty span with another class, then use the media queries to hide the “default text” span and append content to the empty span? I doubt I’m as experienced with CSS as most of the userbase here, and I’m on an iPad at the moment so I can’t test it, but it makes sense in my head.

    • Tim Chase
      Permalink to comment#

      Maybe include a span with one class, put the content in there, put in an empty span with another class, then use the media queries to hide the “default text” span and append content to the empty span?—Mike M.

      My hope was to avoid superfluous markup such as empty spans, doing it all with <span>Default</span> but my attempts to kill off the <span> ended up killing off the pseudoelement too.

  2. Enrique
    Permalink to comment#

    cool, i also did something with media queries. I did not even think of using content: “”;

  3. Chekelin
    Permalink to comment#

    Sweeeeeeeeeeet

    Thanks for the post!

    It was nice the ‘easter egg’ in the text :)

  4. Creative thinking but… talk about inefficient selectors! I’m ok with the amount of media queries (sort of) but the selector could be sped up greatly by just assigning an ID to the span and using a #word:after selector.

    • Permalink to comment#

      I’ll be honest; I never gave efficiency a second thought! The whole premise is a bit decadent, but I’m lucky my target audience is web nerds rather than Dial-up Granny!

      Great suggestion!

  5. porpor
    Permalink to comment#

    Hello! Arley McBlain, I hardly use the content change in media query! Thanks!~
    Waiting For Next! ;-)

  6. I dig the approach, maybe your analysis even more. RWD is getting huge but still taking baby steps, this type of thinking can help foster new ideas that may become best practices. Keep pushing forward Arley!

  7. Permalink to comment#

    I hope this catches on. I’ve been playing around with this for a few minutes and there are a lot of things you can do with it.

  8. Rasmus
    Permalink to comment#

    This is absolutely stunning! Will absolutely try this out!

  9. What kind of mentalist runs their 27″ monitor with a browser full width? I’ve got a 27″ iMac, and even having it half width is overkill at times.

  10. Permalink to comment#

    I really like the idea of changing the content just by using media queries.

  11. The span is unnecessary markup when you’re using the ::before or ::after pseudo elements.
    you can just attach it to the h2::after { content:”WORDS”; }

  12. Dan
    Permalink to comment#

    Title should be ’165 Media Queries or fewer’!
    Good article, though.

  13. For those who might be thinking “bloat” :

    1) Loosen up =)

    2) Remember gzip kicks ass with highly repetitive text.

  14. Don’t you think it’s better to use unordered list with written words html, ex:

    
    <div class="txtcenter">Be 
    <ul>
      <li>Lean</li>
      <li>Confident</li>
      <li>Different</li>
      <li>e.t.c</li>
    </ul>
    </div> 
    

    and then “show/hide” each “li” element?

    I prefer more text in html, especially “keywords”.

    • Permalink to comment#

      You could pull off the same effect in a number of ways. I think a JS array might give you even leaner code.

      I love CSS and I love this wacky use of the content tag. Even if it’s not the most efficient, I think it might have made a better post, this is CSS Tricks after all!

  15. Fabulous effect. I’m gonna try this on my blogger blog. Sadly there’s a dearth of tutorials on designing and developing blogger templates. I hope Chris is reading this :)

    • Permalink to comment#

      More and more users are moving away from Blogger to platforms like WordPress. This can be good for you.

      Where there’s a dearth there’s an opportunity! Learn the snot out of Blogger templates and you might find yourself with a lot of great material for a niche site.

  16. Excellent article! I’m not quite sure that this is a good technique for actual websites but it is definitely good for personal website.

    Thank you for writing this article Arley!

  17. @ArleyM: Which is why I’ve not moved to WP. I’m learning how to design Blogger templates and develop a niche for myself as you said.

  18. If you have two monitors, try resizing the window over both screens… you’ll get a very special message lol.

    - “BE A SHOW OFF ABOUT YOUR CRAZY MONITORS”

  19. This is nice to be here! nice platform to learn more Queries n else:)
    i appreciated that job!

  20. Here’s a quick attempt at the depth of field idea, could be smoother, but it’s late ;)

    http://open-sor.es/dof.html

    • Permalink to comment#

      What browser did you build this for? I’m curious to see if we can take it to the next level!

    • I was ready to say – It doesn’t work.
      Than i saw the trick. ; )
      I liked that you use media queries to check heights. This can be very useful, too.
      I bookmarked your example next to this cool site here.

      Thanks for sharing.

    • Permalink to comment#

      Oh Awesome! Resize vertically! Pretty cool. This could be the start of something very interesting!

  21. thanks!! this really is a helpful tutorial…

  22. Really great, thanks for writing out all those queries ! I shall definitely use this in some subtle way somewhere…

  23. This just made my Friday. Thanks!

  24. M. Holcombe
    Permalink to comment#

    Brilliant article! Many thanks!

  25. Just imagine what this technique could do to porn sites…!

  26. Permalink to comment#

    Thanks Arley. I just checked out the effect on your site – very cool. I feel inspired :-)

  27. Binyamin
    Permalink to comment#

    Searching Engines still have not implemented to crawl and index CSS content: "some text", so be careful on using it in case you would it appear in SERPs.

  28. Thank you Arley for this site and all useful information here.
    This site is one of my favor place. I always come here when I want to learn something new, cool and creative.
    Keep sharing! :D

  29. Permalink to comment#

    Woa! Naughty developers!! Are you really suggesting putting content in CSS???
    Appart from that this is a nice & fun tutorial but really shouldn’t be used on a website unless there is no desired semantic value to the text, then of course it’s fine.
    Also, I agree with a previous comment, I would use JS to achieve this same effect…
    It wouldn’t be hard to start with semantic:

    <p>Be thrilling, modest, crafty</p>

    and then use JS to split the text by comma and show only one at a time according to browser width.

    Rant over, sorry to troll, I still like the effect!

  30. Indeed, a helper application. Thanks for sharing.

  31. I added in some image sprites and moving divs to recreate an old classic: http://btraut.com/labs/mediamario/

    I hope you like it!

  32. How can I take some content out. My site title in my navbar is to long for smaller screens. It reads ‘No Skillz | Carlisle & Finch and Softball’. I’m looking for it to read just ‘Carlisle & Finch Softball’ on smaller screens. Can someone point me into the right direction on finding this fix. Thanks

    • Sorry I forgot my code

      <a class="navbar-brand text-muted team-name" href="#">No Skillz | Carlisle &amp; Finch Softball</a>

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".