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.
- Rounded corners
- Drop shadows
- 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.
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
- Use CSS3 box-sizing set to border-box
- Use pseudo-element with absolute positioning, which isn’t ideal but looks alright with thin borders of a pixel or two. (In some cases you could also use CSS3 columns if backwards compatibility is not an issue)
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
- Use :before and/or :after to make a triangle with the border trick
- Stack both pseudo-elements with the bottom one larger and a different colour to make it look like a border
- If the arrow point has a stroke/border and a drop-shadow/box-shadow, the drop-shadow will overlap the main bubble. May need to use an image in this case, again in the pseudo-element.
- Use the pseudo-element to make a square and rotate/transform it with CSS3 to get different triangle points. Use a negative z-index on it or the other pseudo-element as a mask.
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]