• CSS Slideshows (28 submissions)

      A set of slideshows created with CSS, enabling you to display different types of media in neat and dynamic fashion.

      • Wallop: CSS Animations Slider

        A lightweight and open source slider developed in CSS and JS that features CSS animated elements.

      • Smooth Slider Vector Transitions Tutorial

        SVG Hero Slider is a code snippet that allows creating smooth slider transitions layered by vector shapes. It comes along with a short tutorial that explains how it was created by Claudia Romano.

      • Pure CSS Splitting Image Slideshow

        This splitting image slideshow was created with pure CSS, showing several images that break apart into multiple pieces. Once this happens, the next image appears and the process repeats over and over. This creation was put together by Nate Wiley.

      • Depth Effect On-Scoll CSS Slider

        A gallery depth slider created with CSS and jQuery. It works by scrolling or selecting one of the dots so the sliding animation tooks place. It shows two images, one of them with the caption. This code snippet was created by Nikolay Talanov.

      • deck.js: Presentation JavaScript Plugin

        A plugin made with CSS and JavaScript, perfect for creating HTML presentations and slideshows. The presentations can be manipulated with the keyboard arrows, making it simple to navigate through them. It comes under the MIT license and it was created by Caleb Troughton.

      • StackSlider: CSS 3D Image Slider

        A compelling image slider made with CSS composed of two stacks of cards from which images get "picked up". This experimental slider uses CSS 3D transforms and perspective. This work in modern browsers perfectly, but still has some bugs.

      • Centered Content Slider’s Code Experime...

        SNÖGRAFX, from Codepen, has created a friendly slider called Owl Carousel. Its primary purpose is to deliver a simple way of passing slides smoothly, as well as integrating easily with any project. Among its features we can find: - Control points for smooth slide swapping. - Previous and Next controls. - You can swap between slides with the mouse (or your finger) just like you would do on a mobile device. - Has responsive capabilities. It is really simple to integrate into any website. You don't need more than a few lines of JavaScript, CSS and HTML to make it run, and then you just …

      • Complete CSS Slider

        A classy slider created and animated with pure CSS. It includes next and previous buttons (which come with neat transparencies) plus navigation dots. A fade/zoom out transition gives a styling touch to the project. All credit goes to CodePen user Avi Kohn.

      • CSS3 Testimonials Slider

        Based on a Dribbble work by Subash Dharel, CodePen's Sara Soueidan has created this stylish set of boxes intended to be used to display testimonials, including pictures and a box for quoted text. The widget can contain multiple testimonials, thanks to smooth CSS transitions.

      • Circular SlideShow with CSS

        An awesome slideshow displayed in the shape of a half-circle. In order to explore through the images, simply click on the numbers below, as a neat animation will bring the corresponding picture. Project styled entirely with CSS by CodePen user Chris Mounsey.

      • Pure CSS Featured Image Slider

        A very simple slider, featuring a frame that goes around the image, as if it was hung on the wall. When hovering over the design, a set of dots animate into the view, allowing the user to browse through the pictures. This project was created with pure CSS by Joshua Hibbert.

      • CSS Slider Hover

        A super smooth slider that allows the user to view the pictures in it by hovering over the thumbnails below. The images transition nicely between them, using only CSS. Additionally, the design in entirely in black and white, except for the images being seen at the moment, which appear in color. Created by Marco Barría.

      • Simple Pure CSS Slider

        This project intends to provide an easy slider, coded with nothing more than HTML and CSS. It uses :target to work, so you might have to consider the fact that it creates additional browser history steps when going through slides. Uploaded to CSS Deck by Joshua Hibbert.

      • Pure CSS3 Slideshow Without Page Jump

        This code snippet prevents page jumps every time the user switches between slides. This is achieved with the help of a checkbox or radio hack technique in order to access each slide with a :checked selector, all with pure CSS. The slideshow also includes transition effects and is cross-browser compatible.

      • Simple CSS Image Auto Carousel

        A very simple image slider brought to life with nothing but CSS. The idea is to have a set of images that change automatically after a few seconds, but you can stop them by hovering on the design, which also triggers a subtle zooming effect. All credit goes to CSSDeck's Daniel Henriquez.

      • CSS 3D Cover Flow Slider

        This design intends to recreate the famous Cover Flow feature found in many Apple products. You can either click on the numbers below or directly on the images to select them. You can also find a subtle reflection effect, everything with pure CSS. Uploaded to CodePen by Chris Mounsey.

      • Fluid CSS3 Slideshow with Parallax Effect

        This thorough Codrops tutorial will guide you through the creation of a neat slideshow with a parallax effect, taking advantage of a few CSS3 properties. The idea is to control the slides with radio buttons, having two background images that transition at different speeds, generating the parallax effect.

      • Sliding Image Panels with CSS3

        A fancy Codrops project for creating a set of sliding image panels by using only CSS. The concept relies on a set of panels with background images (plus titles and sub-text) that animate when clicking on a label. It comes with four different animations, all working smoothly in browsers with CSS transition compatibility.

      • Fast Hover Slideshow with CSS3

        This very fun project for displaying pictures runs a super fast slideshow when hovering on the images. When the mouse is moved away, the current image is displayed. Hover again to get a new picture in the frenzy roulette. You can choose to add titles on top or leave the image clean.

      • CSS3 Clickable Slider: First Attempt

        More of an experiment than an actual functional design, this pen has a go at creating a slider that displays images in full screen and includes thumbnails for different albums on top. Arrows on the sides also aid you with navigation. Designed by John Motyl Jr using pure CSS.

      • CSS Only Tabbed Content

        Display tabbed content with this simple code snippet created with pure CSS. The blue section on the bottom allows you to go through sections, while a smooth animation moves the elements around accordingly. Moreover, a nicely texturized background wraps up the design. Uploaded by CodePen user Scott Magdalein.

      • Animated CSS3 Photo Stack

        This tutorial shows you how to create an amazing photo stack filled with all sorts of cool animations and transition effects when going through images. Everything is created with pure CSS3, ensuring smooth playback in modern browsers and even mobile devices.

      • PSD HTML Sliders Vol.1

        A neat freebie pack including three different minimalist sliders that allow you to showcase content with a clean presentation. The images slide with a subtle fade effect, for an event smoother interface. They come with their respective PSD and HTML templates, just because we love to please you.

      • PSD HTML Sliders Vol.2

        This freebie provides you with two clean, polished sliders so you can display content in an uncomplicated way to your visitors. They come with their respective PSD files and HTML templates, allowing you to apply any modifications as you see fit. Resource hosted at Elemis.

      • Horizontal News Carousel HTML

        As a follow-up to their vertical version of this same resource, the guys at Elemis Freebies are now giving away the template for this delightful horizontal new carousel, useful for different types of posts and articles. It comes in both light and dark colors and displays thumbnails, headers and sub-text.

      • Vertical News Carousel HTML

        The guys at Elemis Freebies are giving out this fantastic template for a vertical carousel in both light and dark color alternatives. This tool can be very useful to showcase news, posts, articles and related content in a clean way, providing thumbnail, headline and sub-text to catch the reader's attention.

      • CSS3 Image Slider

        This slideshow avoids the creation of new browser history steps when browsing through the images, like is the case with other similar tools. To achieve this result, CSSDeck user simonpicos makes use of radio input buttons with the :checked pseudo-class to take control of the slides.

      • Awesome Rotating CSS Image Carousel

        This amazing free slider displays four different images with their respective text sections, going through them smoothly while making full use of the power of CSS3's animation property. Keep in mind, however, that this interesting resource might not work in Opera and IE, since they do not support all of its CSS3 features.

      • Collapse Expand List View all items Download Collection Submit
    • CSS Navigation (55 submissions)

      Demos and snippets navigations created with pure CSS and in some cases some JavaScript.

      • CSS3 3D FlyOut NavBar

        A navigation made with pure CSS3 that creates a flyout navbar with 3D transforms. It is a simple creation that can be included easily into any website, and can be styled easily as well. The navigation was created by Tiffany Rayside.

      • One-page CSS Navigation Menu

        A simple code snippet in CSS for creating a one-page menu. The snippet uses very little CSS and no JavaScript, and It can be used commercially or personally, as long as you provide proper attribution. It was created by Alberto Hartzet.

      • Vertical CSS and JavaScript Navigation Layout

        A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for screen transition. It was made with CSS and JavaScript by Codepen user Ettrics.

      • Pure CSS Dropdown Menu

        A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animations were carefully crafted with CSS and it can be implemented on any website. This was created by Codepen's user Robert.

      • Minimalistic Flat CSS Navigation

        A flat navigation made in CSS and JavaScript showing some tabs and a drop-down menu. It can be used in any website, matching its style. It was created by Andy Tran.

      • CSS & SVG Material Design Gooey Menu

        A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations. However, this circular effect makes this a bit more relevant since it can be used not only on websites but in mobile apps as well.

      • CSS3 Tabbed Content

        TrueTabs is an HTML and CSS code snippet that creates a tabbed content box with animations. Its design is not that beautiful, mainly because of the dark tones its author used to make it. However, with a bit of time, this development can become a gorgeous and useful creation, perfect for any type of website. Jason Shi created this experiment and uploaded to Codepen for anyone to improve.

      • Off Canvas Mobile Navigation Plugin

        This jQuery plugin called Off Canvas Infinity Push allows you to make any desktop navigation accessible from a mobile device. It can locate a menu in several positions, without affecting the rest of the design. The navigation can be: - Positioned left - Positioned right - Responsive (top bar) - No auto scroll - No off canvas - Reset To use it, you just need to add jQuery (v1.7+); then add the stylesheet ( and include the plugin; finally, call the initializer function of the plugin. If you want to integrate it better on your website, you can modify the stylesheet. Also, it has several options you can …

      • CSS3 Responsive Navigation Menu

        A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

      • White and Pink Vintage Menu

        A very simple concept for a navigation menu brought to us by CodePen's Marco Biedermann. It consists of a group of options that turn pink whenever you hover over them, all neatly packaged within a white box, A "welcome" sign serves as a title, which text you can modify with ease.

      • Black Neon CSS Navigation Menu

        A very appealing CSS menu uploaded to CodePen by the talented Sara Soueidan. Showcasing a sober, elegant look, this menu highlights hovered options with a fancy neon-like effect that lights up the icons. When pressing on the buttons, they display a delightful shadow effect, too.

      • CSS Swinging Panel Menu

        An attractive menu developed with pure CSS. It features an impressive effect that makes panels "swing" in order to show the submenus when hovering, this is achieved by taking advantage of CSS keyframe animations. Uploaded to CodePen by Seth Abbott.

      • Responsive Black & Red CSS Navigation Me...

        A responsive menu adapts to different screen sizes by displaying its content in two ways: On big screens, it shows the icons along with the description of every element. On smaller displays, it only shows the main icons and reveals the descriptions on hover. Created by Sara Soueidan and uploaded to CodePen.

      • CSS Sliding Border Navigation Menu

        A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

      • Angled Navigation Menu

        A simple set of buttons forming a sort of navigation bar. The buttons have an interesting diagonal shape and include strong shadows plus a white appearance when the cursor is placed over them. All of the styling in this project is handled with pure CSS.

      • Clean and Minimal Menu Navigation

        Here we have a basic and clean dark navigation menu designed with pure CSS3 and functional with any major browser currently available. An animation slowly provides a shadow to the buttons when clicked, giving them a smooth appearance. Uploaded to CSSDeck by Abhimanyu Rana.

      • Large Pressable CSS3 Navigation

        A smooth navigation menu courtesy of David Hellman. It features some really interesting animations with box shadows on both active and hover states, providing a cool pressed effect. The menu's background comes as a linear gradient. Created with pure CSS and hosted at CSSDeck.

      • Beautiful Navigation Knob

        This beautiful navigation knob is based on a Dribbble shot from Piotr Kwiatkowski. It features a cool light bleed highlight on the selected option, along with a sharp animation when transitioning between selections. Created with pure CSS by CodePen user Adem Ilter.

      • CSS3 Click to Like Animated Button

        This neat animated "like" button includes a hidden checkbox that displays the current like count when clicked. This is achieved with CSS3's transition property, which is unsupported in older browsers, but the menu degrades gracefully to tackle that problem.

      • Diagonal Menu Buttons

        This project presents a set of buttons within a nice navigation bar and then, making good use of CSS transforms, twists them a bit in order to give them a fancy diagonal look. In case the browser is not compatible with this menu, it will degrade gracefully into an unskewed version.

      • CSS Orange Navigation Menu

        A slick navigation bar created with CSS, carrying a neat orange appearance and a checkered pattern in the background. Some options contain a second level within them, just hover on them to see a dropdown appear. An animation is activated when placing the cursor over the sub-menu selections. Uploaded to CSS Deck by Philipp von Wedel.

      • Colorful Navigation Bars

        A nice set of five different navigation bars in pure CSS. They are actually all the same, just with multiple color selections to fit with your website's style properly. The bars include highlight effects on hover, plus a very subtle shadow on the lower part. Uploaded to CodePen by user mafai44.

      • CSS3 Fading Panel

        This project makes use of invisible checkboxes in order to allow the selection of multiple options. Once a choice has been made, a smooth animation displays an image with a little bounce effect. More pictures keep on appearing this way as the user clicks on other options. Uploaded to CSS Deck by LukyVj.

      • Rolling Navigation Menu with CSS

        This navigation menu is a remake of the one created by Sohtanaka, but with the difference that the original was made with jQuery, whereas this one is created with pure CSS, although the concept remains exactly the same. It features a nice animation when hovering over its options. Designed by CSS Deck user Taufik Nurrohman.

      • Animated CSS Leading Slats

        A project that takes advantage of a few CSS3 properties to make animated “slats” that roll down to appear, creating a really nice effect. The slats receive a 3D transform effect in order to look the way they do while animation and keyframe properties are also applied. Remember this tool only works in Chrome, Firefox and Safari.

      • Animated Two-Level Menu

        A smooth navigation menu featuring dropdown lists that come down on hover. Regarding its styling, it presents a solid dark skin, making use of linear gradients and subtle animations to display the level two options. It mostly uses CSS, with a little bit of JavaScript to ensure compatibility with older browsers.

      • Classy Tabbed Navigation

        A truly beautiful tabbed interface created by Thibaut from CSS Flow. On hover, the tabs have the ability to display more options, allowing it to handle a vast amount of selections with no problem. Additionaly, neat shadows and click effects wrap up this compelling design. Based on an original PSD by Premium Pixels.

      • CSS Navigation Slider

        A fancy navigation interface created with pure CSS by CodePen's Elneco. The menu starts fade out, waiting to be activated on hover. Once you do that, the menu is fully visible, while a bar animates in order to place itself below the highlighted option. Move the cursor away to go back to the starting position.

      • Simple Slide Navigation

        A very simple but useful set of navigation menus, styled in a "shiny" black fashion with subtle box shadows that bring the elements out of the background. When the cursor goes over any option, a slide animates to show the same selection in light blue. They come in three versions: Small text, big text and icons only.

      • Menu with Current Entry Marker

        A quite simplistic idea for a horizontal menu including a smooth animated line that accompanies any selection you highlight with the mouse. Additionally, options also have the ability to change color when selected. Pure CSS was applied in the creation of this snippet.

      • Off-Canvas CSS Mobile Slide-Out Menu

        A CSS interaction that triggers an animation that will move the page to the side and introduce a set of options that will fade in one by one in a stylish manner. By using the :checked pseudo-element, we can design a mobile menu that slides out when clicking on the button placed on the top corner.

      • Slick Dropdown List

        This slick dropdown was created by Burak Kaya in Codepen, and it allows you to select different options showing them in an organized and beautiful way. When hovering on the selections, they are highlighted with a smooth animation and color change.

      • Lava Lamp Menu In Pure CSS

        This code snippet provides a beautiful lava lamp style navigation menu, decorated and animated with nothing but CSS. The idea is to have a set of options arranged horizontally and have them change color when hovering. Plus, a nice bar animates below the highlighted selection. Created by Vincent De Oliveira.

      • Simple Navigation with Hover Transitions

        The Code Player brings this walkthrough that will help you to create a simple horizontal navigation with a stripped-down black and white skin. It features a neat hover fade animation that will switch the colors on the option. Styled completely with the help of CSS.

      • Social Networks Navigation

        A nice trio of social buttons created with pure CSS, offering links for sharing on Twitter, Dribbble and Rdio. Each one comes in their respective color, which takes over the entire space on hover. It makes use of linear gradients and box shadows to decorate the interface. Uploaded by Stephen Grace.

      • CSS Paper Navigation Menu

        An attractive way to display a set of selections with this cool dropdown menu. The dropdowns are displayed over an element that looks like folded paper, not before appearing with a subtle (and fast!) fade animation. This item is fully responsive and styled entirely with CSS.

      • Multi-Leveled CSS3 Dropdown Menu

        A clever design that allows you to show multiple options within a multi-leveled dropdown menu, offering potentially unlimited sub-menus. It features smooth transitions, all handled with only CSS. A bit of JavaScript is included, but it is only in case fixing is needed with older browsers. Uploaded by CodePen's John Gardner.

      • Simple CSS Navigation Dropdown

        A flat-styled navigation dropdown menu created with pure CSS by CodePen user Allen O'Leary. The selections that include dropdowns are activated on hover, with a smooth and subtle animation bringing them up. A bright red color will highlight selected options, although you can modify the code and, therefore, the project's appearance.

      • CSS Fading Dropdown Menu

        A very cool code snippet that allows you to show options in a simple dropdown menu. The main talking point is its ability to fade out inactive selections when hovering over any main choice available. This project has been completely styled with CSS by CodePen user William Clark.

      • CSS (LESS) Dropdown Navigation

        A nice shot at creating a CSS dropdown with pure CSS (LESS). The options are shown in simple text at the start, being covered with a proper box when moving the cursor over them. You can add non-clickable titles to explain the selections. Uploaded by CodePen's Robert DeLuca.

      • MegaDrop: CSS Framework

        Here we have a fantastic tool that intends to aid you in the creation of large dropdown menus, making the process easier and faster. MegaDrop is a CSS framework that makes use of divs and percentages to achieve columns, instead of nested lists. Shane Jeffers is the author of this resource.

      • HTML5 CSS3 Gray Navigation Menu

        By making use of HTML5 and CSS3, this freebie provides a simple and elegant navigation menu. It does not make use of images, but pure CSS to handle its styling, which comes in a sober black and white color palette. It is cross-browser compatible, working with IE7 and above.

      • Dark Navigation with Green Top Border

        A fancy navigation menu created with pure CSS, featuring a solid black appearance and a little green and white stripe on top. In order to see the dropdowns, simply hover over the menu options. The selections will highlight slightly when moving the cursor over them.

      • Awesome iQuery Slide Down Box Menu

        A jQuery menu that consists of unique up-popping navigation items. This menu features sliding boxes as you hover over the navigation bar, these out-sliding boxes contain the menu options, while a thumbnail pops up. A submenu box will also be included with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item you hover over.

      • Slide Out Navigation Tutorial

        This tutorial will teach you how to create a beautiful slide out menu navigation. The options will be almost hidden, since they slide out from the side when the users hover on the edge of the screen. Moreover, the items will be semi-transparent to avoid blocking the content below them. This technique can be a great space saver for your website.

      • Responsive CSS Retina-Ready Menu

        An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

      • Pure CSS3 Breadcrumb Navigation

        This is the coded example result of a tutorial that uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of gradients for the links whereas the second demo uses flat colors along with transitioned hover effects for the navigation. This experiment is hosted at The Code Player.

      • Smooth Two Level CSS3 Navigation Menu

        A super fancy two-level navigation menu featuring an amazingly polished interface, with a great deal of attention to detail. As you hover on the multi-leveled sections, the dropdown menus appear with stunning smoothness thanks to a left to right animation. Created by Jack Rugile.

      • Soothing CSS3 Dropdown Animation

        A neat animated dropdown menu created by Alex Penny featuring animated sub-menus that show up with a very neat fade animation. The styling is rather basic, using just black and white to achieve a sober and elegant look that will not distract the user too much.

      • Apple Navigation Menu in Pure CSS

        A nice couple of navigation menus that recreate the ones seen at Apple's website in both their new and older versions. When it comes to the styling, there's nothing out of the ordinary, with box shadows, linear gradients and text shadows. Created with pure CSS by Vincent Klaiber.

      • Another Simple CSS3 Dropdown Menu

        A simple but effective dropdown menu, created with nothing but pure CSS3. It makes good use of a few CSS properties such as box shadows, transitions and text shadows in order to achieve a good-looking interface and smooth navigation. Created by Josh Riser and uploaded to CSSDeck by user Rishabh.

      • CSS Dark Navigation Menu Bar

        A neat navigation bar features a dark skin with colorful details on the bottom of each option. When clicking on the elements, they animate towards the background with a nice shadow that helps accentuate the effect. Designed with pure CSS by Thibaut.

      • Tabbed Navigation with Dropdowns

        A pretty tabbed navigation we found at Thibaut's CSS Flow. Hover over the main menu sections to see a dropdown with more options appear. It also features a small "home" button with a nice icon on it. Based on a PSD found at Premium Pixels and built with pure CSS.

      • Light Horizontal CSS Navigation 

        A light, yet strong CSS navigation menu with cool hover and active effects, as well as clean, white style that includes smooth shadows. Once we click on a button, it animates and stays pressed, just like the buttons in an old stereo player (do you young kids know what those were, anyway?).

      • Simple Menu CSS Code Snippet

        A CSS code snippet example that features a simple menu. When you hover over or click one of the buttons, it shows different submenus. It is meant to be used as a drop-down bar for a mobile or regular website. You can edit the HTML to add more elements, the CSS to modify its appearance and the JS for improving the functionality.

      • Collapse Expand List View all items Download Collection Submit
    • List Examples In Pure CSS (23 submissions)

      Examples of lists, widgets and templates, made in pure css.

      • Hover Effect Sharing Buttons

        Sharing could not be easier with these nice buttons with a simple hover effect with sideways expansion. Make your share buttons from your site interactive. It uses Raleway Font-Family and it's pure CSS.

      • Rdio-Like Fade List with CSS

        This code snippet takes inspiration from Rdio's fantastic interface and mimics the fade effect applied to extensive lists within the music service, which makes the list disappear into the background gradually as the list grows longer and longer. Apart from looking great, this effect tells the user there's more to come, which is a nice functionality.

      • CSS Shopping Cart Checkout Basket

        A cool design for an animated shopping card including the total price in the bottom. When hovering on the main element, the list comes down with a graceful transition. According to the developer, it might not work with browsers such as IE and Opera, so you should think about that before implementation.

      • Mini Mail Application

        This project provides a small widget intended to be used as a quick and light mini-mail interface. It contains multiple options in its confined space, such as reply, favorite, delete, tag, write a new email and more. Also, little arrows next to the header call for a multi-paged navigation.

      • Little To-Do List with Icons

        A tiny to-do list for efficient task management uploaded by CSSDeck's Christophe Benoliel Molina. This design allows you to check and uncheck assignments on click, with a small icon next to them confirming the operation. Clicking on the 'X' on top erases all finished tasks, while the "+" button brings them back.

      • Simple To-Do List

        Marco Biedermann from CSSDeck has created this straightforward to-do list that allows users the possibility to check and uncheck all of the tasks included in the list, with a neat effect that "crosses off" finished assignments. This project makes use of only CSS and HTML.

      • File Download Widget in CSS

        Here we have a sleek design providing a fantastic interface for a file download widget including icons for specific formats, the options to open the downloads folder, download queue and much more. Styled entirely with CSS, based on a PSD by Dairien Boyd.

      • Tabbed Widget with Pure CSS

        A nice example of the possibilities available with CSS brought to us by CSS Flow in the form of a tabbed menu interface. The widget uses no JavaScript in order to function and minimum markup. The design was based on the original PSD created by Aaron Sananes.

      • Vertical Animated CSS Navigation Menu

        A rather simple vertical menu inspired in Facebook’s mobile app. When hovering over an element on the list, a subtle animation moves the element to the right. This can be accomplished with the help of CSS3 and its transition property, which, unfortunately, is not yet supported on IE and Opera.

      • Stylish Ordered List

        An interesting concept for applying custom looks to ordered lists with the help of the mighty CSS. A special technique is applied to the numbers on the left hand side in order to achieve their appearance. You can see a nice transparent hover effect, too. Uploaded by Kushagra Agarwal.

      • iOS 6 Inspired CSS3 Pop-Ups

        A set of 8 pop-ups windows inspired by iOS 6's interface. They make use of CSS classes to add arrows, justify text and remove dividers. They come in a solid black color and include light shadow effects for styling. Uploaded to CSSDeck by the user Kushagra Agarwal.

      • Pure CSS List Box in Multiple Colors

        A set of basic boxes representing a calendar view with months and days in a list, although it can have many purposes depending on your needs. The title sections come in multiple colors and the numbers on the list contain a soft hover effect. Uploaded by Bartos Lazarski.

      • Table List with Only CSS

        A very simple, yet attractive list requiring only a few lines of CSS to take care of its styling. It is possible to add headlines and sub-texts with links on them, as well as images for a more visually appealing look. CSSDeck user Bartos Lazarski uploaded this project.

      • Animated List with Target

        This list, although very much a functional product, is more of a completely experimental project given the ridiculous amount of new CSS effects it takes advantage of. You will find background gradients, box shadows, animations, keyframes and so on. Uploaded to CSSDeck by user LukyVj.

      • Simple CSS To-Do List

        An uncomplicated to-do list originally created by Thibaut, who at the time took inspiration from a PSD created by Facundo Gonzalez. This revision (uploaded by CSSDeck’s Rishabh) finishes the checkbox functionality for a sharp result, while keeping the tool as a CSS-only creation.

      • Fancy Paper List

        This design provides a neatly animated dropdown with a paper-like effect that makes the list unfold when the user moves the cursor over the main element. Created entirely with CSS, it also includes shadows beneath the list for a subtle 3D touch. Uploaded to CSS Deck by user qhwa.

      • Pure CSS Tree Menu Framework

        Taufik Nurrohman from CSSDeck brings us this stripped-down design for a tree menu framework based on a tutorial seen at Odyniec, but tweaking it a bit in order to completely avoid JavaScript and use pure CSS for styling, including pseudo-elements for the branches.

      • List Styles with HTML and CSS

        This comprehensive pen shows eight different ways to display lists within your projects. The examples are quite diverse, going from a basic navigation to having animated selections or iPhone-styled menus. Everything is done with HTML and CSS by CodePen's Tiffany May.

      • Off-Canvas CSS Mobile Slide-Out Menu

        A CSS interaction that triggers an animation that will move the page to the side and introduce a set of options that will fade in one by one in a stylish manner. By using the :checked pseudo-element, we can design a mobile menu that slides out when clicking on the button placed on the top corner.

      • Custom Counter for Ordered List

        When working with lists, giving customized looks to generated content can be an issue. This project intends to solve that issue by deactivating the auto-generated material and creating you own, which allows you to give it any style setting you want. Created by CodePen's Eric E. Anderson.

      • Responsive List with Thumbnails

        This list can display a series of elements with different media types attached to them, including headlines with sub-text after that, images or calls to action. Its responsive design rearranges it quickly as the screen size changes. Created by Kalle Järveläinen from CodePen.

      • Select Album List

        Here we have a graceful list intended to let us make selections among a group of music albums. The artists' photos come divided with a soft shadow effect and the header comes alive with beautiful tones. It was styled with pure CSS by CSSDeck user LukyVj, based on a Dribbble shot by Rovane Durso.

      • To Do Task Widget

        Tyler Fry from CodePen has recreated a Dribbble shot that consists of a to-do list that allows the user to not only check and uncheck current tasks, but also add new ones for the future. An amazing multi-gradient background covers the project, giving it a stylish touch.

      • Collapse Expand List View all items Download Collection Submit
This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator