Some are funny, some are bland, and some you may not even understand. We’ve put together a list of 28 CSS puns that we think you’d love, we did. Comment below and let us know which one you like best! Heck, Let us know if you have some that are even funnier than the ones we’ve collected, we’d love to hear em!

Get it? Because you disappear in the Bermuda-triangle…

#BADA55 is a real color!

It’s okay no one is mad about this one…

Wife is always right or else the titanic does not float!

So much padding it broke the internet!

Just keep swimming…

I had to look deep into my morals before adding this one.

Ugh, machines make us do all the work!

What web designing does to us…

Yo mama so fat… This one had us laughing for a while.

Get it? The Wall of China!

Warning: Little people are not leprechauns, do not attempt to capture them!

Never to be found…

You won’t like him when he’s angry…

It doesn’t take much…

Ha! 6ft under.

One of my favorites!

Who doesn’t love good transformer movie?

If you can build it that is!

You know, because it’s leaning…

I think I might be a hobbit… it’s time for an adventure!

And then there was nothing…

Oh, the things I would do with an invisibility cloak…

You know it’s going to be fun debugging when you see that!

Always strive for awesomeness!

This one may take you a minute… it did for me.

If this one doesn’t get you signing then you might be a robot…

Don’t forget to comment below and let us know which one you like best! Share your jokes with us as well, we want to see them!

The word “accordion” typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript and more prominently jQuery.

I’d like to cover a series of examples and techniques for building accordion interfaces into any website layout. Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions. This post should outline the important concepts and topics related to accordion interface design.

Why use Accordion Menus?

I like to think of accordions as content management tools. When you have a page that’s broken into dozens of paragraphs, links, images, or just too many blocks of content… accordion menus to the rescue.

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. And you can build quick accordions if you use website builders or CMS engines like WordPress.

But each interface works differently based on the circumstances of the layout & the type of website.

Nowadays the biggest concerning factor would be the total number of visitors who don’t have JS-supported browsers. Over the past decade this number has dwindled considerably low as more people are upgrading their computers. This means you should have almost no concern because even mobile smartphone browsers support JavaScript. If the content is viewable and the accordion is usable then where’s the harm?

Just be sure that each accordion component has a real purpose. There are times where I’ve found accordion FAQ pages that could have just listed content down the page without forcing me to click on each heading. Granted I understand the premise but if each answer can be surmised in a few sentences, hiding that content isn’t going to improve the user experience.

So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organize content in a way that makes navigation simpler than endless scrolling.

Sliding Menu Effects

One of the most common interfaces you’ll experience is the sliding menu effect. This is usually vertical with a series of links hidden within sub-links. Clicking on a primary link will then expand the list of sub-links in a sliding animation.

Sometimes a website’s entire navigation menu is built on this accordion effect. Other common choices are dropdown menus which appear on hover – but accordion menus don’t slide over the page since they’re built into the page. So the effect is somewhat different and offers a different user experience by comparison.

Take a look at this Designmodo tutorial which explains the process of accordion development in a nice tutorial. The source code is free to download but it should really serve as an example describing how this interface might work. Designmodo has a live sample preview which demonstrates how the menu behaves in action.

Notice how the menu will automatically close when opening a new section. This is typical behavior when constructing an accordion menu because only one primary menu is open at any given time. But this is not a mandatory feature and, in fact, most accordion menus allow every section to be open. This choice depends largely on the website itself and how content is expected to behave.

CSS3 Tabbed Content

Another example of accordion content is based on tabbed widgets. So instead of having links listed vertically, tabs are used to manage shifting content. This is another really popular method of content management because JavaScript has made the process super easy. But since most developers are already familiar with JavaScript, I’d like to cover the more advanced techniques.

An alternative to JavaScript is the expandable accordion UI with CSS3. Granted they both seem like a risk but CSS3 has much less browser support. The only benefit is that CSS3 doesn’t require as much code and offers a simpler method of animation. If you prefer modern CSS3 animation check out the following tutorial:

