chalarangelo / 30-seconds-of-css

Short CSS code snippets for all your development needs

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

30 seconds of code

Short CSS code snippets for all your development needs

• Visit our website to view our snippet collection.
• Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
• Browse the CSS Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
• Click on each snippet card to view the whole snippet, including code, explanation and examples.
• You can use the button at the bottom of a snippet card to view the snippet in Codepen.
• If you like the project, give it a star. It means a lot to the people maintaining it.

Want to contribute?

• If you want to help us improve, take a minute to read the Contribution Guidelines first.
• Use the Snippet Template to add new snippets to the collection.
• If you find a problem with a specific snippet, please open an issue.
• If you find a problem with the website, please report it in the web repository.

Credits

• This repository is maintained by the 30 seconds of code organization on GitHub.
• All snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise.
• Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
• Our website is powered by Netlify, Next.js & GitHub.

30-seconds-of-css's Issues

[FEATURE] On the spot experimentation feature

Add an option to edit the CSS to experiment freely. 30-seconds-of-code is basically all JS so we can easily copy paste in the browser console but in this project to experiment with some other values, we have to go to CodePen or something same. I would recommend making something of your own to change the CSS of the demo but you might even use some external service.

Twitter Credit/Visibility?

Hey @atomiks, this is really fantastic. So fantastic that I tweeted about it.

I was looking for some way to tweet this out, but I just copy/pasted the link. So I have two questions for you:

1. Do you have a twitter handle? I'd love to give you credit (and so would others, I'm sure)
2. Have you considered adding twitter functionality? Maybe just a button that prepares a tweet with the link to the site?...
   • maybe even some capability to tweet out individual sections, if you're thinking about really expanding things 🚀

Once again, nice job. I'm a big fan 🥇

Lobotomized selector instead of ':not selector'

Hello there,

I think for situations like described on ':not selector' (when you have, say, an unordered list rendered as a horizontal menu and you want borders between them, but not the left-border of the first element or the right-border of the last... you know what I mean) it's way more simple and elegant to use the lobotomized owl selector.

So instead of doing

li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}

You just can do

li+li {
  border-left: 2px solid #d2d5e4;
}

And voilà, the same effect and saving a few bites on CSS. :)

This library lets me write fewer CSS styles.

o(≧v≦)o~~好棒

Switch docs CSS units from `rem` to `px`?

I've long used rem but when the window is being resized or elements are transitioning in height, it can cause ugly 1px jitters everywhere due to browser rounding prolems. With px, this doesn't occur.

px is also responsive on most browsers when the zoom level is changed.

https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f

@Chalarangelo

[FEATURE] "New" icon for new snippets less than 1 month old?

This could also apply to the Code and Interviews repos.

Take a look at Billboard's sexy SVG icon:

Wonderful project!

Hi @atomiks

This project is awesome! I found many CSS snippets I always need when working on frontend development project :)

I have shared your project here with Thai frontend & web design community: https://www.designil.com/css-code-snippet-30-sec.html.

Please let me know if you would like to add anything about yourself. I think your great work deserve more than just a name and Github link!

P.S. If you decided to remove this 30 seconds of CSS site from the current URL in the future (hope you don't), please kindly let me know. I might be able to help hosting the site on your behalf. Because this is extremely valuable. I will use it myself.

Cheers,
Perth

[FEATURE] background transparency

Nice addition to this great repo would be : background transparency:

nicely explained in this stackoverflow answer:

https://prnt.sc/irr3c0

if you could implement it, it'd be great.

Snippet categories + searching

As the list of snippets grows, it will be necessary to categorize them to make them more easily searchable.

Some category ideas I have:

Layout

• Evenly distributed children
• Horizontal and vertical centering
• Box-sizing reset
• Truncate text
  etc.

Animation (possibly even a loaders subcategory)

• Donut spinner
• Hover underline animation
• Mouse cursor gradient tracking
• Easing variables
  etc

Interactivity

• Disable selection
• Popout menu
• Hover underline animation (a snippet can fall under multiple categories)
  etc

Visual

• Hairline border
• Triangle
• System font stack
• Gradient text
• Etched text
  etc

Use Vue for docs?

Since some user interactivity is being added, it might be a good idea to make everything more declarative and use components and all other benefits it brings.

Vue can be easily be plugged in to the page without a complex build system, so we don't need to use single file components etc. as that would be overkill.

Popout menu caveats

What a wonderful site! I really like the easy to understand tips and tricks.

For the popout menu, I think accessibility should be added as a possible caveat. A popout menu isn't necessarily inaccessible, but one should be careful adding crucial information behind a non-focusable element. I think either adding a bit of information on the topic or simply making the example component more accessible (tabindex + :focus, perhaps?) would do the trick.

[BUG] Animation / Button Border Animation not clickable

Small bug: Button Border Animation is not clickable in the left bar.

Truncate text caveat

Explicitly specifying that text truncation only works on single line elements might be useful. I know that it says so under the heading, but some people (like me) might oversee that.

Padding top

There is some issue on padding-top example.
https://atomiks.github.io/30-seconds-of-css/#constant-width-to-height-ratio

Padding-top defined in % is calculated on parent element width:
https://codepen.io/kartofelek007/pen/NyEeMa

feat: randomly send code snippet email

This repo is quite useful. I am wondering, if have a feature that can send randomly code snippet email to users every day, so that we can learn little by little every day.

Just a thought in mind

Thanks for awesome work!

:)

