Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #60

This newsletter issue was sent out to 107,402 newsletter subscribers on Tuesday, May 29th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Here at Smashing Magazine, we embrace innovation and experimentation in every sense—be it in design, layout or content. We invite you to the Smashing Daily2—a new series on Smashing Magazine in which our dear colleague Vasilis van Gemert highlights the most recent Web design gems to help you stay on the top of what’s going on in the Web industry. You’ll find the link to the latest editions of the Smashing Daily in the sidebar of Smashing Magazine. As always, please feel free to provide us with feedback (#smashingdaily on Twitter) and share your thoughts with us!


As many of you already know, we’ve been busy bees organizing the upcoming Smashing Conference4—a friendly, valuable and inspiring community event we hope you won’t miss out on! The conference will be taking place in our home town Freiburg, Germany, on September 17th-19th 2012. There are only a limited amount of tickets left, so get your ticket5 as soon as possible! We’d be honored to meet you there!

On a sidenote, we wanted to mention how sincerely grateful we are to everybody who has purchased our new Smashing Books6, as well as to those who have posted photos on Twitter or Facebook, or have written a review of the book(s). Your opinion is very important to us, and if you like the books, please spread the word to your friends and colleagues. Your support means the world to us!

— The Smashing Team

Table of Contents

  1. Create The Illusion Of Stacked Elements With CSS37
  2. Inspiration For Mobile Aficionados8
  3. WorkFu: Social Job Board For The Network Age9
  4. Should I Check My Emails?10
  5. Creating Beautiful Résumés On The Fly11
  6. Because Everybody Loves Freebies!12
  7. A Hotline For All Your JavaScript Problems13
  8. Flow: Figure Out Where Your Users Go And When They Leave14
  9. Beautiful Slide Decks On Note and Point15

1. Create The Illusion Of Stacked Elements With CSS3

Many of the visual effects that we used to carefully design in Photoshop, Fireworks or Illustrator only to later slice them and embed into our websites with nasty CSS hacks aren’t needed any longer these days. The advent of CSS3 leaves it to creative designers and developers to come up with smart CSS techniques to produce more flexible and responsive visual effects using simple CSS. Tom Kenny’s Stacked Elements technique with CSS is a wonderful example of that.

Create The Illusion Of Stacked Elements With CSS3

Tom Kenny used :before and :after pseudo-elements to produce a simple “stacked” look for images. The simple illusion is generated using a couple of images hidden underneath the one you can see. Rotate the :before and :after elements a bit with CSS transforms, and you’ve got the result you wanted to achieve! It’s important to note that currently only Firefox supports transitions on :before and :after, so if you’d like to integrate some fancy transitions, you’ll need to play around with jQuery or CSS hacks. (vf)

2. Inspiration For Mobile Aficionados

You spend a lot of time on the Web using your phone? Then you may have noticed how much more restrictive and challenging design for mobile actually is. If you are developing mobile apps for Android or iOS quite often, you might want to bookmark Meerl.li16—where exceptional mobile designers connect, show off their designs and promote themselves. In fact, the website is a great place to browse if you’d like to see how good-looking mobile apps can be.

Inspiration For Mobile Aficionados17

You can leave feedback, find ideas or just catch up with the current developments in mobile development. Admittedly, not all the designs are exceptional, but you still might find quite a few beautiful gems in there. (jc)

3. WorkFu: Social Job Board For The Network Age

You’ve just graduated from university, or just quit your old job, or even consider quitting your present one. Unless you’re highly talented, employers won’t necessarily line up at your door to offer you a highly payed, fascinating job or career. Most of us have to hit the many18 job19 boards20, put on ties and go through a grueling gauntlet of job interviews. WorkFu could be an interesting addition to those conventional job websites.

WorkFu: Social Job Board For The Network Age

The interesting thing with this job website is that it doesn’t just present you with a list of jobs you might be suited for. Because you join up using your Twitter account, it also rates the job opportunities according to the connections you have to the potential employers or employees. This sets WorkFu apart from other websites—they acknowledge the importance of networking. So whether you’re looking for the best possible fit (as an employee or as an employer), or just want a place people can find you (should something really exciting come up), this might be the happening place to provide a profile. (jc)

4. Should I Check My Emails?

The ubiquitous connection to the Web through diverse devices—computers, tablets, smartphones, or even TVs—makes it irresistible to look up your emails every now and again. But have you noticed an increase in the frequency you look at your inbox lately? If the answer to that question is “yes”, then we have a solution for you.

Should I Check My Emails?21

To check or not to check: that is the question behind the email flowchart22 by Wendy Macnaughton. In a very well-humored way, it helps you decide how urgent a peek into your inbox is depending on the situation you are in. Reading between the lines will show you (literally) that most of the time constant checking is unnecessary. Think twice before opening your email client next time! (tts)

5. Creating Beautiful Résumés On The Fly

You have an impressive career and remarkable experience behind you, yet a generic MS Word template doesn’t quite reflect the professionalism that you’d like your CV to reflect? You deserve something better than that! In fact, this is where Resumonk23 might be just the tool that you are looking for.

Creating Beautiful Résumés On The Fly24

With this tool, you can fill in your details, choose one of the templates and save it as a PDF. The free version includes a couple of nice templates that you can use right away, while the pro version allows you to import your LinkedIn profile and get access to more resume templates. You might want to look into alternative tools such as JobSpice or LinkedIn Résumé Builder. And if you’re looking for more resume ideas, check out our article on CVs25 as well as CVParade.com26. (vf)

6. Because Everybody Loves Freebies!

Quality freebies are always difficult to find, yet once you have found them, they are always a valuable tool in your design arsenal. PixEden27 is a community that provides all kinds of beautifully crafted freebies. You will find print-ready resources such as logo sets, business cards and flyers, as well as Web design templates, icons, vectors and graphics. Register to download exclusive freebies or ask for a specific resource.

Because Everybody Loves Freebies!28

Another resource with a large number of freebies is Creative Market: Free Goods29. This section features a hand-picked selection of goodies that were submitted to Creative Market, a platform which gives designers an opportunity to promote and sell their work. You can find even more freebies on Orman Clark’s PremiumPixels30 as well. The resources are growing, so if you’re looking for freebies, make sure to visit them from time to time! (ml)

7. A Hotline For All Your JavaScript Problems

Do you feel like giving up? Nothing makes sense anymore? Your problems seem insurmountable? Wouldn’t it be great if you could talk to someone who cares and knows your woes? Why don’t you give the friendly, supporting folk at JS Hotline a call when your JavaScript wisdom is at an end?

A Hotline For All Your JavaScript Problems31

Garann Means created JS Hotline as a helpline for people who are stuck with a JavaScript problem. This call-service powered by Pocket Hotline32 promises professional help to people who need advice concerning JavaScript. They’ll talk you off the ledge when you just can’t make it work. And it won’t cost you anything but a smile. (jc)

8. Flow: Figure Out Where Your Users Go And When They Leave

You might have used at least a couple of tools that help you visualize traffic activities on your website. Do you really need a new one? Well, maybe. Flow is a free analytics tool that uses flowcharts to show all the visitors of a certain webpage, and which pages they clicked to when they left this page. Clicking on the subsequent pages will bring up a new chart and new information. This will allow you to track every step users take through your website.

Flow: Figure Out Where Your Users Go And When They Leave

Like Google analytics, the tool only requires a single line of JavaScript code to be installed. The advantage of the tool over some other products is the real-time display of data. You can monitor conversion and drop-off rates and dive deep into user paths. The interface of the tool helps you quickly follow the paths your users take and better understand their flow as well as when they leave. Perhaps it’s a good additional analytics tool for your website, after all?! (ml)

9. Beautiful Slide Decks On Note and Point

Imagine this situation: you have an opportunity to develop a design project and have to prepare a proposal. There are so many ideas for the content of the proposal, but how do you present them properly? Should you invest time for developing an extra design just for this presentation? Well, Note and Point33 can help you find the starting point you need.

Beautiful Slide Decks On Note and Point34

On their site, Dave Ruiz and Christian curate beautiful presentations from Keynote, PowerPoint and SlideRocket, and provide a PDF deck for each presentation. You can reach for reference anytime, or if you have a beautiful presentation that you made yourself, just submit it and enrich the collection with your design! (tts)

The authors in this newsletter are: (vf), Jan Constantin (jc), Talita Telma Stöckle (tts), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top