praveenpal4232/css3-demos

This repo is the code and demo of new features in CSS and ready-to-use css code.

💻 CSS3 New Features Code Demos & more...

This repo is dedicated to all the new CSS features releasing in the CSS. This is WIP repo and less jazzy UI (I know it should be jazzy , as we are talking about CSS).

❔ Why?

While learning new CSS3 features and making youtube videos for JSLovers, I started this repo. Also, to reduce the development efforts I have created ready-to-use code samples for the devs.

📌 TOC

New Features

• ✅ calc
• ✅ counter
• ✅ filters
• ✅ mixins [UPDATE: NOT ANYMORE SUPPORTED]
• ✅ scroll behaviour
• ✅ variables
• ✅ writing modes
• ✅ current color
• flexbox - work in progress
• grids

CSS + HTML Ready to use code

• ✅ Buttons
• ✅ Alerts & Notification
• ✅ Tags
• ✅ List
• ✅ Card
• Badegs
• Tables
• Images
• Forms
• Navigation
• Layouts
• Gallery
• Accordion
• Icons
• Tabs
• Slideshow

💡 Ready to use code - HTML and CSS

Below are the ready-to-use CSS and HTML code snippts for your project. Right now, this is work-in-progress repo.

CSS Buttons

CSS Tags

CSS Alerts

CSS Cards

💡 CSS3 New Features:

Below are the new CSS3 features code samples.

• current color

 .border{
     color: red;
     border: 1px solid currentColor;
 }

• Writing Modes

 .border{
     color: red;
     border: 1px solid currentColor;
 }

• CSS calc

 .box{
     width: calc(100 * 2px);
  }

• CSS filters
• CSS Mixins
• CSS Variables

:root: {
 --red : red;
}

.block {
    color :var(--red)
}

• CSS Grids
• CSS Flexbox

⌚ What's next?

• Add all possible 'ready to use' codes.
• Make the code responsive.
• Make the all examples accessible.
• Add colors options.
• Add styleguide.

❤️ Contribution

If you would like to contribute please raise the PR.

Reach Me 👩

You can email me at [email protected] or reach me on twitter @hellonehha