From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Codrops is one of the most inspirational places on the internet. Yes, I am biased, but I am sure you can agree that that’s true.
If you’re looking for inspiration, the many, many creative resources you can find here are sure to spark an idea or two in your head. That’s one of the things I adore about this website—Manoela and Pedro never fail to impress us with what they have to offer.
If you’re looking to learn about how to use a CSS property, you will find a lot to learn by digging into the source code for the resources you get here. But what if you want to learn more about a property’s basics: property definition, different possible values and what each value means and does, etc.? Wouldn’t it be nice if you were able to find everything you were looking for right here, too?
A little over a year ago, we thought that it would be fantastic if Codrops had some kind of section where you can read and learn all about a CSS property, therefore turning Codrops into a perfect destination for anyone looking for inspiration and wanting to learn about the CSS behind it. Manoela approached me with the idea, and only a few days later, I started writing.
So, over the course of (slightly less than) a year, we’ve created a new department for Codrops: the CSS Reference. And we are beyond thrilled to finally share it with you.
Like any knowledge base, this reference is a work in progress and we strive to improve it and make it better. If you have any suggestions for improvements or see an error, please open an issue on this GitHub repo.
The Reference
The Codrops CSS Reference is an archive containing a list of entries categorized by type: CSS property, CSS function, CSS data type, CSS at-rule and CSS pseudo-classes/selectors/elements. Each entry is an article defining and explaining a CSS property, function, data type, at-rule or pseudo-class/selector/element.
In addition to these five categories, one more category exists: CSS concept. An entry in the CSS Concept category is a complete guide to a specific CSS concept or feature.
CSS concept entries serve as a ‘global’ entry for a group of related properties. For example, Flexbox and Counters are two concepts that have their own entries. Each entry explains what the concept means, what it does, and includes a definition and usage examples of its properties.
So, what does a CSS entry look like?
Structure of a CSS Entry
Each entry has a header that states what category this entry belongs to, and a live search module. We’ll talk about the live search feature in a following section.
Each CSS entry is also made up of several sections, the main ones are: Description, Official Syntax, Values, Examples, Live Demo, Browser Support, Further Reading and Related Entries. Every section may or may not have subsections.
The description section is where you learn what the CSS property/function/selector/etc. does. It’s basically where the definition and further explanation goes.
After the definition, you get an overview of the official syntax, initial value, what element(s) the CSS feature applies to, and whether or not its values are animatable. Some category types do not require this section, so it may or may not be there depending on what feature you are reading about.
Then each value is defined and described in the Values section. Again, if a CSS feature does not have a set of values (for example, an at-rule), this section is omitted.
The Examples section is where you will see examples of the feature in use—they are mainly snippets with or without screenshots of the result.
The Live Demo section will contain one or multiple live demos. The demos are sometimes live demos of the snippets in the Examples section, and sometimes they are that along with additional examples. Depending on browser support, the live demos might be accompanied with screenshots showing how the example should look like.
Note that many entries include several live demos, some of which are embedded within the description section.
Make sure you check the Browser Support section to determine whether or not the browser you are using supports the feature you are reading about.
Because there are many great reading resources about different CSS features and topics, the Further Reading section includes links to some good resources that are worth reading, along with a link to the specification(s) where the CSS feature at hand is defined.
Codrops Playground
While I wrote the entries, Manoela and Pedro worked on one of the best features of the reference: the playground.
The live demos you will see in the entries are all demos you can edit and play with yourself—and we strongly encourage you in the entries to do so, to get a better feel of how a certain feature works and what the different values do. Note that the playground is still in alpha stage and a lot of features are yet to come. Feel free to send any bug reports, suggestions or comments to playground ‘at’ codrops.com.
Live Search
For each entry, you get a live search module that you can also find in the Codrops homepage, right below the featured post, to the left.
The live search, as the name suggests, will give you a list of all CSS entries that match your search string. So if you search for a specific string (or even a letter), the search module will show all the entries that have that string in the title as a drop-down. This is particularly useful for getting related properties as you search for a specific property (for example: border, border-top, border-bottom, border-right, etc.).
Browser Support
Whenever available, you’ll see a CanIUse.com browser compatibility table embedded in the Browser Support section, so the compatibility table will always be up-to-date.
For the entries that don’t have a CanIUse support table, we wrote the browser support information by hand. The browser support for the majority of features is well-known and tested. Support for other features may or may not change in the future, so if you notice any outdated compatibility information, please do let us know, and we’ll update the entry accordingly.
Moving Forward
There are a few missing properties that have little or no current browser support, or whose specifications are unstable and still in flux. Our hope is to add the entries for those properties some time in the future when—hopefully—browser support gets better and specifications are stabilized.
We also all know that, in our field, something new emerges every day, so our hope is to continue growing and extending the reference, adding any additional properties and features to it with time. Even the current entries will get more improvements slowly with time.
We set milestones, and the first one was to deliver you a great reference to start with, and we’ll be working on gradually and continuously improving it in the future.
Your Feedback
Of course, your opinion and input is important to us. After all, we made this reference for you, so we want to make sure you find everything you need in it.
As such, we will be gathering your input and suggestions in a Github repository dedicated for collecting your issues and suggestions for the reference.
Found a bug? Found a piece of information that needs to be updated? Typos? Got a suggestion to improve the reference? Want us to add a concept entry for a specific CSS concept? Feel free to open an issue on Github. I will personally be looking into the issues frequently and answering your questions and making edits and updates as needed as much and as soon as possible. You can also tweet at me on Twitter if you’ve got a quick note about an entry or a request.
Final Words
We put our heart into the reference, hoping to have provided you with a very useful source of learning. I hope that you learn from the reference as much as I have learned in the process of writing it. 🙂
And we also hope that you like the subtle makeover Codrops got with this release, too!
Thank you very much for reading, and don’t forget to go check the reference out!
Totally.
Just one more great reason to visit Codrops.
Congratz & keep it up
This is awesome. I was looking for something like this after seeing Mozilla try to improve W3Schools
Thanks guys for awesome work… just one suggestion… since this is a CSS Reference, would be nice to see some more info related to specific rule… for example…
There is the @document rule, since when this is it available? CSS 2, CSS 2.1 or CSS3? When it was approved and who’s the author or authors… I believe those infos would make the reference much more complete…
But anyway, it is just a suggestion for improvement and does not affect the great quality of this work…
Keep up with the good work…
Hey Paulo,
Thank you for your comment. 🙂
The aim of the reference is to act as a collection of informal tutorials for the CSS features without going into the dry details of the history that might be irrelevant to its current use. For example, who the author of a specification is has no effect on how the property can or will be used.
The information you are referring to can be found in the specification for each feature—a link to the specification is included for every entry. Feel free to have a look at the spec for any additional technical details like those.
Cheers! 🙂
Great article. I like it! 🙂
wow guys!!! this is incredible!!! keep this up, i always come back to tympanus for my css3 needs!!! 🙂
Thank you so much for letting me give a good css reference.
too good man….!!!
You are so awesome! Thank you for you work and to let me explore the possibilities of Webdesign each time I visit this website. 😉
Keep rocking!
Perfect, as usual ! Thanks for this article
Very Cool! I want to say that I’ve been a follower for years and Codrops is the innovation authority when it comes to interaction and thinking outside the box. I do have a couple of suggestions which maybe you guys thought of already.
1. The CSS reference search module should also be within the reference for quick access (Maybe somewhere sticky on the page?). It might take the user some time to find exactly what they’re looking for if they have to). To take it a step further as you search for the word it filters through all of them (e.g. http://sunnywalker.github.io/jQuery.FilterTable/filtertable-striping.html) on the page which leads me to:
2. A filtering system that can quickly filter by the category you select. (e.g. Mix it up).
3. The ability to have the sections collapsible. Property for example is crazy long and might get bigger over the years.
4. This one is more of a nice to have for those that are applicable. A tooltip rollover so that someone who doesn’t know what property is can quickly glance and see what it is.
On a side note talk about all the SEO juice from all these pages!!!! LOL.
In short, you guys rock!!!!
Hi Jose!
Thanks a lot for your feedback and your kind words! Those are really great suggestions and we’ll definitely keep them in mind (the search is already on our improvements list). Love the tooltip idea 🙂
Thanks again! Cheers, ML
Thanks for taking the time to put this together. I love what you guys are doing at Codrops and this is yet another example of why I visit you guys so frequently.
Keep up the great work!
Best
Jude
P.S. Would love to see a modern take on table design in the playground!
Awesome!! Congrats!
I’m so excited for all the new endeavors that Codrops is taking. I’ve been referring to Codrops for inspiration and help with HTML/CSS for years. It has been one of my reliable sources for web inspiration! Keep up the great work.
Its really superb..
Keep going
nice, thanks
This is fantastic!
Thank you!
Amazing job!!
awesome 🙂
This is fantastic! Congratulations and thanks for creating this. 🙂
A fantastic reference tool, beautiful and legible.
I will be using it frequently: there’s so many syntaxes I keep forgetting how to spell but I’m planning to use more often.
Like translate() function, repeating-linear-gradient for stripy backgrounds, ::first-letter … ).
And you even added detailed browser support! Amazing work.
This was a very good work from you guys. Keep on going
Really it’s great. Thanks for sharing.
This is great! Thank you for creating this!
Thanks so much for the time and effort you put into this. I’m sure it will serve as a prime resource for a long time, as your work is typically very high-quality. Thanks for creating and sharing this reference.
Thanks for sharing the efforts of yours. It was worth reading the post. Great information. Cheers!
Manager,
http://www.pixelcrayons.com/
Thanks for the amazing amount of time you are saving us!
This is so dope, thanks for taking the time to do this!
Obligated bookmark!
This is great! Would love to see this available in the Dash app: http://kapeli.com/docsets
This is the best css reference i’ve ever seen on the web. Hats off for you!
Its a pleasure see this ! thanks! its a school!for me …
It’s amazing the design ideas and concepts that you bring to us!! thanks!
Brilliant! Thanks a lot!
Codrops is definitely one of the most inspirational places for designers on the web. Thank you for all you post! Great work!
You guys are awesome!
Thank you guys…Keep up the awesome work.. 😀
Really like it, great job.
One little item of feedback though, the browser support table is way to far down. I have to look/search for it, but it should be clear from the top, IMO.
Awesome! Now Javascript, jQuery & HTML please!!
cooll
Really like it, great job.
One little item of feedback though, the browser support table is way to far down. I have to look/search for it, but it should be clear from the top, IMO.
Only not to use this overused phrase “awesome”: this is more than absolutely and extremely fabulous! So much knowledge and well written guides – about EVERY. SINGLE. PROPERTY.
I’m gonna freak out. ..no for real: i am just freaking out! Like i’m about to print everything out and name it “The Web Bible”
Well done. Very nice.
Now go and have a ton of cookies. =)
Just took a peek at some of the new entries, they are AWESOME!!!!
Thanks so much for providing such a great place for learning CSS!!
How to download This School CSS????
You deserve an Oscar n_n. Thank you!
Hello Sara,
Your works are really so inspiring and helpful. I just wanted to ask you if could please kindly make a Web Accessibility Initiatives – Accessible Rich Internet Application (WAI-ARIA) REFERENCE guide just like the CSS Reference and show how and where to use it. I believe The World will appreciate it. We the beginner level Web Developers needs to learn this ASAP for better and accessible web experiences for all. Thank You so much for all of your contribution for this Industry. Take Care and lot’s of LOVE for You.
just … wow, thank you!
thank you!
here to use it. I believe The World will appreciate it. We the beginner level Web Developers needs to learn this ASAP for better and accessible web experiences for all. Thank You so much for all of your contribution for this Industry. Take Care and lot’s of LOVE for You.