Codrops publishes very high-quality content and their accordion CSS3 tutorial is no exception. The code is free and downloadable if you want to try it out yourself. Their live demo includes a couple different options which utilize checkboxes vs. radio buttons.

Checkboxes allow users to select multiple items at once. Using the checkbox method you can have many different content areas open at the same time. Radio buttons only allow one radio item to be selected. This means when opening a new section the previously-open section will close. Both work great and will vary based on the needs of each project.

Sliding Portfolio

Webpage content is managed via alternate pages for simplicity and ease-of-use. Visitors would rather browse through different pages rather than sift through a long single-page design. However working with collapsible accordion content makes the latter a lot more reasonable.

Take for example the homepage of Toko which uses a dynamic portfolio listing. As you click on each item the list will collapse smaller for an easier view of the project. This is by far an odd concept but it works great on their website. Why? Perhaps because of the minimalist design, perhaps because of the grid-like structure.

Either way portfolio sites can be an excellent choice for accordion widgets. Not every project should rely on accordions to best manage content. But think of the control you can offer visitors by organizing projects into larger categories and even sub-categories. Make use of this sparingly but keep it in mind.

Image Galleries

In a similar vein as the portfolio listing is a collapsable image gallery. In accordion-style this can take many forms as vertical, horizontal, slidable, tabbed, you name it! Touch-based interfaces have also allowed for swipeable image galleries that work nicely with computer mice too.

Getting back to Codrops I found another great tutorial covering an image accordion with CSS3. The effect is really cool and surprisingly supports click events. Each image is given some caption text which animates into view. What I like about this design is that it doesn’t rely on tabs or links or anything outside of the images themselves – so the content becomes the tabs. Pretty cool right?

Here’s a free jQuery plugin for building a responsive accordion image gallery. This example behaves similarly to the Codrops tutorial except all the animations are handled through jQuery. Also the caption text is a bit larger and seems more smooth. I’d like to state that either one of these effects could be duplicated and pushed onto the other – it’s simply a matter of recoding the design to fit the interface.

But my point is to demonstrate that both CSS3 and JavaScript can be used to create most of these effects. Unfortunately older browsers will never be backwards-compatible to support new CSS3 animation. Working with JavaScript is still the safest choice, but as more people upgrade their web browsers we can hope to see a future with primary support for CSS3.

Free Code Snippets

I’d like to wrap up this post by offering a collection of free open source code snippets. Each sample demonstrates the power of accordion content whether in a navigation, FAQ listing, or tabbed widget. All of these codes have been shared on CodePen and should be reusable on any project.

Granted you can always pick up a free plugin to rebuild something from scratch instead. Lots of developers release their code for free and try to help the community with free plugins. And of course there will always be those who prefer to build everything from scratch. But if time is a factor then I highly recommend working from these code snippets to ensure greater compatibility and a much quicker development schedule.

3D Accordion

Material List

Animated Accordion

CSS3 Dark UI

Full-Width Content

Multi-Level Accordion

Flyout Dropdown

Colored Bars

Multi-Level Accordion

Responsive Content

Sexy CSS Accordion

Dope Accordion Menu

Vertical Radios

Horizontal Radios

BEM Accordion

Pure CSS

Blue Accordion

Flexbox Tabs

Pure CSS Menu

Multi-Color Accordion

One of the fastest time saving techniques for web development is to reuse code. Naturally this may come in the form of snippets saved locally to your computer. But it may also come in the form of code generators like Enjoy CSS.

This free webapp creates valid CSS3 code for many common features like gradients, shadows, and even transitions.

Everything works within a GUI running in your browser window so it can function on any computer with Internet access.

The app not only acts as a code generator, but also a library of previously-created items.

You can browse through custom codes for text effects, buttons, repeating patterns and so much more.

