49 outstanding examples of CSS

From bespoke agency sites to online shops, you'll find tons of web design inspiration in these great examples of CSS.

Here we list 49 great examples of CSS sites that will provide a burst of web design inspiration...
It's amazing what can be done with CSS these days. Support for the latest CSS3 properties is strong in the latest versions of all the major browsers - even Internet Explorer - and the possibilities for typography, animation and interactivity have never been greater. But finding web design inspiration can be tricky.

At its core the secret to a great website is not about showing off with slick visuals and whizz-bang features, but lies in creating a great experience for users through a layout and navigation that guide them to where they want to go quickly and effortlessly.

That said, if it can look beautiful as well, that's the icing on the cake.

01. BucketListly

Bucketlistly enables travellers and adventurers share their stories and encourage others to have their own adventures

BucketListly is a community that sets out to help users unlock achievements in real life while inspiring others to do the same. Built using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers and adventurers share their stories with their friends on the site as well as their connected social networks.

When a user shares a story on BucketListly, the platform automatically tracks what, when and where they've completed that life goal, letting them earn special badges and displaying all that data in a beautiful timeline and map.

02. 96 Elephants

96 Elephants is named after the number of elephants killed every day in Africa

US-based Viget Labs has created an awareness-focused web experience to enlist support for the Wildlife Conservation Society's mission to protect African elephants. Its most recent campaign is 96 Elephants, so-called because that's how many elephants are killed every day in Africa.

The educational narrative is told through a series of single-page chapters, each detailing the very real complications at play in the ongoing effort to end the illegal act of killing elephants for their tusks.

Despite the primary goal of driving sign-ups for a petition, the Viget team has done an artful job of balancing the immediacy that the omnipresent call-to-action presents against the more emotionally compelling, story-driven content.

Front and centre is the haunting art direction that compels you to stop and confront the emotional mission. The beautiful, edge-to-edge photography and magazine-like layout made the effort to build it responsively a challenge. Instead of starting with the desktop, the site was built mobile-first. That allowed the design decisions to be purposefully considered for small-screens instead of acting as a watered down proxy of the desktop experience.

03. Merge Records

Merge's responsive ecommerce site was built to match the quality of its artists

With bands like Arcade Fire, Superchunk and The Mountain Goats on the roster, Merge Records in Durham, North Carolina, looked to local digital partner Newfangled to build a world-class ecommerce experience to match the quality of its artists.

Built on NewfangledCMS, Newfangled's proprietary PHP-based CMS, with HTML5 and CSS3, the site responds beautifully to different device sizes. The new system is now automated to ensure that the label's assets are all centrally managed and available. Newfangled COO Chris Butler says,
"Whenever a product is added, we have to figure out how this corresponds to a piece of physical inventory that sits in a different database, and how it accounts for a piece of digital inventory that sits in another system. We had to figure out those logistics." With numerous different database calls on each page, the order of priority of the data was important to get right.

04. Ticketleap Events

Ticketleap's events page is designed to be more than an online cash register

The Philadelphia-based company Ticketleap helps event creators build landing pages for audiences to find out more information or buy tickets. Designed and built by the Ticketleap team using HTML5 and CSS, the redesigned event pages bring to life an event landing page that's beautiful, responsive and doesn't just act as an online cash register.

By the end of 2013, Ticketleap's mobile page views had surpassed desktop, which allowed the team to focus on small screens first, ensuring the majority of their audience received a better experience.

"I told my team I didn't want to see any desktop mock ups until we had something we loved on mobile. We think it paid off," says Beah Burger-Lenehan, VP of product. Ticketleap minimised any design decisions that made the page look overly templated to evoke a feeling that was more human and less transactional; fewer social posts, a missing logo, or events with different image styles could negatively impact the design. The design and development was honed through tight collaboration, ensuring any gaps in content minimised the effects on the template. Performance was important. Intentionally avoiding JavaScript for speed and reliability issues, the new event templates also push the limits of CSS.

05. Girls' Voices

Girls' Voices is a digital version of an installation from the Women Deliver conference

Zone have produced an interactive tree using WebGL and a custom physics engine. The tree features the voices of 500 girls living in poverty around the world, and asks them their hopes and dreams. It's a digital version of an installation from the Women Deliver conference in Kuala Lumpur, Malaysia.
Rob Reng, technology director at Zone, explains that the Girl Effect website is built with Umbraco, with the voices sections being "content managed like any other, so the voice tags are nodes within our CMS that can then be added, edited and deleted like any other content".

