So, here is my Aussi client’s new logo for his shed business. The client changed the name of his business from GardenShedsOnline to ShedBaron and hence a new logo had to be done. The greatest challenge with this logo was that it had to fit into the same design that I had worked out for this site while its name was different. Also since Client dealt with Garden Sheds which are high quality and symmetrical structures, I wanted to use a typeface that had sharp edges and which was symmetrical just like the sheds itself. Hence I used a combination of Pirulen and Sifonn typeface.
To bring out more association and relevance to the design I added a solid green shed shape behind the typeface and then to enhance it further added a stroke line starting with B and ending with N running in the shape of the top portion of the shed.
Next challenge was to make the logo more functional. I had an idea of having the typeface and the stroke line in the top section to lit up yellow on the hover state of the mouse but to achieve this was no easy task. After few hours of hustle with this, I finally figured out the way out for this. Read on to know how I achieved this effect.
So I made a cut out of this logo text and the stroke line into the background green shed shape. This essentially gave me a way to have a div in the background of this logo image that would turn yellow on hover state of this logo, but again how do you create a div that has pentagon shape to match with the logo shape itself.
The way around it was to create two div’s one for the top triangle section and shape it into the triangle using CSS and next div for the bottom rectangle section.
Now to target two div’s on hover state of its sibling, I used CSS’ adjacent sibling selector and general sibling selector.
Finally, mission accomplished and client Happy 🙂
You can view the site in staging on my subdomain at the following link: