Groove Interactive CSS
July 9, 2008
Just writing to show off some of the presentation layer css used in the grooveinteractive.com website. The website design is based on static design mock-up created in Adobe Illustrator. This design is now created on the grooveinteractive.com website by applying custom CSS to the XHTML mark-up created by a new Drupal 6.0 theme.
The presentation layer started with exporting the groove interactive logo from Adobe Illustrator as a transparent png-24. You can see a preview of the logo. The light green background was then sized and placed underneath the image using css background color.
CSS was used to extend the lime green background color across the width of the body column. The background color was also added using css to the left navigation column. Attached is a screenshot showing just the css background colors.
The shadows, promo image, and the lime green header extending across the entire width of the page were created using background images.
In the end, CSS was used to create all of the presentation on the site. This separates the content from the presentation as well as allows for increased accessibility and compatibility with many browsing appliances.
Post new comment