The tree itself is built with WebGL and the basic structure of the code follows a typical game engine where, as Reng details, "a main loop is constantly running, and an object's new place in the environment is calculated by re-creating the effect of forces such as gravity, velocity and friction, using Bézier curves and applying the objects location using CSS3 3D transforms". Dealing with older browsers proved somewhat tricky, so much so that there are effectively three versions of the site: the 'full' WebGL 3D version, an SVG version and a noJS version.

06. Pencil

Both the Pencil and its site blend advanced technology and artisan craft

From the team behind the incredible Paper iPad app comes Pencil, a new stylus designed specifically for use with Paper. The product is described as a blend of advanced technology and artisan craft, which is just like its website.

Built using the trusty old web stack of HTML, CSS and JavaScript, the responsive Pencil site brings the product to life with bold imagery, slick animations and perfectly-crafted copy. HTML5 elements are used throughout as are a number of CSS3 properties and animations plus web fonts.

As you scroll, the stylus opens to reveal its inner workings, from the Bluetooth chip, to the battery and 14kt gold-plated sensors in its tip giving the user the feeling that they're purchasing something special. Further down, you receive a full 360-degree view of the product that moves with you as you scroll.

Lastly, the site is fully responsive and, although some of the interactive elements aren't seen on mobile, it doesn't detract from the experience or the desire to purchase.

07. Mijlo Essentials

Mijlo's Essentials site showcases the items creatives couldn't live without

Essentials was created to complement Daniel Eckler's Kickstarter campaign for a better backpack. It worked. With 25 days to go, the campaign had received over $53,000 CAD in funding compared to the goal of $20,000.

The backpack developed by Mijlo is designed to be sustainable, timeless and simple. The Essentials website focuses on these traits as well. Eckler notes that, "it was important to us to come up with a creative way to showcase the amazing contributions from our talented friends."

So they spoke to their friends and asked a hundred global creatives to take photos of their essentials, the items they couldn't live without. The caveat was their style had to be as timeless as the bag they pack it in.

The site is responsive and built with HTML5, CSS3, web fonts and, of course, JavaScript. Data-* attributes are used to dynamically pull data into the page to ensure the user never has to leave the page but without the overhead of the information all residing in the DOM.

08. Envoy

CSS transitions are used to help aid in the Envoy demonstration

Envoy, a product that focuses on visitor registration at your office, offers an elegant iPad-based interface for collecting names, capturing signatures and printing visitor badges on the spot. For the website that promotes the app, the "primary goal was to allow our customers to visualise how their own visitors can experience Envoy at their offices," explains co-founder and designer Vítor Lourenço. "We decided an interactive demo would be the most visually engaging way to demonstrate this."

To achieve that, the site displays the app's functionality and screen states atop an iPad mockup. As you scroll through the one-page site, the states update in the demo. CSS transitions are used to help aid in the demonstration, enhancing the experience without ever getting in the way of the content.

"We spent many hours working on tiny details," co-founder and engineer Larry Gadea adds. "We love the way the visitor's signature draws itself when you scroll past the NDA screen, or how the visitor badge gets printed at the end of the flow."

09. O Music Awards

Happy Cog used many different CSS properties to achieve the look for the O Music Awards site

MTV's site supporting its fourth online music awards is an amazing piece of web design inspiration. Built by Happy Cog, it contains many different CSS properties used together to achieve the look.

“We had a very energetic and unique design to build; it was a lot of fun to use CSS in some interesting ways that in most typical projects would not be required,” says developer Stephen Caver.
Some CSS3 enhancements you'll see throughout are gradients, transitions, and opacity. Surrounding the rounded images, there is a border-style of dotted, cleverly paired with border-radius to create a dotted circle that brings a modern look to a somewhat dated CSS property.

The site is responsive to boot, even on some of the pages with more sophisticated layouts. “There were some layout positioning challenges that we worked through to get that to work,” explains Caver. “It's always satisfying to successfully build something that is a complete mystery at first.”

10. SquareSpace

CSS transforms and animations are used to enhance the designs and interactions on SquareSpace

Squarespace is a powerful, all-in-one website creator with a multitude of customisation options enabling users to create unique templates – and greets you with a site that's fun to interact with and navigate.

“The Squarespace design team conceptualised and prototyped a few different navigations before going with the current design,” says frontend developer Kenneth Cachia. “The final version allows us to display several links as a group instead of scattering them across the page.”

