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 5f9f86d

Browse files
chapter 2 - 2.7 uploaded
1 parent b4d4a40 commit 5f9f86d

File tree

1 file changed

+86
-1
lines changed

1 file changed

+86
-1
lines changed

‎README.md

Lines changed: 86 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ Topics included/covered
7171
- 2.3. [Hover with Transform Transition Amimation](#23-hover-with-Transform-transition-amimation)
7272
- 2.4. [CSS variables Cascading](#24-css-variables-cascading)
7373
- 2.5. [JavaScript Theme Switcher](#25-javascript-theme-switcher) | [JavaScript Theme Color Swatch Switcher](#25-javascript-theme-color-swatch-switcher)
74-
- 2.6. [Media Query Responsive Layout](#26-media-query-responsive-layout)
74+
- 2.6. [Media Query Responsive Layout](#26-media-query-responsive-layout)
75+
- 2.7. [CSS Variables Gradients](#27-css-variables-gradients)
7576

7677
3. [CSS Variables Resources](#3-css-variables-resources)
7778

@@ -1665,6 +1666,90 @@ body {
16651666
</figure>
16661667
</p>
16671668

1669+
2.7. CSS Variables Gradients
1670+
---------------------
1671+
1672+
> **Syntax & Example**: `2.7-css-var-demo-gradients.html`
1673+
1674+
```html
1675+
<!DOCTYPE html>
1676+
<html lang="en">
1677+
1678+
<head>
1679+
1680+
<meta charset="UTF-8">
1681+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1682+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1683+
<title>2.7-css-var-demo-gradients.html</title>
1684+
1685+
<link rel="stylesheet" href="2.7-style-css-var-demo-gradients.css">
1686+
1687+
</head>
1688+
1689+
<body>
1690+
1691+
<div class="container">
1692+
1693+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
1694+
1695+
<h2 class="subheading-text" id="subHeadingText">2.7 - CSS Variable Gradients </h2>
1696+
1697+
Linear Gradient:
1698+
<div class="gradient-linear-container"></div> <br/> <br/>
1699+
1700+
Radial Gradient:
1701+
<div class="gradient-radial-container"></div>
1702+
1703+
1704+
</div>
1705+
1706+
</body>
1707+
1708+
</html>
1709+
```
1710+
1711+
> **Syntax & Example**: `2.7-style-css-var-demo-gradients.css`
1712+
1713+
```css
1714+
:root {
1715+
--main-font-family: Verdana;
1716+
--gradient-color-1: #ff0000;
1717+
--gradient-color-2: #038703;
1718+
--gradient-color-3: #ffff00;
1719+
--gradient-linear: linear-gradient(var(--gradient-color-1), var(--gradient-color-3));
1720+
--gradient-radial: radial-gradient(circle, var(--gradient-color-1), var(--gradient-color-3), var(--gradient-color-2));
1721+
}
1722+
1723+
body {
1724+
font-family: var(--main-font-family);
1725+
}
1726+
1727+
.gradient-linear-container {
1728+
background-image: var(--gradient-linear);
1729+
height: 200px;
1730+
}
1731+
1732+
.gradient-radial-container {
1733+
background-image: var(--gradient-radial);
1734+
width: 200px;
1735+
height: 200px;
1736+
}
1737+
```
1738+
1739+
<p>
1740+
<figure>
1741+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.7.1-css-var-demo-gradients.png" alt="CSS Variables Demo - Gradients" title="CSS Variables Demo - Gradients" width="1000" border="2" />
1742+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.7.1 - CSS Variables Demo - Gradients </figcaption>
1743+
</figure>
1744+
</p>
1745+
1746+
<p>
1747+
<figure>
1748+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.7.2-style-css-var-demo-gradients.png" alt="Style CSS Variables Demo - Gradients" title="Style CSS Variables Demo - Gradients" width="1000" border="2" />
1749+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.7.2 - Style CSS Variables Demo - Gradients </figcaption>
1750+
</figure>
1751+
</p>
1752+
16681753
3 CSS Variables Resources
16691754
=====================
16701755

0 commit comments

Comments
(0)

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