chalarangelo / 30-seconds-of-css Goto Github PK
View Code? Open in Web Editor NEWShort CSS code snippets for all your development needs
Home Page: https://www.30secondsofcode.org/css/p/1
License: Creative Commons Attribution 4.0 International
Short CSS code snippets for all your development needs
Home Page: https://www.30secondsofcode.org/css/p/1
License: Creative Commons Attribution 4.0 International
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
@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:
Is it possible to reinstate the old UI and old domain temporarily until these particular kinks are ironed out?
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.
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
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
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.
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!
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.
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;
}
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 !
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
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:
Once again, nice job. I'm a big fan 🥇
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
video::-webkit-media-controls {
filter: invert(1) grayscale(1) !important;
opacity: " +transparency+ " !important;
}
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/
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. :)
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.
I noticed while browsing this morning and not sure why. Worked perfectly on Chrome.
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!
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!
:)
Excuse me, can I translate this document in Chinese?
Fantastic this project, have thought to make the translation of it to other languages?
The Explanation section has one of the dppx
listed as ddpx
.
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?
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.
✌️
o(≧v≦)o~~好棒
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.
it would be better if it was made into PWA.. :)
What about multiline truncation with line-clamp
? I can make usage example.
https://caniuse.com/#search=line-clamp
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).
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
Animation (possibly even a loaders subcategory)
Donut spinner
Hover underline animation
Mouse cursor gradient tracking
Easing variables
Interactivity
Disable selection
Popout menu
Hover underline animation
(a snippet can fall under multiple categories)Visual
Hairline border
Triangle
System font stack
Gradient text
Etched text
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.
Small bug: Button Border Animation is not clickable in the left bar.
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 ?
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.
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.)
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.
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;
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
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 ❤️
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%;
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:
Shouldn't the users of the snipped be warned about these limitations?
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
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)
.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.
Nice addition to this great repo would be : background transparency:
nicely explained in this stackoverflow answer:
if you could implement it, it'd be great.
What is the name of the color scheme used to highlight the code? I really liked it.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.