diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..3621372 Binary files /dev/null and b/.DS_Store differ diff --git a/CSSScrollBehaviour/index.html b/CSSScrollBehaviour/index.html deleted file mode 100755 index 13ff069..0000000 --- a/CSSScrollBehaviour/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - CSS Scrollbehaviour - - - - - -
- Link One -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum mattis massa, non pharetra metus pharetra eu. Aenean sagittis sollicitudin imperdiet. Quisque aliquet dui turpis, fermentum ornare nibh condimentum nec. Integer porta tortor urna, id maximus ex aliquet rutrum. Mauris ultricies, velit at pellentesque varius, nisi nisi laoreet odio, ac semper velit enim at magna. Aliquam et odio sit amet ex accumsan mollis. Nulla euismod dui at nisl gravida, id hendrerit arcu iaculis. Sed porttitor massa non erat auctor, nec accumsan velit euismod. - - Pellentesque elit augue, tristique et lorem at, fermentum scelerisque purus. Phasellus fringilla, urna vitae condimentum fringilla, dui quam venenatis nulla, id placerat ante dolor sed nulla. Aenean et auctor massa. Vestibulum elementum in tellus sed interdum. Nunc eget erat posuere, convallis felis ac, aliquet leo. Vivamus feugiat odio in est blandit, sit amet sodales quam posuere. Quisque et convallis ante. Ut convallis orci in dui porta, et bibendum lacus sodales. Donec est dui, maximus ac nisi at, viverra mollis dui. Fusce est quam, blandit at erat ultricies, luctus laoreet augue. Fusce in augue porta, porttitor sapien ut, pellentesque mauris. Suspendisse sit amet nisi massa. Aenean quis nunc porttitor, convallis massa suscipit, aliquet diam.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum mattis massa, non pharetra metus pharetra eu. Aenean sagittis sollicitudin imperdiet. Quisque aliquet dui turpis, fermentum ornare nibh condimentum nec. Integer porta tortor urna, id maximus ex aliquet rutrum. Mauris ultricies, velit at pellentesque varius, nisi nisi laoreet odio, ac semper velit enim at magna. Aliquam et odio sit amet ex accumsan mollis. Nulla euismod dui at nisl gravida, id hendrerit arcu iaculis. Sed porttitor massa non erat auctor, nec accumsan velit euismod. - - Pellentesque elit augue, tristique et lorem at, fermentum scelerisque purus. Phasellus fringilla, urna vitae condimentum fringilla, dui quam venenatis nulla, id placerat ante dolor sed nulla. Aenean et auctor massa. Vestibulum elementum in tellus sed interdum. Nunc eget erat posuere, convallis felis ac, aliquet leo. Vivamus feugiat odio in est blandit, sit amet sodales quam posuere. Quisque et convallis ante. Ut convallis orci in dui porta, et bibendum lacus sodales. Donec est dui, maximus ac nisi at, viverra mollis dui. Fusce est quam, blandit at erat ultricies, luctus laoreet augue. Fusce in augue porta, porttitor sapien ut, pellentesque mauris. Suspendisse sit amet nisi massa. Aenean quis nunc porttitor, convallis massa suscipit, aliquet diam.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum mattis massa, non pharetra metus pharetra eu. Aenean sagittis sollicitudin imperdiet. Quisque aliquet dui turpis, fermentum ornare nibh condimentum nec. Integer porta tortor urna, id maximus ex aliquet rutrum. Mauris ultricies, velit at pellentesque varius, nisi nisi laoreet odio, ac semper velit enim at magna. Aliquam et odio sit amet ex accumsan mollis. Nulla euismod dui at nisl gravida, id hendrerit arcu iaculis. Sed porttitor massa non erat auctor, nec accumsan velit euismod. - - Pellentesque elit augue, tristique et lorem at, fermentum scelerisque purus. Phasellus fringilla, urna vitae condimentum fringilla, dui quam venenatis nulla, id placerat ante dolor sed nulla. Aenean et auctor massa. Vestibulum elementum in tellus sed interdum. Nunc eget erat posuere, convallis felis ac, aliquet leo. Vivamus feugiat odio in est blandit, sit amet sodales quam posuere. Quisque et convallis ante. Ut convallis orci in dui porta, et bibendum lacus sodales. Donec est dui, maximus ac nisi at, viverra mollis dui. Fusce est quam, blandit at erat ultricies, luctus laoreet augue. Fusce in augue porta, porttitor sapien ut, pellentesque mauris. Suspendisse sit amet nisi massa. Aenean quis nunc porttitor, convallis massa suscipit, aliquet diam.
- -
- - - \ No newline at end of file diff --git a/CSSScrollBehaviour/style.css b/CSSScrollBehaviour/style.css deleted file mode 100755 index fc25531..0000000 --- a/CSSScrollBehaviour/style.css +++ /dev/null @@ -1,9 +0,0 @@ -html { - scroll-behavior: smooth; -} - -.container { - width: 400px; - height: 400px; - margin: 0 auto; -} diff --git a/README.md b/README.md index 712b1d9..76fab18 100755 --- a/README.md +++ b/README.md @@ -1,26 +1,13 @@ -# :computer: CSS3 New Features Code Demos & more... +# :computer: CSS Based Ready to use code demos +CSS Based Ready to use code demos -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). # :grey_question: 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. + ## :pushpin: TOC -### New Features - -- :white_check_mark: calc -- :white_check_mark: counter -- :white_check_mark: filters -- :white_check_mark: mixins [UPDATE: NOT ANYMORE SUPPORTED] -- :white_check_mark: scroll behaviour -- :white_check_mark: variables -- :white_check_mark: writing modes -- :white_check_mark: current color -- flexbox - work in progress -- grids ### CSS + HTML Ready to use code diff --git a/Text-numeric/index.html b/Text-numeric/index.html deleted file mode 100755 index 70e0429..0000000 --- a/Text-numeric/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - CSS Text Numeric - - - - - -
-

