Check out these great examples of CSS brought to you by Jenn Lukas of Happy Cog. From bespoke agency sites to online shops, you'll find tons of inspiration here!
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. Here we list 45 great examples of CSS sites that do all this and more...
- Read all our web design articles here
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.
02. The Brackets
United Pixelworkers and Dribbble teamed up to create The Brackets, the first annual NCAA Tournament bracket mega-pool open to anyone in the web and design community (non-US visitors click here for an explanation of what that all means). The site has a beautiful simplicity to it, making it worth a visit even if you're not interested in basketball.
"We used Simple Bracket from Studio Neat to make it easy to administrate, and we recruited Shopify and Squarespace to amp up the prizes," explains United Pixelworkers developer, Nathan Peretic. "It's been a lot of fun. We plan on making it bigger and better every year," he adds.
The fixed navigation is styled with border-radius properties and is colour coded to match the corresponding sections. Those sections utilise RGBA background colours to set the alpha to less than one, which allows the fixed-position bracket background graphic to show through.
The bracket background is a nice, subject-appropriate touch. It also took a bit of love to implement, explains Peretic. "Some browsers (iOS) don't support background-attachment: fixed, so we simulate it with a fixed position element. It's a hack, but it's trivial and doesn't get in anyone’s way."
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.”
04. 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.
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.
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.
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.
08. 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.
09. 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.
10. Jeremy Holmes
Children’s book author Jeremy Holmes designed and developed his own portfolio site. Holmes sought an easy-to-maintain and affordable site experience but struggled to find a product to meet all his needs.
“I spent hours scouring through all of the portfolio services available to artists,” he reveals. “The problem I had with most of them is that the design ‘template’ was apparent in most of their client’s sites. Nothing felt unique.”
As a result, he combined Cargo Collective, Tumblr and Big Cartel, using CSS to create a seamless experience between them. The header is text-heavy and stylised. The body is an organised grid holding desaturated thumbnails of his work which transition to saturated images on hover.Holmes says, “It’s funny; I get the most reaction from my colour-shifting logo,” he discloses. “No fancy CSS there, just an animated GIF.”
11. MuleNog '12
In less than 48 hours, Mule Design Studio conceptualised, designed and launched an online invitation to its yearly holiday party. "This year’s event coincided with the 40th anniversary of Apollo 17, the last manned mission to the moon, so it was a small leap (pun intended!) for us to go with a 1970s space theme for Nog '12," explains designer Tom Carmony.
The site makes good usage of the z-index property and delivers an interesting scrolling experience. "We wanted to have a sense of motion and fluidity to the page, which led us to incorporate a parallax scrolling effect," says Carmony. "It’s really subtle, but it adds just that extra bit of movement beyond the basic vertical scroll."
The site is short and sweet, but full of cleverness. The design uses Büro Destruct’s BD Geminis font for headlines to fit the 70s space theme. A flashing Christmas tree GIF rounds out the fun.
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."
13. Women & Tech
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."
14. Jeremy Holmes
Children’s book author Jeremy Holmes designed and developed his own portfolio site. Holmes sought an easy-to-maintain and affordable site experience but struggled to find a product to meet all his needs.
"I spent hours scouring through all of the portfolio services available to artists," he reveals. "The problem I had with most of them is that the design 'template' was apparent in most of their client’s sites. Nothing felt unique."
As a result, he combined Cargo Collective, Tumblr and Big Cartel, using CSS to create a seamless experience between them. The header is text-heavy and stylised. The body is an organised grid holding desaturated thumbnails of his work which transition to saturated images on hover.
"It’s funny; I get the most reaction from my colour-shifting logo," Holmes discloses. "No fancy CSS there, just an animated GIF.”
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.
16. 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.
17. Caava Design
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.
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."
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."
"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.
21. 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."
22. 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.
23. Frank Chimero
Brooklyn-based writer/designer Frank Chimero has redesigned his personal website, creating a fantastical, narrative motif. Chimero explains: “The redesign attempts to bring a bunch of my writing and design work together in a more meaningful way”.
Headlines and text are set in Proxima Nova and decorated with background colours, borders, and repeating multiple backgrounds. This approach to the style allows the copy to be separated from the background images it sits atop, allowing legibility.
It's one of our top examples of CSS, which works well in a mobile browser too. “This was the first fully responsive website I’ve made. It was fun creating a design system and figuring out proportions, then seeing how those choices rippled out,” says Chimero.
24. Lift Interactive
Canadian agency Lift Interactive's site features tons of cool CSS effects. "We wanted to use our site to display both a new approach to how we want to communicate, but also to show what we are technically capable of," explains frontend developer Adrian Gyuricska.
Scroll down to the Thinking area on the homepage and hover over the books. By transitioning CSS transforms and combining translate and rotate properties, the book front and spine have a nifty 3D effect.
“Something I enjoyed was the use of 3D transforms on the site. I’m really happy with the banner transforms on the homepage,” says Gyuricska.
More transforms are used on the Work page. Hovering over a thumbnail both scales and moves the image nested within the link, allowing the container to make a mask on the larger sized image, revealing more of it on hover.
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.”
26. 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.
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.
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."
29. 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!”
30. 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.