Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3f9ef50

Browse files
chapter 2 - 2.2 uploaded
chapter 2 - 2.2 uploaded
1 parent 7677eef commit 3f9ef50

File tree

1 file changed

+148
-11
lines changed

1 file changed

+148
-11
lines changed

‎README.md

Lines changed: 148 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,11 @@ Topics included/covered
6464
- 1.6. [CSS Variables vs Preprocessor Variables](#16-css-variables-vs-preprocessor-variables) | [Difference Between CSS Variables and Preprocessor Variables](#16-difference-between-css-variables-and-preprocessor-variables)
6565
- 1.7. [CSS Variables with JavaScript](#17-css-variables-with-javascript)
6666
- 1.8. [CSS Variables var() function](#18-css-variables-var-function)
67-
68-
2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)
69-
- 2.1. [Managing Colors-Theme](#21-managing-colors-theme)
7067

68+
2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)
69+
- 2.1. [Managing Colors-Theme](#21-managing-colors-theme )
70+
- 2.2. [Hover with Fallback support](#22-hover-with-fallback-support)
71+
7172
3. [CSS Variables Resources](#3-css-variables-resources)
7273

7374
1 Introduction to CSS Variables Custom Properties
@@ -521,8 +522,8 @@ ul > li {
521522

522523
<p>
523524
<figure>
524-
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.1.1-style-define-variables-global-green-theme.png" alt="Styles Declaring & Using CSS Variables - Create a Green Theme" title="Styles Declaring & Using CSS Variables - Create a Green Theme" width="1000" border="2" />
525-
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.1.1 - Styles Declaring & Using CSS Variables - Create a Green Theme </figcaption>
525+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.1.1-style-define-variables-global-green-theme.png" alt="Declaring & Using CSS Variables - Styles Create a Green Theme" title="Declaring & Using CSS Variables - Styles Create a Green Theme" width="1000" border="2" />
526+
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.1.1 - Declaring & Using CSS Variables - Styles Create a Green Theme </figcaption>
526527
</figure>
527528
</p>
528529

@@ -637,8 +638,8 @@ ul > li {
637638

638639
<p>
639640
<figure>
640-
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.1.2-style-define-convert-variables-global-blue-theme.png" alt="Styles Declaring & Using CSS Variables - Convert to Blue Theme" title="Styles Declaring & Using CSS Variables - Convert to Blue Theme" width="1000" border="2" />
641-
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.1.2 - Styles Declaring & Using CSS Variables - Convert to Blue Theme </figcaption>
641+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.1.2-style-define-convert-variables-global-blue-theme.png" alt="Declaring & Using CSS Variables - Styles Convert to Blue Theme" title="Declaring & Using CSS Variables - Styles Convert to Blue Theme" width="1000" border="2" />
642+
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.1.2 - Declaring & Using CSS Variables - Styles Convert to Blue Theme </figcaption>
642643
</figure>
643644
</p>
644645

@@ -753,8 +754,8 @@ ul > li {
753754

754755
<p>
755756
<figure>
756-
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.2.1-style-define-variables-local.png" alt="Styles Declaring & Using CSS Variables - Create local scoped variables" title="Styles Declaring & Using CSS Variables - Create local scoped variables" width="1000" border="2" />
757-
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.2.1 - Styles Declaring & Using CSS Variables - Create local scoped variables </figcaption>
757+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.5.2.1-style-define-variables-local.png" alt="Declaring & Using CSS Variables - Styles Create local scoped variables" title="Declaring & Using CSS Variables - Styles Create local scoped variables" width="1000" border="2" />
758+
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.2.1 - Declaring & Using CSS Variables - Styles Create local scoped variables </figcaption>
758759
</figure>
759760
</p>
760761

@@ -1017,11 +1018,147 @@ body {
10171018

10181019
<p>
10191020
<figure>
1020-
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.1.2-style-css-var-demo-managing-colors-themes.png" alt="Style CSS Variables Demo - Managing Colors Themes" title="Style CSS Variables Demo - Managing Colors Themes" width="1000" border="2" />
1021-
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.1.2 - Style CSS Variables Demo - Managing Colors Themes </figcaption>
1021+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.1.2-style-css-var-demo-managing-colors-themes.png" alt="CSS Variables Demo - Style Managing Colors Themes" title="CSS Variables Demo - Style Managing Colors Themes" width="1000" border="2" />
1022+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.1.2 - CSS Variables Demo - Style Managing Colors Themes </figcaption>
1023+
</figure>
1024+
</p>
1025+
1026+
2.2. Hover with Fallback support
1027+
---------------------
1028+
1029+
> **Syntax & Example**: `2.2-css-var-demo-hover-fallback-support.html`
1030+
1031+
```html
1032+
<!DOCTYPE html>
1033+
<html lang="en">
1034+
1035+
<head>
1036+
1037+
<meta charset="UTF-8">
1038+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1039+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1040+
<title>2.2-css-var-demo-hover-fallback-support.html</title>
1041+
1042+
<link rel="stylesheet" href="2.2-style-css-var-demo-hover-fallback-support.css">
1043+
1044+
</head>
1045+
1046+
<body>
1047+
1048+
<div class="container">
1049+
1050+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
1051+
1052+
<h2 class="subheading-text" id="subHeadingText">2.2 - Hover effect with Fallback support</h2>
1053+
1054+
<article class="info-text">
1055+
- Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function <br/>
1056+
- The CSS `var()` function can be used to insert the value of a custom property or a CSS variable <br/>
1057+
- The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support<br/> <br/>
1058+
</article>
1059+
1060+
<nav class="button-container">
1061+
<div class="button btn-default">btn-default </div>
1062+
<div class="button btn-primary">btn-primary </div>
1063+
<div class="button btn-secondary">btn-secondary </div>
1064+
<div class="button btn-success">btn-success </div>
1065+
<div class="button btn-danger">btn-danger </div>
1066+
<div class="button btn-info">btn-info </div>
1067+
<div class="button btn-warning">btn-warning </div>
1068+
<div class="button btn-light">btn-light </div>
1069+
<div class="button btn-dark">btn-dark </div>
1070+
</nav>
1071+
1072+
</div>
1073+
1074+
</body>
1075+
1076+
</html>
1077+
```
1078+
1079+
> **Syntax & Example**: `2.2-style-css-var-demo-hover-fallback-support.css`
1080+
1081+
```css
1082+
:root {
1083+
/* define/set variables */
1084+
--main-font-family: Verdana; --main-line-height: 2;
1085+
}
1086+
1087+
body {
1088+
font-family: var(--main-font-family);
1089+
}
1090+
1091+
.top-heading-text {
1092+
line-height: var(--main-line-height);
1093+
}
1094+
1095+
.info-text {
1096+
color: var(--main-theme-color);
1097+
line-height: var(--main-line-height);
1098+
max-width: 70%; margin: 0 auto;
1099+
}
1100+
1101+
.button {
1102+
color: var(--main-theme-color, #000000); /* black is fallback color */
1103+
border: 2px solid var(--main-theme-color, #000000);
1104+
display: inline-block; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer;
1105+
}
1106+
1107+
.button:hover {
1108+
color: #ffffff;
1109+
border: 2px solid var(--main-theme-color, #000000); background-color: var(--main-theme-color, #000000);
1110+
}
1111+
1112+
.btn-default {
1113+
/* no --main-theme-color defined for default button, so it will have theme color as fallback black color */
1114+
}
1115+
1116+
.btn-primary{
1117+
--main-theme-color: #007bff;
1118+
}
1119+
1120+
.btn-secondary{
1121+
--main-theme-color: #6c757d;
1122+
}
1123+
1124+
.btn-danger{
1125+
--main-theme-color: #dc3545;
1126+
}
1127+
1128+
.btn-success{
1129+
--main-theme-color: #28a745;
1130+
}
1131+
1132+
.btn-info{
1133+
--main-theme-color: #17a2b8;
1134+
}
1135+
1136+
.btn-warning{
1137+
--main-theme-color: #ffc107;
1138+
}
1139+
1140+
.btn-light{
1141+
--main-theme-color: #dedede
1142+
}
1143+
1144+
.btn-dark{
1145+
--main-theme-color: #343a40;
1146+
}
1147+
```
1148+
1149+
<p>
1150+
<figure>
1151+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.2.1-css-var-demo-hover-fallback-support.png" alt="CSS Variables Demo - Hover effect with fallback support" title="CSS Variables Demo - Hover effect with fallback support" width="1000" border="2" />
1152+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.2.1 - CSS Variables Demo - Hover effect with fallback support </figcaption>
10221153
</figure>
10231154
</p>
10241155

1156+
<p>
1157+
<figure>
1158+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.2.2-style-css-var-demo-hover-fallback-support.png" alt="Style CSS Variables Demo - Hover effect with fallback support" title="Style CSS Variables Demo - Hover effect with fallback support" width="1000" border="2" />
1159+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.2.2 - CSS Variables Demo - Style Hover effect with fallback support </figcaption>
1160+
</figure>
1161+
</p>
10251162

10261163
3 CSS Variables Resources
10271164
=====================

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /