William CraigCEO & Co-Founder
- 7 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
CSS doesn’t always have to be serious business. In this article, you’ll see 25 fun, novel, and experimental CSS techniques and demonstrations. Note: some of the techniques and examples discussed here may not validate, cannot be rendered correctly by some browsers, and may not conform with standards-based design and development.
Many of the techniques shown here are for exploration only.
Transparent CSS Menu Drop-down
In this example, Román Cortés recreates Homer Simpson with HTML characters/text and CSS. Check out the animated adaptation by Ned Batchelder.
Design Detector created this house by using Div’s and styling them with CSS.
How to create light-weight drop shadows
DVD Recorder Remote
Design Detector creates a remove control using HTML elements and CSS.
Hovering over the pencil will draw a horizontal line.
CSS Text Shadows
Here is a pure CSS-based solution to applying drop-shadows to text. It involves duplicate text layed on top of one another, which isn’t good practice.
CSS Flashy Links
In this navigation bar example, hovering over a menu item causes the arrow on the left to zoom across the menu item.
This example showcases CSS image maps through a map. Hovering over hot spots reveals more information on the right.
CSS Sticky Footer
Here’s a footer that is fixed at the bottom of the web page, regardless of height.
It scales when the user resizes the font size using browser controls (at least for modern browsers it does).
CSS: Menu Descriptions
In this CSS-based menu, hovering over a menu item reveals more information about the menu item.
CSS Gradients Demo
This demonstration uses CSS-styled empty Div’s (not a good practice) and background-colors to mimic the effect of gradients.
WebFX is a full-service marketing agency with 1000+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more