Short CSS code snippets for all your development needs

  • By 30 seconds of code
  • Last update: Nov 26, 2022
  • Comments: 11

Logo

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?

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.

Github

https://github.com/30-seconds/30-seconds-of-css

Comments(11)

  • 1

    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?

  • 2

    [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/

  • 3

    Add Open Graph and Twitter Card images

    Add Facebook and Twitter custom image and title to the website so it is more appealing to users who see it on their timeline. It is also supported by messaging services, browsers and social networks.

    This is my first time on GitHub so I hope I didn't make any mistake. Sorry if I did!

  • 4

    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.

  • 5

    [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

  • 6

    Autoscoping

    • Need to update all problematic snippets before merging
    • Removed grid-layout.md because it broke the global styles -- I don't believe it's very useful anyway in this repo's format...
  • 7

    [FEATURE] Add multiple tag-selection

    Fixes #59 Allows to select multiple tags and then view all the elements that contain at least one of them. I am not sure if this works correctly because I had no way to test it.

  • 8

    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.

  • 9

    [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.)

  • 10

    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

  • 11

    [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.