CSS transforms and animations are used to enhance the designs and interactions. The use of the beautiful Hoefler & Frere-Jones fonts, Gotham and Chronicle, provides a classy, professional appeal. Cachia says the vision of the site includes “a minimal aesthetic that focuses on clean layouts, typography, iconography, and striking photography”.

11. Rent.com

Rent.com, a US apartment rental website, used to use separate CSS files for desktop and mobile users, and native apps for iOS, BlackBerry and Android.

The company redesigned after hearing Scott Jehl of Filament Group speaking about RWD – it put a universal solution in place, resulting in a wonderfully easy-to-use responsive experience.

"From a design perspective, we focused on bringing photography and content to the centre, with large thumbnails on results pages and immersive galleries on detail pages," says Filament Group's Todd Parker.

The design is a great piece of web design inspiration - clean, crisp, and makes great use of white space: an appropriate design decision that helps users focus on the content - the important part of house-hunting.

You'll find nice uses of CSS gradients, opacity adjustments and animations, and the Proxima Nova typeface embedded. "To keep it uncluttered we used a lot of information layering, to have the experience unfold as you explore the site," Parker adds.

12. MoreSleep

MoreSleep, a creative agency from Berlin, has a bold site. “Our goal was to showcase three projects that represent our expertise, instead of showing all the work we've done so far,” says technical director Torsten Bergler.

Large font-size values, neat scrolling effects and a red-heavy, contrasted colour scheme make this site stand out. “What's unique is the work's presentation: visualising the project process, guiding visitors through it and telling a story about the work we've done,” says art direction lead Stefan Schuster.

CSS transitions make it smoother to navigate through pages and content. Background-size properties are used to control the scaling of images at different sizes. Even the newsletter signup form is styled to match the clean look and feel.

13. Thankful Registry

Thankful Registry enables couples to create a unique, personalised wedding registry from any gifts they desire from anywhere on the internet. The site was created by Crush + Lovely; Jeff Schram and Michael Phillips from its frontend team wanted the CSS to be as beautiful as the design. They took time carefully planning their SCSS structure for this application.

“In a multi-developer environment, it's critical the code be organised, easily traversable and thoroughly commented,” explains Phillips. The hard work shows in the site's aesthetic with strong typography and large, powerful images. The team didn't want to obscure these on any viewport and risk losing their significance.

“We created a responsive system that slides down the entire page to reveal the main nav options. This allowed us to keep focus on the gorgeous imagery and also give users a unique responsive experience,” says Schram.

14. CSS Creatures

Examples of CSS — CSS Creatures are generated from 100% all-natural HTML5 and freshly-squeezed CSS3. Make your own today!

We all know that working in the design industry can sometimes become monotonous. So, take some time out from your busy schedule and have some creative fun with this cute little CSS project from Pittsburgh-based web designer and developer Bennett Feely.

CSS Creatures allows the user to design, create and animate their very own web-based friend. Like the sound of that? All you have to do is send a tweet to @CSSCreatures with your preferred colour, personality and features. Your CSS creature then appears on the site in under 25 seconds!

15. Windows of New York

A reminder to never stop looking up, Windows of New York is a weekly illustrated collection celebrating something away from the buzz of New York City: the windows. It's the personal project of graphic designer José Guizar, who explains that the site is “an ode to architecture: part a self-challenge to explore the city, and part a reason to push myself to develop a very personal style of illustration.”

16. Life in my Shoes

Life In My Shoes is a powerful multi-platform campaign aimed at
young people that challenges the fear and misunderstanding that surrounds HIV. London-based digital agency Traffic was briefed with developing a website that would appeal to a youth audience.

The brand font, Houshka Rounded Medium, was implemented using font-face to give the website a fresh look and feel. Decorative images and dramatic yellow accents throughout provide an alluring aesthetic.

The “About Us” page features a lively parallax effect that was adjusted for tablets and smartphones. “We wrote a media query for these devices that changes the background-attachment from fixed to scroll and sets the individual background-positions so that the images sit in the right place,” explained the Traffic team.

17. Solo

Solo is an all-in-one project management tool geared towards use by freelancers. Cost effective and easy to use, the application combines great functionality, usability and beautiful design.

The site promoting the product is full of CSS3 awesomeness. “I decided to use HTML5 and CSS3 from the offset, catering only for modern web browsers,” explains Jerome Iveson, designer of the app. “Only three per cent of the visitors to our site use Internet Explorer. Because our target market don't seem to use it, there seemed little reason for Solo to support it.”

You'll see these CSS rules in action throughout this design, which makes project management more playful with a plethora of colourful CSS box shadows. Fonts like Clarendon and Bryant provide a nice balance of sophistication and fun.

Resizing the site or viewing it on a mobile phone allows you to see the layout adapt for different screen sizes and resolutions. “I quite liked getting stuck into the media queries side of things. I find that very interesting from a design perspective,” says Iveson.

18. Form Follows Function

Form Follows Function (FFF) is a beautifully designed showcase of HTML5 and CSS experiments by Korean developer Jongmin Kim who works as an interactive developer at Firstborn Multimedia in New York.

Kim explains the name of his site reflects his aim to always pursue a "minus design rather than plus designs" and keep in mind that form follows function. He says his style is minimal and uses the golden ratio as well as interesting typography. FFF was made "for fun" and took Kim three weeks to create including spending his holiday working on it.

19. Branch

Branch is a site that aims to provide a new method of communication, combining the intimacy of a dinner table conversation with the openness of the internet.

The homepage features some super neat modules that utilise CSS to achieve the look. Check out the avatars and icons positioned like a rotary telephone - a composition accomplished by rotate transforms and transitions. It uses neat CSS3 effects in other areas as well.

20. The Gently Mad

The Gently Mad is a topic-agnostic podcast about web creators. Adam Clark, the mind behind it, stepped away from a traditional blog layout when designing it to create something with a bit more impact.

The large header and well-designed episode list conveys that there's a personal touch to this design.

Clark started with 'more crazy' CSS3 transitions and fades, but removed them, he tells us. "I felt the design choices I had made (colour, layout, typography) worked much better just left alone," he says.

21. Amazee Labs

Creating fresh websites and community solutions, Amazee Labs at bring your brand to the online world based on the modern open source framework Drupal. With competence and confidence, their own website is a beautiful example of CSS.

Already creating sites for television networks, digital agencies, charities and businesses, it's clear that their site has impressed almost everyone. We couldn't agree more.

22. A&W

CSS rotation transforms are used on header text, giving the A&W site a fun print-menu feel

The group at Cornett IMS wanted a site for A&W that was more than a logo, burgers and root beer.

"Our love for A&W had to do a lot with memories shared in the restaurants in our hometowns so we wanted to transcend the uniqueness of each store, connecting a new generation of fans with their local A&W," explains chief creative officer David Coomer on the site's purpose.

The use of @font-face to serve Metroscript and Century Gothic fonts creates a custom, enjoyable type system. CSS rotation transforms are used on header text, giving the site a fun print-menu feel.

23. Moutn.ai/n

Kootenay Mountain Culture Productions has created Mount.ai/n, an online magazine that focuses on 'regional stories exploring the interplay between people, their culture, and their environment'.

"We didn't want this to feel like browsing a website: more just a place to get lost in the content," said Kris McLaughlin, goaltender/technical director at digital agency The Vacuum. "You'll be hard pressed to find sidebars, related content blocks or other traditional web elements. It's all about the story."

The responsive design showcases beautiful photography and really utilises whitespace to highlight the content. McLaughlin adds: "To pull off a minimal design, it's important to nail down all the small details or the project can quickly lose its way."

24. Women & Tech

The design scales up beautifully on mobile displays

From the moment you load Women & Tech, you're drawn in by its large photos - and a design that scales up wonderfully for bigger displays. For smaller screens, the legibility of the type in the interview content hasn't been forgotten. "We decided early on in the project's timeline to design and develop the site using a responsive approach,"” says designer/developer Mark Staplehurst who co-designed the site with his wife Cassie McDaniel.

"Inspired by work such as The Great Discontent and Ian Coyle's Edits Quarterly we made it a point to put significant emphasis on the art direction and design of the site," Staplehurst tells us.

"Large format full browser-width images, animated table of contents, slab-serif type and a bold colour scheme help bring the interviews to life as well as separate us from other women-focused groups."

25. Conservation Committee

Conservation Committee teaches important conservation issues. Designed by London-based company Epitype, the site is a one-page, horizontally scrolling experience.

The side scroll is emphasised by overlapping full screen background images. "The site makes extensive use of background-size:cover for its full-screen images, and gentle amounts of box-shadow to give a sense of depth and lightness," explains Martin Roach, group creative director.

The team built the site from concept to delivery in under a week by utilising some of the great things CSS has to offer, such as box-sizing properties and CSS precompilers.

"With a site like this (full-size backgrounds, horizontal scrolling, pseudo-parallaxes, video lightboxes, multi-platform requirements, Ajax functions), that wouldn't have been possible before CSS3 and Sass," says Roach.