Hey, look now you can differinate between 0 and 0

-

123

-

1st

-
- - - \ No newline at end of file diff --git a/Text-numeric/style.css b/Text-numeric/style.css deleted file mode 100755 index 7215d35..0000000 --- a/Text-numeric/style.css +++ /dev/null @@ -1,25 +0,0 @@ -main { - --padding-global: 10px; - background: #eee; - width: calc(780px - var(--padding-global) * 2); - margin: 0 auto; - padding: 10px; -} -body { - font-family: arial; -} -h3 { - font-size: 34px; -} -.slashed { - font-variant-numeric: slashed-zero; -} -.old { - font-variant-numeric: oldstyle-nums; -} -.ordinal { - font-variant-numeric: ordinal; - font-size: 11px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; -} - diff --git a/css-alert-status/index.html b/cssAlerts/index.html similarity index 100% rename from css-alert-status/index.html rename to cssAlerts/index.html diff --git a/css-alert-status/style.css b/cssAlerts/style.css similarity index 100% rename from css-alert-status/style.css rename to cssAlerts/style.css diff --git a/cssCalc/index.html b/cssCalc/index.html deleted file mode 100755 index 5969d06..0000000 --- a/cssCalc/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - CSS Calc() - - - - - -
-
1
-
2
-
3
-
- - - \ No newline at end of file diff --git a/cssCalc/style.css b/cssCalc/style.css deleted file mode 100755 index 07dd0fe..0000000 --- a/cssCalc/style.css +++ /dev/null @@ -1,7 +0,0 @@ -main { - --padding-global: 10px; - background: #eee; - width: calc( 780px - var(--padding-global) * 2); - margin: 0 auto; - padding: 10px; -} \ No newline at end of file diff --git a/css-cards/index.html b/cssCards/index.html similarity index 100% rename from css-cards/index.html rename to cssCards/index.html diff --git a/css-cards/style.css b/cssCards/style.css similarity index 100% rename from css-cards/style.css rename to cssCards/style.css diff --git a/cssCounter/index.html b/cssCounter/index.html deleted file mode 100755 index cbb2fb2..0000000 --- a/cssCounter/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - CSS Counter - - - - - -
-

Hello!! CSS Counter. New way and dynamic way to generate the counter by CSS.

-
-

Starters

-

A starter is a small quantity of food that is served as the first course of a meal. ... A car's starter is basically an electric motor. 3. countable noun [usually plural] The starters in a race are the people or animals who take part at the beginning even if they do not finish.

-
-
Cheese Balls
-
Honey Fires
-
Mushrooms with cheese
-
Paneer
-
Peas
-
-
-
-

Main Course

-

The main course is the featured or primary dish in a meal consisting of several courses. It usually follows the entrée ("entry") course.

-
-
Curry and Breads
-
Thai Curry and Rice
-
Palak and breads
-
Mushrooms
-
Pizza veg and spicy
-
-
-
-

Desserts

-

A usually sweet course or dish (as of pastry or ice cream) usually served at the end of a meal

-
-
Custard
-
Seasonal fruits
-
Icecreams
-
Choclate Pastery
-
Rum balls
-
-
-
- - - \ No newline at end of file diff --git a/cssCounter/style.css b/cssCounter/style.css deleted file mode 100755 index 9d59238..0000000 --- a/cssCounter/style.css +++ /dev/null @@ -1,31 +0,0 @@ -main { - --padding-global: 10px; - background: #eee; - width: calc(780px - var(--padding-global) * 2); - margin: 0 auto; - padding: 10px; -} - -body { - counter-reset: section; -} - -h2 { - border-top: 1px solid #b7b7b7; - border-bottom: 1px solid currentColor; - line-height: 52px; -} - -h2::before { - counter-increment: section; - content: "This is " counter(section) " : "; -} - -dl { - counter-reset: dl; -} - -dt::before { - counter-increment: dl; - content: " " counter(dl) " : "; -} diff --git a/cssFilters/index.html b/cssFilters/index.html deleted file mode 100755 index b0efb94..0000000 --- a/cssFilters/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - CSS Filters - - - - - -
- -
- - - - - - - - - - - - - - \ No newline at end of file diff --git a/cssFilters/script.js b/cssFilters/script.js deleted file mode 100755 index 55bc03a..0000000 --- a/cssFilters/script.js +++ /dev/null @@ -1,14 +0,0 @@ -var buttonElm = document.getElementsByTagName('button'), - imgElm = document.getElementById('image'); - -for (var i = 0; i < buttonElm.length; i++) { - buttonElm[i].addEventListener('click', function(e) { - - if (imgElm.hasAttribute('class') === true) { - imgElm.removeAttribute('class'); - } - var filter = this.getAttribute('data-filter'); - imgElm.classList.add(filter); - }); - -} \ No newline at end of file diff --git a/cssFilters/style.css b/cssFilters/style.css deleted file mode 100755 index 06bc266..0000000 --- a/cssFilters/style.css +++ /dev/null @@ -1,53 +0,0 @@ -.blur { - -webkit-filter: blur(2px); - /* Safari 6.0 - 9.0 */ - filter: blur(2px); -} - -.saturate { - -webkit-filter: saturate(10%); - /* Safari 6.0 - 9.0 */ - filter: saturate(10%); -} - -.invert { - -webkit-filter: invert(30%); - /* Safari 6.0 - 9.0 */ - filter: invert(30%); -} - -.grayscale { - -webkit-filter: grayscale(30%); - /* Safari 6.0 - 9.0 */ - filter: invert(30%); -} - -.brightness { - -webkit-filter: brightness(30%); - /* Safari 6.0 - 9.0 */ - filter: brightness(30%); -} - -.contrast { - -webkit-filter: contrast(30%); - /* Safari 6.0 - 9.0 */ - filter: contrast(30%); -} - -.rotate { - -webkit-filter: hue-rotate(30deg); - /* Safari 6.0 - 9.0 */ - filter: hue-rotate(30deg); -} - -.opacity { - -webkit-filter: opacity(0.3); - /* Safari 6.0 - 9.0 */ - filter: opacity(0.3); -} - -.sepia { - -webkit-filter: sepia(30%); - /* Safari 6.0 - 9.0 */ - filter: rotate(30%); -} diff --git a/galleries/02/index.html b/cssGallery/02/index.html similarity index 100% rename from galleries/02/index.html rename to cssGallery/02/index.html diff --git a/galleries/02/style.css b/cssGallery/02/style.css similarity index 100% rename from galleries/02/style.css rename to cssGallery/02/style.css diff --git a/css-list/index.html b/cssList/index.html similarity index 100% rename from css-list/index.html rename to cssList/index.html diff --git a/css-list/style.css b/cssList/style.css similarity index 100% rename from css-list/style.css rename to cssList/style.css diff --git a/cssMixins/index.html b/cssMixins/index.html deleted file mode 100755 index c3e7345..0000000 --- a/cssMixins/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - CSS Mixins - - - - - -
-

NOT SUPPORTED BY ANY BROWSER NOW!!

- - - -
- - - \ No newline at end of file diff --git a/cssMixins/style.css b/cssMixins/style.css deleted file mode 100755 index 27acf2f..0000000 --- a/cssMixins/style.css +++ /dev/null @@ -1,37 +0,0 @@ -section { - width: 800px; - background: #eee; - margin: 0 auto; - padding: 10px; - min-height: 300px; -} - -button { - display: block; - margin: 10px; - @apply --button-style; -} - -:root { - --button-style: { - width: 300px; - padding: 30px 20px; - border-radius: 5px; - background: blue; - color: #fff; - font-size: 54px; - text-transform: uppercase; - } -} - -.btnOne { - background: red; - font-size: 24px; - padding: 10px; - border: 0; -} - -.btnTwo { - background: green; - width: 200px; -} \ No newline at end of file diff --git a/css-tags/index.html b/cssTags/index.html similarity index 100% rename from css-tags/index.html rename to cssTags/index.html diff --git a/css-tags/style.css b/cssTags/style.css similarity index 100% rename from css-tags/style.css rename to cssTags/style.css diff --git a/cssVariables/index.html b/cssVariables/index.html deleted file mode 100755 index 0e446f1..0000000 --- a/cssVariables/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - CSS Variables - - - - - -
-

This is the heading!!

-

hy

-
- -
TWO
-

THREE

- - - \ No newline at end of file diff --git a/cssVariables/style.css b/cssVariables/style.css deleted file mode 100755 index f671c26..0000000 --- a/cssVariables/style.css +++ /dev/null @@ -1,53 +0,0 @@ -:root { - --margin-10px: red; - --heading-fontSize: 42px; - --heading-fontfamily: Impact; - --string-name: 'Naina'; - --blue-color: --organe-color; - --organe-color: orange; - --foo: 100px; - --bar: calc(var(--foo) + 10px); - --f: calc(var(--bar) + 10px); -} - -h2 { - color: var(--blue-color), red; - font: bold var( --heading-fontSize) var(--heading-fontfamily); - --padding-global: 20px; -} - -h3 { - font-size: var( --foo); -} - -div { - padding: 10px; - background: var(--blue-color); - width: calc(500px - var(--padding-global)); -} - -div:before { - content: "Hello " var( --string-name); -} - -:root, -:root:lang(en) { - --external-link: "external link"; -} - -:root:lang(de) { - --external-link: "externer Link"; -} - -h3::after { - content: "hello " var(--external-link) ")" -} - -.two { - width: 100px; - background: Red; -} - -.three { - width: var(--foo) -} \ No newline at end of file diff --git a/cssWritingModes/index.html b/cssWritingModes/index.html deleted file mode 100755 index 0b72222..0000000 --- a/cssWritingModes/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - CSS writing Modes - - - - - -

Hello World

-

This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text

-

This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text

-

This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text This is the sample text

-
-
-

I am heading 1

-

-
-

I am heading 2

-
-
-

I am heading 3

-
-
-

I am heading 4

-
-
- - - \ No newline at end of file diff --git a/cssWritingModes/style.css b/cssWritingModes/style.css deleted file mode 100755 index d0dfc0d..0000000 --- a/cssWritingModes/style.css +++ /dev/null @@ -1,43 +0,0 @@ -h1 { - writing-mode: vertical-rl; - float: left; -} - -p { - width: 300px; - display: inline-block; -} - -.picGrid { - margin-top: 70px; -} - -div { - width: 200px; - height: 200px; - background: #eee; - display: inline-block; -} - -div h2 { - margin-top: 30px; -} - -.one h2 { - writing-mode: vertical-lr; -} - -.two h2 { - writing-mode: vertical-lr; - float: right; -} - -.three h2 { - writing-mode: vertical-lr; - float: right; -} - -.four h2 { - writing-mode: vertical-lr; - float: right; -} \ No newline at end of file diff --git a/currentcolor/index.html b/currentcolor/index.html deleted file mode 100755 index b1d5ee0..0000000 --- a/currentcolor/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - CSS CurrentColor - - - - -

Let's Learn CSS Secrets

- - - - \ No newline at end of file diff --git a/currentcolor/style.css b/currentcolor/style.css deleted file mode 100755 index 72042cb..0000000 --- a/currentcolor/style.css +++ /dev/null @@ -1,47 +0,0 @@ -body{ - font-family:arial; - background-color:#982286 ; - text-align:center; - } - - h2{ - text-align:Center; - color:#fff; - text-shadow:2px 2px 2px #38194F; - - } - button{ - color:#38194F; - width:300px; - height:50px; - border:2px solid currentColor; - background-color:#fff; - box-shadow:3px 3px 1px currentColor; - cursor: pointer; - transition: all 0.3s ease-out; - border:1px solid transparent; - } - - - button:hover{ - color:#7D0A91; - background:currentColor; - box-shadow:3px 3px 1px #38194F; - border:1px solid #38194F; - - } - - button:before{ - content: "HOVER ME"; - color:#38194F; - font-size:18px; - } - - button:hover:before{ - color:#fff; - - - } - - - \ No newline at end of file