[FIX] Autoscoping for snippet styles

The current naive solution was to use a "namespace" (.snippet-demo) for the demo code, but it's arduous to type and repeats the main visible code. We should just use the code inside the main code blocks, and when building, generate a custom scope for the styles so they don't conflict with other snippets or the global styles.

This means the demo should match the code exactly, which is better for the CodePen button. (Some don't match currently - as some only specify the minimum number of properties for the effect, but I think that causes confusion.)

[FEATURE] Translate Project

Fantastic this project, have thought to make the translation of it to other languages?

how to build this?

There's not a single info on what this uses to build and how to build page locally if we want to change stuff.
Can you clarify process a bit?

System Font Stack Review

Hi,

I suggest to change the order of the first two fonts from ´´-apple-system, BlinkMacSystemFont,´´ to ´´BlinkMacSystemFont, -apple-system,´´.

Otherwise IE will use a serif font, which is the opposite of the intended behaviour.

Please keep it simple :)

I made some PR here with the aim of keeping the examples simple and easily legible. Now some snippets HTML/CSS are over-complicated compared to what they do. Here an example:

https://atomiks.github.io/30-seconds-of-css/#counter

You can just use a couple of ul with 4 or 5 li inside them to use this snippet. When i will have time i will fix some of these, but it would be nice if we kept everything much simpler when reviewing PR's.

With ❤️

[FEATURE] Add multi-line text ellipsis (even if it includes JS)

Title says it all 😄 . Perhaps a few different methods (::before content method, -webkit-box method, etc) to do this? It is definitely a common pain point and for some reason I always run into it. Both static and variable width with a static height would be great too!

[FEATURE] Better Constant width to height ratio

.better-constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.better-constant-width-to-height-ratio::before {
  content: ' ';
  display: block;
  padding-top: 100%;
  float: left;
}
.better-constant-width-to-height-ratio::after {
  content: ' ';
  display: block;
  clear: both;
}

No need to worry about padding.

Box sizing [Discussion]

Hey!
You wrote:
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

But wouldn't be better to just use this?
*{ box-sizing: border-box; }
Which apply border-box to every element on page, unless you specify different in choosen element.
✌️

background-positioning with calc()

I don't know where else to put this suggestion, so I'm starting a new "issue". Your background-positioning example works well but does not need to use calc(). It works with background-position alone and has a slightly different browser support comparing to calc(). Here is a pen to see how it works: https://codepen.io/Lippe/pen/bQNzzX

https://caniuse.com/#feat=css-background-offsets

Clearfix caveats

The "clearfix" snippet is marked as having no caveats. Hovewer, it's relying on the two assumptions and might fail if they are not true:

1. There are no non-floating children in the container (example where such a child apparently breaks clearfix: http://jsfiddle.net/o9rbryxp/16/);
2. There are no tall floats before the clearfixed container but in the same formatting context, e.g. floated columns (example of clearfix resulting in probably not the result that was expected, in comparison with new block formatting creation: https://codepen.io/SelenIT/pen/qrORXm/).

Shouldn't the users of the snipped be warned about these limitations?

Reinstate old UI and website link

@Chalarangelo as far as I'm aware you've recently converted many 30s projects over to new domains and a new starter UI kit. I apologise for being AFK for a few months so I understand you couldn't ask before it transitioned over.

I do like this new UI, however, I think parts of it feel like a beta still and think it could use more polish.

Some big problems I see:

• The link that's first on Google (and was shared everywhere) is now broken
• JavaScript snippets don't seem to work anymore
• Some overflow problems with elements in the snippets
• Some snippets don't gel properly with night mode (as it wasn't accounted for originally) and are hard to see
• Clicking a link then clicking back doesn't restore scroll position

Is it possible to reinstate the old UI and old domain temporarily until these particular kinks are ironed out?

better code for "Constant width to height ratio" example

You don't need the both ::after & ::after pseudo elements at all, it is known for centuries that you only need one of them, ans set it to have:

content: '';
display: block;
padding-top: 100%;

Small screen menu button only visually conveys state

The menu button, which changes from a hamburger to an X on small screen view ports, does not appropriately convey state to assistive technologies.

Expected:

When the navigation is closed the button should have an aria-expanded="false".
When the navigation is opened the button should have an aria-expanded="true".

Doing so will convey the button as "collapsed" or "expanded", respectively, when a screen reader is running.

Sorry, I am coming again.

I want to translate this document in Chinese https://30-seconds.github.io/30-seconds-of-css/ . I will keep the source of the original text and encourage everyone to read the original text. Just want to make more people understand easier.

Chinese translation

Excuse me, can I translate this document in Chinese?

PWA feature

it would be better if it was made into PWA.. :)

