Blog

Signals Blog

3D ChemWriter Buttons with CSS3 Gradients

ChemWriter is unique among client-side chemistry toolkits due to its tight integration with the browser. This makes many things possible that were previously not. For example, using simple CSS, ChemWriter's look can be be customized to a very high level of precision. This article shows one way to use CSS to give ChemWriter's buttons a 3D metal look without resorting to background image hacks.

CSS3 Gradients

If you've ever used background images as gradients you're probably aware of the limitations. The process of creating the right gradient is slow and error prone due to the need to match the dimensions and colors of a static image (created in an imaging program) to dynamic web content (created in a separate application). Once the site is live, changing these gradients requires revisiting the entire process anew.

CSS3 introduced new functionality around gradients that renders much of this busywork unnecessary.

ChemWriter CSS

The following CSS will streamline the look of ChemWriter's editor and give its buttons a more 3D metal appearance:

.chemwriter .editor {
  border: 1px solid #777777;
}
.chemwriter .editor .button {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#aaaaaa');
  /* Chrome and Safari */
  background-image: -webkit-gradient(linear, center bottom, center top, from(#aaaaaa), to(#dddddd));
  /* Firefox */
  background-image: -moz-linear-gradient(bottom, #aaaaaa, #dddddd);
  border: 1px solid #777777;
}
.chemwriter .editor .button .icon path {
  stroke: #444444;
}
.chemwriter .editor .button-hover, .chemwriter .editor .button-open {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#aaaaaa');
  background-image: -webkit-gradient(linear, center bottom, center top, from(#aaaaaa), to(#888888));
  background-image: -moz-linear-gradient(bottom, #aaaaaa, #888888);
}
.chemwriter .editor .button-disabled .icon path {
  stroke: #aaaaaa;
}
 

Notice the use of filter, which is how gradients are rendered on legacy Microsoft browsers.

Conclusions

CSS3 makes possible many new and powerful visual effects with relatively little effort. ChemWriter's focus on web standards makes it possible to take advantage of these new capabilities in a straightforward way.