Looking for a nice CSS Shadow resource

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 1 week, 4 days ago.

Author Posts

balticsamurai

I’ve noticed that one of the things that make traditionally flat modern designs ‘shine’ is adding a bit of a nice shadow to some elements. I know where to find shadow ‘thingy’ in Microthemer but manually my shadows don’t look that sophisticated. So, I’ve got a few questions for ‘professionals’:

Is there a resource somewhere with some ‘CSS shadow’ samples/templates’ that we could copy/reuse?

If not, then how to properly ’emulate’ it from existing websites (I could build up my own database of ‘shadows’ and maybe some other elements. How do I ‘copy’ them (I suspect something like Firebug should be used) and how to properly apply to elements in Microthemer?

Thank you in advance.


Sebastian

Hey,

A had a quick Google for tasteful CSS text/box-shadow examples but didn’t find any real standout or in-depth resources. I can share some of my thoughts however. Just personal preference, but it may help you a bit.

Tip 1: Use a black RGBA color with low opacity
Always set the shadow color to jet black and then drag the opacity slider down to 0.2 or 0.3. That way, the background color will come through making the shadow look more natural. And it saves you having to match a darker version of the background color manually.

Tip 2: Less if often more
Shadow that covers a small area around the text or block and/or light contrast against the background (Tip 1) often makes for nicer looking shadow. The suggested shadow values in MT’s dropdown menu, which are fairly low, are designed to encourage this.

Tip 3: Use a reasonable blur to x/y ratio
For box-shadow I like to roughly double the values set for x/y for the blur property. I also think it looks nice to set blur to e.g. 4px and have x and y set to zero. I rarely if ever use spread. For text-shadow however, I sometimes set 1px or -1px for the x/y values and no blur at all. I will use blur if setting a larger text-shadow though.

Tip 4: Use em for text-shadow
This is a fairly advanced tip, but I think it’s nice for shadow to be proportional to font size. Most sites lower the font-size for mobile devices. I think it looks better if the text-shadow reduces with the text. So you might add the following style values for text-shadow:

x: 0
y: .035em
blur: .02em
color: rgba(0,0,0,.2)

Em values are tied to the font-size of the current element, so larger text will have a larger shadow.

Tip 5: Use rem for box-shadow
Blocks of content also tend to shrink on mobile. It’s nice if any shadow applied to those blocks reduces too. This is quite easy to achieve if you have set up some kind of responsive typography which adjusts the font-size of the root HTML element for different screen sizes. For instance, you might have something like this:

html {
  font-size: 1rem;
}

@media (min-width: 576px) {
  html {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 1.3rem;
  }
}

@media (min-width: 1100px) {
  html {
    font-size: 1.4rem;
  }
}

With the above code in place, you could set box-shadow to something like this:

x: .17rem, 
y: .17rem, 
blur: .25rem, 
color: rgba(0,0,0,.3)

The rem values will create larger shadows on wider screens because the font-size of the HTML element will be larger on larger screens (with the media queries above in place). The rem unit is tied to the HTML element’s font-size BTW.

So by using ems and rems in the text/box-shadow values your shadows can automatically adjust to font-size changes on the page.

I hope some of these tips are useful. Other users may disagree or have alternative/additional tips for implementing shadow.

Cheers,
Sebastian

P.S. in terms of reusing shadows, MT will support reusable presets in the not too distant future, but for now copying and pasting into the custom code editor (to the left of the Font group) might be best. In a few weeks custom code added to that editor will be interchangeable with the GUI fields. This will make copying and pasting styles in MT a bit easier.


balticsamurai

Sebastian, you are awesome. Thank you so much!


balticsamurai

Sebastian, if I may ask – how do you copy the element’s formatting (in this case ‘shadow’) from another website. Say, I see somewhere something I’d like to emulate. Probably need to use Google Inspect or Firebug for Firefox, I guess…


Sebastian

Yes, I recommend using right click (on the element with the box-shadow) > Inspect in Chrome. Then look at the Styles tab for the box-shadow property.

You can then just paste it into MT’s code editor, or copy the space separated styles into MT’s GUI fields.

If you need further assistance, please send me a link to the page with the shadow.

Thanks!
Sebastian

You must login or register to reply to this topic.