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 web design 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 48 great examples of CSS sites that will provide a burst of web design inspiration...
01. Envoy
CSS transitions are used to help aid in the Envoy demonstrationEnvoy, 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."
02. O Music Awards
Happy Cog used many different CSS properties to achieve the look for the O Music Awards siteMTV'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.”
03. SquareSpace
CSS transforms and animations are used to enhance the designs and interactions on SquareSpaceSquarespace 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 avigate.
“The Squarespace design team conceptualised and prototyped a few different navigations before going with the current design,” says frontend eveloper 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, rovides 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”.
04. 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.
05. 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.
06. 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.
07. CSS Creatures
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 developerBennett 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!
08. 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.”
09. 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.
10. 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.
11. Form Follows Function
The style is minimal and uses the golden ratio as well as interesting typographyForm Follows Function (FFF) is a beautifully designed showcase of HTML5 and CSS experiments by Korean developerJongmin Kim who works as an interactive developer atFirstborn 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.
12. Branch
The homepage features some super neat modules that utilise CSS to achieve the lookBranch 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.
13. The Gently Mad
The large header and well-designed episode list conveys a personal touch to this designThe 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.
14. Amazee Labs
With competence and confidence, this website is a beautiful example of CSSCreating fresh websites and community solutions, Amazee Labsat 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.
15. A&W
CSS rotation transforms are used on header text, giving the A&W site a fun print-menu feelThe 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.
16. MuleNog '12
The site makes good usage of the z-index propertyIn 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.
17. 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."
18. Women & Tech
The design scales up beautifully on mobile displaysFrom 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."
19. Jeremy Holmes
Holmes wanted his porfolio site to feel uniqueChildren’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.”
20. Conservation Committee
The site all fits on one pageConservation 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.
sources : 48 outstanding examples of CSS | Web design | Creative Bloq