This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Shadows in high contrast

Owned by Anastasia Cheetham
Last updated: Aug 24, 2012Version comment
1 min read

One of the goals of the high-contrast themes is to provide clarity for viewers. Shadows on text or other graphics can provide a very nice, subtle 3D effect, but this can be troublesome for some people. When designing styles for high-contrast, it's important to remember to deliberately remove such shadows, as illustrated in the example below.

<button class="idi-prefs-button">preferences</button>

This button uses a white drop shadow on the black text to provide an elegant embossed look:

But such a shadow would be inappropriate for a high contrast theme. In this example (the yellow-on-black theme in this case), the text shadow is removed completely:

.idi-prefs-button {
    color: #000000;
    text-shadow: 1px 1px 0 #FFFFFF;
    background-color: #E5E5E5;
    background-image: url("images/preferences.png");
    background-position: 0.4em 50%;
    background-repeat: no-repeat;
    width: 8em;
}
.fl-theme-yb .idi-prefs-button {
    text-shadow: none;
    border: 1px solid yellow;
    background-image: url("images/preferences-yellow.png");
}