Styling a logo and its associated text using HTML and CSS

While this is a relatively simple topic I thought it would still be valuable for someone out there who’s trying to do something similar for their web-site or -application.

With v4.2 of the Forge viewer (and quite possibly before, but this was the first version in which I saw the change), the default highlighting of UI elements changed from a white glow to a colour-change to deep sky blue (#00bfff). I wanted to apply this same effect throughout the Dasher 360 UI, including the logo and text.

Dasher 360 and its logo

In Dasher 360 the logo – a leaping deer – is separate from the text that goes with it. So part of the trickiness, here, was to have them appear as if they were the same object. As the user hovers over either component of the logo, the whole thing should turn blue. The easiest approach would probably be to create a composite logo – with the icon and the text included – and then have a blue version of this logo be swapped in on hover. There are lots of reasons not to do this, though:…

Read more