26. Nolowene Nowak

Web designer and illustrator Nolowene Nowak has created a fun online portfolio - a great example of CSS being used to brilliant effect. If you scroll down and check out the timeline section, you will notice that the CSS-driven layout intelligently specifies basic rules to create a module that changes from a horizontal to vertical layout on smaller screens.

The site is as enjoyable to use as it was to create: "It was a really rich experience giving me the ability to create something unique that was simply me," says developer Christophe Dumont. "We wanted to offer the visitor the same experience as when he was a kid discovering a new toy."

During development, Dumont used Zurb's Foundation: a responsive CSS framework built with Sass. “Its support really makes the responsive design come to life,” he says.

27. Caava Design

The website draws users in with hints of scrolling animation and parallax functions

Design studio Caava has a beautiful new site. Users are drawn in by hints of scrolling animation and parallax functions, while the main focus stays on the portfolio. "We tried to provide a fresh and unique linear experience without beating people over the head with it," explains Caava owner Cody Small.

Scrolling through the site, arrows that tie the different sections together animate top and left positions, keeping the experience cohesive. "Since we have a lot of animated flare going on, it took some time to make it feel natural and supportive to the design," says developer Brandon Lavigne.

The arrows are consistent throughout the design, such as when exploring the work area. Looking closely, you'll see that they're created with CSS borders and transforms. This is super neat and useful, since projects have different colour schemes, and the arrow colours can then be easily changed with CSS properties to match.

28. Fitbit

Fitbit makes activity trackers and scales to record activity, monitor sleep, and document your body weight and fat. This information is wirelessly published to Fitbit, where users can see graphs, set goals, and compete and share their progress with others. "Our mission is nothing short of using technology to make the world a healthier place!" remarks developer Biagio Azzarelli.

The site design is bright and lively. Icons and colourful statistic graphics help bring informative snippets to life without boring the users. The well-used grid should make it easy to transform the site into a fluid layout in the future.

Azzarelli says he enjoyed developing the site based on user analytics. "As our user base continues to adopt A-grade browsers, we are able to take advantage of the enjoyable parts of CSS3 with acceptable degradation in IE7 and 8."

29. Lore

Lore, a social platform for learning, provides a free place for instructors and students to discuss and share what they're learning and what inspires them. It's a well-organised, easy-to-use beauty.

The main navigation has a neat animation on hover that provides just the right amount of fun. "I still scrub my mouse across the icons on the homepage, just for the ring effect," admits Lore's creative director Aaron Carámbula.

Carámbula utilised Sass to aid in the CSS development. "Mixins and constants map so well to how I think about design that it's shortened the cycle from sketch to code," he explains. "That makes adding the finishing touches – taking advantage of CSS3 to make things come alive – all the more satisfying because it comes far sooner in the process."

30. Mammothbooth

The Detroit based artists of MammothReach wanted to create the raddest photobooth the world has seen and with that, the MammothBooth website was born.

"We desired a site that was fluid, instant, and fun," remembers designer/developer Nick Keebaugh, "and that's exactly how our booth is. All in all, we wanted a completely custom feel throughout the site that mirrored who we are as a company and what our product does at its core. The website is the online extension of the MammothBooth through and through."

MammothReach utilised the rotate transform property with a large spiralling burst image that's in constant rotation. Fun content slides in as you visit the different sections of the site with animated style properties. The playful Arvil Sans font is a great fit for the aesthetic and is available as a 'name your price' font from the Lost Type Co-op.

31. Lab Partners

Art and design studio Lab Partners, run by husband and wife team Ryan Meis and Sarah Labieniec, has launched a colourful and decorative website which is one of the best examples of CSS around.

The attention to detail shines through for each page. The work section features a curated layout, which allows the portfolio to feel especially original. The project thumbnails have a large hover area that take advantage of the opacity property by clearly distinguishing the hover state. The Shop section is running on the Big Cartel shopping cart, but feels like an integrated part of the site with custom CSS applied to the elements.

"The web truly feels like one of the ultimate combinations of form and functionality," observes Meis. He goes on to explain that it was both enjoyable and challenging to find a balance between the two. "In the end every problem turned out to be an opportunity to create a solution that I hadn't originally thought of."

32. Pizza Brain

Examples of CSS don't get much better than this! Founded by Brian Dwyer, Pizza Brain is the world's first Pizza Museum and restaurant. The website promotes press releases and a blog describing the progress of the endeavour and features branding designed by Michael Almquist.