Bouncing loader on iOS: first two circles start animation at the same time

I noticed while browsing this morning and not sure why. Worked perfectly on Chrome.

[BUG] Sidebar navigation doesn't seem to work

Sidebar used to be scrollable, now it doesn't work. Does anyone have similar issues, if so do you have any idea why is that happening?

Environment:
MacOS Mojave & Chrome 69.0.3

[QUESTION] Used color scheme?

What is the name of the color scheme used to highlight the code? I really liked it.

Parcel build

Sometimes the dist/ folder gets created despite docs/ being specified as the output.

Sometimes more files are generated to docs/ than there needs to be.

Can't click through the gradient on the "Overflow scroll gradient"

Overflow scroll gradient

This snippet adds a transparent-to-white gradient on top of a scrollable area giving the effect that the content is fading away. For the majority of the area underneath this content, a user would think it would still be able to interact with the content but the gradient would block any interaction.

TLDR

Buttons at the bottom of the scroll area are un-clickable. Text at the bottom of the scroll area is un-selectable.

The fix is to add pointer-events: none to the gradient:

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 300px;
  height: 250px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}

Browser Support

https://caniuse.com/#search=pointer-events

[BUG] Disable Select

FYI: user-select: none; isn't foolproof. While it may prevent direct highlighting, it doesn't prevent selecting through the unselectable content.

I'll let this gif do the talking.

Chrome Version 64.0.3282.167

[BUG] Hairline Border Explanation Typo

The Explanation section has one of the dppx listed as ddpx.

Pretty text underline isn't so pretty

This might be a personal preference, but that underline doesn't look pretty to me.

Windows 10, Chrome 64.0.3282.167

[ Height transition ] it's un useful by max-height （question）

On the example https://codepen.io/anon/pen/jxaWQw, use JavaScript to control the max-height,
I try to use css to finish like below

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: 100%;
}

The result is: when you hover the trigger, the content will showing, but no transition.
This makes me confused, could you tell me the reason when you have time, thanks a lot!

[FEATURE] Use multi-columns and grid to form design

Hi,

The following link shows a pretty good use of grid and multi-columns layout: https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c

Maybe add it to the site ?

[FEATURE] last-child or last-of-type on :not selector snippet

Hi to all!
It could be useful to add a cite to :last-of-type selector in the ":not selector" snippet.
Last-of-type is generally more reliable than :last-child in that context or at least a nice thing to be aware of.

I thought of this, reading this article by Timothy B. Smith
https://brightlycolored.org/2017/02/css-tip-use-not-to-save-time-and-lines-of-code/

[BUG] user-select needs prefixes

The example for disable selection currently only works in Blink-based browsers.
Other browsers still need vendor prefixes for the user-select property:

-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

[FEATURE] Multiline truncation

What about multiline truncation with line-clamp? I can make usage example.
https://caniuse.com/#search=line-clamp

Edit Contributing template

Hey, nice project there. I see that the contributing template has some stuff missing. I'd be happy to put in a PR if you could tell what's needed (or remove the sections entirely).

[CSS/FEATURE] HTML5 audio/video player in a dark style

video::-webkit-media-controls { 
filter: invert(1) grayscale(1) !important; 
opacity: " +transparency+ " !important; 
}

Super nice, but you could credit authors :)

I like this project a lot, and it's similar to a project of mine.
While scrolling on your page tho, I've noticed a few css thingy I've seen on codepen and elsewhere, and I thought it would be cool to credit the authors :)

Like this one :) https://codepen.io/electerious/pen/MQrRxX

MDN browser compatibility data

Hi, MDN is making a tool to handle his browser compat data to show on the MDN site. Can this help for this project?

https://github.com/mdn/browser-compat-data

It is pretty simple:

const bcd = require('mdn-browser-compat-data');
bcd.css.properties.background;
// returns a compat data object (see schema)

Snippet structure & philosophy

This issue is about the design/structure of snippets and their content.

• Some snippets' HTML/CSS code does not line up with the demo. I made it that way so that I could include the bare minimum CSS needed to create an effect, but this has the problem of not matching the demo and not being reproducible if they copy/paste the code. How should this be handled?

• Should the browser support have an automagic button that converts the code into the widest browser support possible so a user can copy/paste it?

• Live editing. #4 should be coming soon

Ablility to select multiple tags [FEATURE]

Hi ,this is my first contribution to open source so I hope I know what I'm doing in !
First , I really like this project Idea and find it very useful !
what may enhance user experience is the ability to choose 2 or more tags
Let's say I want to see both the visual and interactivity tag ?
(one way of achieving this is holding shift while selecting tags ! )
I'd love to help out on this feature !