Short CSS code snippets for all your development needs

Overview

Logo

30 seconds of CSS

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 List 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 on the right side of a snippet card to copy the code to clipboard.
  • If you like the project, give it a star. It means a lot to the people maintaining it.

Want to contribute?

Credits & Sponsors

  • This repository is maintained by the 30-seconds organization on GitHub.
  • All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise.
  • Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization.
  • Our website is powered by Netlify, Gatsby, Travis CI & GitHub.
Comments
  • Reinstate old UI and website link

    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?

    opened by atomiks 30
  • [FEATURE] last-child or last-of-type on :not selector snippet

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

    opened by drapisarda 11
  • Add Open Graph and Twitter Card images

    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!

    opened by fraimpara 10
  • System Font Stack Review

    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.

    opened by bitstarr 10
  • [BUG] Sidebar navigation doesn't seem to work

    [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

    opened by fejes713 8
  • Autoscoping

    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...
    opened by atomiks 8
  • [FEATURE] Add multiple tag-selection

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

    opened by kriadmin 8
  • Use Vue for docs?

    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.

    question 
    opened by atomiks 8
  • [FIX] Autoscoping for snippet styles

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

    bug discussion 
    opened by atomiks 7
  • Switch docs CSS units from `rem` to `px`?

    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

    question 
    opened by atomiks 7
  • [FEATURE] background transparency

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

    opened by diomed 7
Owner
30 seconds
The team behind 30-seconds-of-code and official 30-seconds projects.
30 seconds
Short JavaScript code snippets for all your development needs

30 seconds of code Short JavaScript code snippets for all your development needs Visit our website to view our snippet collection. Use the Search page

30 seconds of code 106.1k Dec 28, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022
AWS SAM project that adds the snippets from serverlessland.com/snippets as saved queries in CloudWatch Logs Insights

cw-logs-insights-snippets Serverlessland.com/snippets hosts a growing number of community provided snippets. Many of these are useful CloudWatch Logs

Lars Jacobsson 12 Nov 8, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Arshansh Agarwal 5 Dec 17, 2022
All the Fake Data for All Your Real Needs 🙂

All the Fake Data for All Your Real Needs ?? Run it on Stackblitz Installation npm i @ngneat/falso yarn add @ngneat/falso Methods rand<T>(arr: T[]):

ngneat 2.8k Dec 29, 2022
Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links

rebrandly-express Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links Rebra

null 3 Dec 13, 2022
Flight is a universal package manager for your needs, no matter what language you may want to write your code in.

Flight Swift, reliable, multi-language package manager. ⚡ Installation We don't have an official release of Flight yet, however, if you would like to

null 26 Dec 25, 2022
P.S Its easy is a website to cater to all your PS allotment needs

P.S. It's Easy All-in-one Web App for all your Practice School Allotment needs! Note: Developers trying to fork and test. Please wait, we'll set up a

Tanya Prasad 33 Sep 26, 2022
📜 A tiny custom element for all your scrollytelling needs!

<scroll-scene> element A tiny custom element for all your scrollytelling needs! The successor to @newswire/scroller. Key features ?? Less than 700 byt

Ryan Murphy 17 Dec 6, 2022
Sharing short code samples, logs or links is now easier than ever!

Pastebin Sharing short code samples, logs or links is now easier than ever. Explore the docs » • Report Bug • Request Feature • About The Project With

Prasoon Soni 4 Nov 26, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022
✨ A command-line interface for quickly sharing code snippets of your local files

?? snipli ✨ A command-line interface for quickly sharing code snippets for your local files Usage Commands Usage $ npm install -g snipli $ snipli COMM

Kira 146 Nov 3, 2022
✨ A command-line interface for quickly sharing code snippets of your local files

?? snipli ✨ A command-line interface for quickly sharing code snippets for your local files Usage Commands Usage $ npm install -g snipli $ snipli COMM

buidler's hub 127 May 11, 2022
Create beautiful code snippets from your VSCode environment.

Snippets Photo Shoot Create beautiful code snippets from your VSCode environment. How it works Select the code snippet you want to use, then right cli

Renato Pozzi 24 Aug 3, 2022
Self-hosted Slack bot to run your code snippets

slack-code-runner Self-hosted Slack bot to run your code snippets Prerequisites Docker Usage Create a new Slack app and add it to your workspace. You

Myeonghyeon Kim 5 Sep 14, 2022
Tenzi is a dice game. The player needs to roll dice until they are all the same. Clicking on a dice, freezes it at its current value between rolls. Best scores are saved to local storage.

Roll until all dice are the same Try me! Technologies Used Description Tenzi is a dice game used to demonstrate the use of React Hooks (useState, useE

Michael Kolesidis 7 Nov 23, 2022