Enjoy CSS3 is more like a community for building repeatable code snippets for web development. If you want to save your creations you can sign up for free and keep all your snippets in a user account.

But it’s just as simple create your CSS anonymously as well.

Take a look at the webapp and see if you could put it to good use. Also you can stay on top of news & updates by following the Twitter account @enjoycss.

Online dev tools are growing rapidly with a larger audience of new and experienced developers. One such area is code generation with more specific code generators focusing on particulars like CSS3 prefixes or animated effects.

But another emerging area is 3D rendering based solely in HTML/CSS. The new site Tridiv lets you create abstract shapes with nothing more than HTML and CSS code.

It’s a completely free webapp that works like a typical IDE/GUI combo. With custom settings and moveable features you’re able to create anything you can possibly imagine.

The classic NES console is a really cool example.

Note that CSS3 has come a long way, but there’s still a ways to go. Detailed rendering is still not as easy as you might think.

Also browser support is rather shoddy and will take time for greater adaption. This places CSS shapes in the “experimental” category of development techniques. They’re still really cool and fun to make, but perhaps not the best solutions for live production-ready websites.

You can use Tridiv for free with almost any modern web browser(this excludes Firefox and Internet Explorer). Hopefully support will be added in the future to reach a broader audience of developers.

If you have any questions or suggestions about Tridiv you can send a message via e-mail or directly on Twitter @TridivApp.

The web of 2015 offers a much easier time of locating resources than the web of 2005. Dozens of web applications pop up every year with a focus on particular areas. Since many of these sites are made by designers/developers, it seems obvious that actual web design/development is one very popular area.

Stylesheets.co is a free online directory of CSS resources curated by the community. People can submit CSS resources into the site and users who sign up can then vote on these resources. The most popular items appear on the front page with the growing list of beloved CSS resources.

Right away you’ll notice the Stylesheets website is very minimalist. It’s just a simple gallery of CSS resources whether libraries, online webapps, or handy guides.

You can read more on the about page which explains the purpose of Stylesheets.co and offers links to profiles and official chat groups.

The site was created by Jamie Wilson who also released his Stylesheets code for free on GitHub.

With so many new assets every day it’s tough to rule out the significance of a website like this. Both beginners & experts alike can find some incredibly handy tools and libraries for coding in CSS.

Also if you want to support the site financially you can make a donation to help keep Stylesheets online for years to come.

The Concise CSS framework is a completely free open source lightweight option for frontend developers. It’s written in Sass for the modern developer who can’t part from his/her favorite preprocessor.

If you visit the actual landing page you’ll realize the site is just as lightweight as the library.

Everything is bloat-free with a focus on ease of use. There are plenty of add-ons with the ability to code your own, too.

Anyone new to Concise who may wnat to learn should check out the free documentation. It relies on Sanitize.css with its own series of custom resets based solely on Concise’s portability.

Concise.css is also available for free download on GitHub with a few example code snippets for setup. Feel free to download a copy and try it out in your next project.

Also you can stay up-to-date with Concise CSS on Facebook or via Twitter @ConciseCSS.

The general idea of Flexbox makes sense to most developers, however shoddy browser support and confusing syntax makes it difficult to implement.

But what if there were a way to really nail down the concepts of Flexbox quickly & easily? Well thanks to flexbox in 5 minutes, there is!

That website is perfect for teaching anyone about how flexbox runs & operates. You can take a step-by-step tour of flexbox features plus learn from real live code snippets.

fdsa

The app is designed to be completed within only 5 minutes, making it that much more intriguing. Who doesn’t have 5 minutes to learn a new development technology?

By looking at the site’s layout you might be a little confused at first. It’s definitely not the most beautiful website, but it does function well and serve its educational duty.

If you want a head-start on flexbox then visit the flexbox in 5 website and start learning. The site won’t be online forever, so if you want to keep a local copy visit GitHub and download the most recent commit.