Fonts Pacifico Regular and Bebas Neue are paired with a warm, pizza-like colour palette creating a friendly aesthetic that's easy to read while still exciting and fun. "That orange, it's beautiful and it really sets the stage for the content," says the developer, Arjun Mehta.

A variety of rounded corners and opacity effects round out this clean look. “To have each post on its own rounded rectangle content section was actually borrowing from the visual language found on Pizza Brain's business cards,” adds Mehta. Fully responsive as well, the site looks great on smaller layouts.

One of the top examples of CSS in action - and keep your eye on the site as more is expected to come. “I'm excited about how the site might grow, and get further refined and built out as this amazing venture becomes realised over time,” says Mehta.

33. Postable

Aimed primarily at visitors looking to send wedding invitations and holiday cards, or for those simply wanting an online address book, Postable provides an easy way to capture mailing addresses.

“Postable has an incredibly playful look to it, especially for a web application, and I wanted to stay true to those designs,” says frontend developer, Kevin Kneife. From envelope-inspired striped borders, to fun background textures, to the robustly rounded Omnes Pro font, the site instantly makes gathering addresses less of a drag.

Fun and useful illustrations are used throughout. Rounded corners, ribbons and clever hover states keep the site engagement entertaining. It's one of the best examples of CSS transforms we've seen, with them being used to update the rotate value of a background image, drawing users in to the instructions on how easy the site is to use.

After creating an account, adding a contact is accomplished via a simple-to-use form that features pure CSS select boxes that Kneife fully crafted. He reveals, “This involved masking the select boxes on the forms with an outer div, adding transparency, and the use of -webkit-appearance. The result is a box that looks good on all browsers and degrades gracefully.”

34. Envy Labs

Web development shop Envy Labs redesigned its site to reflect the company's growth, an internal task that can be daunting. "As many in the industry can relate, we're our own worst client," admits frontend developer Nick Walsh. "After many unfinished concepts, and a week long sprint of final production, the site now conveys Envy Labs' culture and values."

The site highlights slick web fonts, CSS transitions on hover, and CSS-driven shapes. The delightful illustrations by Justin Mezzell round out the look. The homepage hero has drawings with half-circle bases that lend themselves to a circular motion on transition.

"The challenge stemmed from making that motion scale responsively; a hefty bit of tweaking percentages in transform-origin was required for lining things up across all screen sizes," says Walsh of the unique effect. The team also used MVCSS, a Sass-based MVC CSS architecture to aid in the build.

35. Rdio

Last year music subscription service Rdio completed a beautiful redesign of its web presence. “We really wanted to inject some life into the way we market Rdio to potential subscribers,” explains lead designer Ryan SIms. “We abandoned lineups of devices on a reflective surface in favour of showing the moments Rdio fits into your life.”

The site features elegant hovers emphasising the content you are viewing. Size changes when you focus on an album cover area provide a clear reading experience. Shadows applied to the edges of the hero area on mouse interaction enable users to see how to navigate the slideshow.

Developer Jason Norris adds that they were “quite pleased with the way CSS3 transitions worked out for adding subtle animations to the device images and text on the homepage hero stripe. They were a breeze to implement, look great and degrade nicely.” One of the ever-increasing examples of CSS being used to engage users and turn navigation from a chore into a joy.

36. Erskine

Nottingham-based creative agency Erskine has redesigned the website showcasing its work. The design features a well-planned hero area dedicated to the agency's output. At larger resolutions, previews display in a well-organised grid; at smaller ones, content moves into a more size-appropriate carousel.

The team developed a SASS mixin to create a fluid grid by zooming and cropping each of the images in the gallery. Frontend web developer Chris Rowe explains: "Piggybacking Swipe we altered the measurement and pagination logic to behave using [percent] offsets rather than pixels giving us a truly fluid gallery/carousel that adapts best fit its environment."

The team kept screen sizes in the forefront of their development from the start. "We started with a completely fluid layout in a mobile first approach, adding EM-based media queries to ensure breakpoints are appropriate for the layout regardless of the font size."

37. Robby Leonardi

Designer Robby Leonardi's home features colourful illustrations and cartoon styles, bringing a cheerful personality to the work. As Leonardi puts it, "It is always a good thing to make people smile, and I think this website will do just that."

It's one of the great examples of CSS being used to create amazing visuals. Background images are layered to create neat horizontal parallax effects in the header area. Down the page, CSS rotation transforms are used to move the gears on the sides of the viewing area. Portfolio pieces are framed within wooden windows that have animated hovers.

