Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdn/css-examples
Code examples that accompany the MDN CSS documentation
https://github.com/mdn/css-examples
css examples
Last synced: about 11 hours ago
JSON representation
Code examples that accompany the MDN CSS documentation
- Host: GitHub
- URL: https://github.com/mdn/css-examples
- Owner: mdn
- License: cc0-1.0
- Created: 2017-01-12T21:32:23.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-09T09:49:55.000Z (3 months ago)
- Last Synced: 2024-12-05T20:06:56.219Z (8 days ago)
- Topics: css, examples
- Language: HTML
- Homepage: https://developer.mozilla.org/docs/Web/CSS
- Size: 36.8 MB
- Stars: 621
- Watchers: 41
- Forks: 854
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- jimsghstars - mdn/css-examples - Code examples that accompany the MDN CSS documentation (HTML)
README
# css-examples
Code examples that accompany various MDN CSS documentation pages.
> [!NOTE]
> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
> These methods are simpler to maintain as the code lives beside the rest of the content.
> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html).
The "counter-style-demo" directory contains a demo for the [@counter-style documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style). See the live demo [here](https://mdn.github.io/css-examples/counter-style-demo/).
The "moz-context-properties" directory contains a demo for the [-moz-context-properties documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-context-properties). See the live demo [here](https://mdn.github.io/css-examples/moz-context-properties/).
The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
The "object-fit-basics" directory contains a simple page demonstrating typical usage of different `object-fit` and `object-position` values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
The "object-fit-gallery" directory contains a fun image gallery that uses `object-fit` to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different `overscroll-behavior` values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/).
## Contribute to MDN Web Docs
You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work.
The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository.
By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md).## Get in touch
You can communicate with the MDN Web Docs team and community using the [communication channels][].
[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels