Much love for CSS3.

As I work on a design, I’m already thinking about how it could be coded. The benefit of being involved in both design and front-end development means that I can work quickly, because part of the development thinking is done before development officially begins.

The downside is that I may have got into a comfort zone where I am not always designing things that will challenge my CSS skills. (Which is fine because the project goals come first and shouldn’t suffer at the expense of trying to break the mold.)

Working at The Phuse, where I often develop the designs of my teammates, I got out of my comfort zone and expanded my repertoire of CSS tricks for dealing with some of the common design elements that are still (even with CSS3 and web fonts) a bit tricky to code.

CSS3 and web fonts solve a lot of the old issues, making a lot of our old PSD-slicing routine and  cute little workarounds obsolete, leaving us to find other ways to flex our front-end dev muscle.

Remember these?

  • Rounded corners
  • Drop shadows
  • Gradients
  • Multiple backgrounds
  • Border images
  • Fancy fonts

Easy-peasy now, right? But here are some design elements that still present a bit of a challenge. There are different ways to approach each of these, but my goal is to solve the following issues while keeping images and extra code to a minimum.

Before we begin, make yourself familiar with the pseudo-elements :before and :after if you aren’t already. A lot of the examples are about leveraging :before and :after to avoid extra markup.

You can find the examples I explain below in this demo.
Screenshot of the demo

1. Dropdown menu with tab all with a drop shadow

  • Use the :before or :after pseudo-element on the tab to make a ‘mask’ to hide the shadow where it overlaps the menu

2. Vertical pixel borders in a responsive design

3. Inner shadows on text

  • Unfortunately, it isn’t possible to do text-shadow: inset. You might try a text-shadow that is offset by 1 pixel but see that it doesn’t create the desired effect.
  • In some cases, the effect can be achieved by setting the :after pseudo-element content to the title attribute that you place on the element you want the inner text-shadow on. It’s a bit extra work but not really non-semantic. It isn’t feasible on large areas of text though, and the positioning can be too much of a hassle to tweak on things like buttons with icons, especially where some have icons and some don’t.

4. Bubbles/menus with a point all with an outline and/or shadow

Any other tricky design elements you’ve come across? How have you solved any of the above? Like what you see? Let your designer and developer friends know!

[image via StockVault]

Discover and implement your big idea with our product team

Get in Touch