The wooden blocks were made from Leonardi's rendering of 3D models. He explains, “I combined all of those renderings into a single image, and change the CSS left property whenever the user scrolls the page. It's pretty surprising that a simple CSS trick can produce such a good effect!”

38. Libor Zezulka

The one-page website of Libor Zezulka is a clean and clever personal portfolio set among gradients that pop and text that begs to be read, thanks to the smart usage of CSS text-shadows.

Lead designer and frontend developer Martin Pospisil of Madeo enjoyed working on the site. “[We had] the freedom to play with the design and technology,” he explains. This shows in the fun factor of the site. The design is simple, yet effective, in that the sections are clearly distinguishable. Pospisil reckons that “the power lies in the icons and colour combinations”.

Another unique touch are the lightbox pop-ups. The buttons on this site are set apart as actionable by the shadow imaging underneath. The close button is offset a bit from the box, providing an easy-to-use interface.

39. 826 Seattle

826 Seattle is part of the 826 family of non-profit tutoring, writing and publishing centres founded by author Dave Eggers. Its programmes are designed to improve creative and expository writing skills. The site is just as wonderful as their mission, providing a beautiful, easy to navigate experience with a smart design.

“During the planning stages we discussed how we could strike a balance between creating a consistent grid and template system that would be driven by efficient CSS,” explains developer Brett Burwell of Static Interactive. “I often see CMS-based sites that force their content into restrictive templates. We like to avoid that.”

Avoid it they have, with delightful hover states utilising great examples of CSS transitions and smart image masks to create photographic shapes and classy font choices. Burwell adds, "I'm most proud of the typographic system that underpins the design of the site. Kyle [Eertmoed] from Knoed Creative came up with a unique mix of fonts and sprinkled in lots of wonderful typographic details."

40. Emporium Pies

The Emporium PIes website will make you want to try all of them

"The Emporium Pies website has one job: to make you want to eat more pie," Kyle Turman, interactive director at Foundry Collective asserts. And boy, is he telling the truth. The well-designed responsive site of the Dallas-based pie and coffee shop will make you hungry. Really hungry.

"Operations director Paul Wilkes captured some really excellent shots of the pies, and we prioritised them in the hierarchy of the design as much as possible," Turman goes on. "We thought it was important to let the pies speak for themselves, and not fill the site with a ton of rambling copy."

Check out the hover effects on the Pies page. It uses CSS 3D transforms combined with the backface-visibility property on the images of the pies to reveal the name and more information about the dessert.

41. Future of Car Sharing

Future of Car Sharing, a collaboration between Collaborative Fund and Hyperakt with support from Startup America Partnership, is packed with information on the increasingly popular alternative to car ownership. Deciphering the differences of peer-to-peer, business-to- consumer and not-for-profit car sharing is made easy by this charming horizontal scrolling site.

“Right from the start a decision was made to push this piece as far as we could,” advises Simon Corry, information architect at Hyperakt. “This meant that, while we were providing backwards compatibility for older browsers where possible, the emphasis was on testing the limits of CSS3 properties. I've always been a fan of video games and with the current level of browser support for CSS3 I was able to enjoy that level of animation and engineering through the CSS.

“The beauty of CSS3 is in its simplicity, making it a perfect language for any creative,” says Corry.

42. Fine Goods

Designed and developed by Rogie King, Fine Goods is a boutique goods market aiming to provide quality icons, resources, and physical goods to designers.

The playful site uses an assemblage of CSS properties to craft this custom design. The price tags contain HTML text, rotated with transforms. Links use images to create unique noise-pattered underlines. Even the scrollbar is customised with WebKit-specific properties.

“I wanted the site to feel as custom as the goods featured on it, so I used CSS to make everything feel original,” explains King.

Be sure to hover over the category links, designed as drawers. “I wanted each drawer to be different, so when multiple backgrounds are supported I changed the position of the drawer imperfections so that the little nicks in the drawers were different,” adds King. “It was all so fun when I got them to work ... now I just fiddle with them all the time.” One of the best examples of CSS being used for playful design.

43. Station Street Hot Dogs

You might be in the mood for hot dogs after visiting the Station Street Hot Dogs site, a recently reopened hot dog shop in Pittsburgh, Pennsylvania. Besides showcasing the delectable menu, this one page site has a bold design using border-radius, striking colours and delightful font choices.
“The CSS echoed our desire for simplicity. While the site is responsive, it doesn't try to do too much,” explains Full Stop Interactive co-founder/ developer, Nathan Peretic.

With over 25 per cent of visitors viewing the site from mobile devices, Full Stop made sure the site holds up at a variety of resolutions. One way they did this was to take advantage of the box- sizing property.

Peretic reveals, “[I used] border-box to combine a fixed amount of padding with a flexible container. Our yellow quick info box at the top of the page allows the navigation to take up a constant amount of space while the relevant text expands and contracts with what's left over.”

44. Life in Greenville

Life in Greenville takes a look at living and working in Greenville, South Carolina. “All of us at CoWork love Greenville and wanted to create a website that would help people understand why,” says lead developer Sean Gaffney.

The site greets you with Kulturista typeface at an attention-grabbing 53px font size on top of a full-width, responsive hero image. The clean design keeps you engaged and wanting to learn more with the easily, accessible content. The slightly animated logo on hover provides some joy as well.

The team took advantage of the Skeleton boilerplate to help build the styles. “Skeleton provides a really nice base set of widths to design for, so it just came down to tweaking a few items in the layout for each screen size,” says Gaffney.

45. Dangers of Fracking

Dangers of Fracking is a colourful and engaging web infographic that explains the controversial process of natural gas fracturing. The one-page experience implements parallax scrolling to educate visitors to the site, and is one of the top examples of CSS being used for infographics.

“Since natural gas drilling is a very complex system and process, I knew I wanted to create a website that employed CSS to create a linear storyline that would be easy to follow,” explains Linda Dong, the sole site creator.

As resources and byproducts are introduced, CSS positioning on those elements are changed from absolute to fixed, which recreates feelings of collecting materials.

This was not an easy feat. “I wish I had a topographical map of all the layers that are involved in this website,” sighs Dong. “Since many of the elements disappear and resurface later on the page, keeping track of every element's z-index and the z-index of their parent element was a real challenge.”

46. Telecast

iOS app Telecast packs in neat CSS uses to bring users three five-minute packages of highly-curated video daily

Telecast is an iOS app that brings users three five-minute packages of highly-curated video daily, cutting through the saturated digital video world. The promo site is an elevator pitch for the product, and though the site is small and to the point, it packs in neat CSS uses.

The first thing you notice is the gradient effect at the top of the large hero images. The colouring is created with CSS gradients applied to a masking layer with its opacity reduced to let the photo behind show through. The colours were created by graphic designer and illustrator Ed Nacional.

“The decision to fix the hero image background and fade it out as the iPad scrolled up began as a code accident we thought looked cool,” reveals Grant Custer, the interaction designer and coder. He adds that such accidents are a benefit of the combination between design and code. Be sure to check out the logo in the fixed bottom navigation, which is also controlled with styling. Custer adds, “The Telecast logo itself was basically begging to be recreated in CSS.” So it was.

47. True Fish Tales

True Fish Tales really hooks you in. It plays on the idea that fishermen are famous for telling tall stories by bringing together some amazing 'true tales' of the monsters that lurk beneath the sea. What sets it apart is its smooth and user-friendly interactivity, which makes discovering the content a fun and entertaining experience.

The infographic was put together by Brian Maier and Mark Shelton of Kentucky agency DBS>Interactive as part of an ongoing effort to add fresh content to United Marine website.
Maier and Shelton used a combination of CSS3 and JavaScript to build the infographic. "Many of the animations and graphics are handled with CSS3," Lewis explains, "but they used JavaScript in some places to accommodate for older browsers that do not yet support this technology.

48. Station Four

Web agency Station Four has undergone a rebranding process and designed a new website to better its personality and brand. "We started conceiving the new website around the idea of showing, not telling, potential clients what we can do," explains Station Four creative director and co-owner Christopher Olberding.

Consequently the new homepage uses a large, featured work banner to show off Station Four's most recent work.

The 'Expertise' page has an interesting navigation design: it uses large circle imagery as links. These take advantage of border-radius properties to achieve the look, and apply animations on them as well.

49. RED

When big name digital agency RED Interactive redesigned its site, its goal was "to give the audience a better sense of who we are as a company," explains developer Richard Herrera. "And a big part of who we are revolves around what we are doing on the technology side."

Dominated by bright and colourful photography and with some fun transitions and animations to brighten the visitor's journey, the responsive site was built using CSS3, HTML5 and jQuery.

"We made extensive use of the History API for state management and tried to make sure every crevasse of our site was accessible via hard link," adds Herrera.

Did we miss out your favourite example of CSS in action? Let us know about it in the comments below!