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 c3d9bf1

Browse files
chapter 2 - 2.3 - uploaded
chapter 2 - 2.3 - uploaded
1 parent d590f40 commit c3d9bf1

File tree

1 file changed

+131
-1
lines changed

1 file changed

+131
-1
lines changed

‎README.md

Lines changed: 131 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ Topics included/covered
6767

6868
2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)
6969
- 2.1. [Managing Colors-Theme](#21-managing-colors-theme)
70-
- 2.2. [Hover with Fallback support](#22-hover-with-fallback-support)
70+
- 2.2. [Hover with Fallback support](#22-hover-with-fallback-support)
71+
- 2.3. [Hover with Transform Transition Amimation](#23-hover-with-Transform-transition-amimation)
7172

7273
3. [CSS Variables Resources](#3-css-variables-resources)
7374

@@ -1160,6 +1161,134 @@ body {
11601161
</figure>
11611162
</p>
11621163

1164+
2.3. Hover with Transform Transition Amimation
1165+
---------------------
1166+
1167+
> **Syntax & Example**: `2.3-css-var-demo-transform-transition.html`
1168+
1169+
```html
1170+
<!DOCTYPE html>
1171+
<html lang="en">
1172+
1173+
<head>
1174+
1175+
<meta charset="UTF-8">
1176+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1177+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1178+
<title>2.3-css-var-demo-transform-transition.html</title>
1179+
1180+
<link rel="stylesheet" href="2.3-style-css-var-demo-transform-transition.css">
1181+
1182+
</head>
1183+
1184+
<body>
1185+
1186+
<div class="container">
1187+
1188+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
1189+
1190+
<h2 class="subheading-text" id="subHeadingText">2.3 - Hover effect with Fallback support</h2>
1191+
1192+
<nav class="button-container">
1193+
<div class="button btn-default">btn-default </div>
1194+
<div class="button btn-primary">btn-primary </div>
1195+
<div class="button btn-secondary">btn-secondary </div>
1196+
<div class="button btn-success">btn-success </div>
1197+
<div class="button btn-danger">btn-danger </div>
1198+
<div class="button btn-info">btn-info </div>
1199+
<div class="button btn-warning">btn-warning </div>
1200+
<div class="button btn-light">btn-light </div>
1201+
<div class="button btn-dark">btn-dark </div>
1202+
</nav>
1203+
1204+
</div>
1205+
1206+
</body>
1207+
1208+
</html>
1209+
```
1210+
1211+
> **Syntax & Example**: `2.3-style-css-var-demo-transform-transition.css`
1212+
1213+
```css
1214+
:root {
1215+
--main-font-family: Verdana;
1216+
--animate-translatex-right: translateX(50px);
1217+
}
1218+
1219+
body {
1220+
font-family: var(--main-font-family);
1221+
}
1222+
1223+
.button {
1224+
color: var(--main-theme-color, #000000); /* black is fallback color */
1225+
border: 2px solid var(--main-theme-color, #000000);
1226+
1227+
box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.3);
1228+
width:200px; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer; margin-bottom: 10px; transition: all 0.25s ease-in-out;
1229+
}
1230+
1231+
.button:hover {
1232+
color: #ffffff;
1233+
border: 2px solid var(--main-theme-color, #000000);
1234+
background-color: var(--main-theme-color, #000000);
1235+
box-shadow: 0px 0px 7px 2px var(--main-theme-color, #000000);
1236+
transform: var(--animate-translatex-right);
1237+
1238+
transition: all 0.35s ease-in-out;
1239+
}
1240+
1241+
.btn-default {
1242+
/* no --main-theme-color defined for default button, so it will have theme color as fallback black color */
1243+
}
1244+
1245+
.btn-primary{
1246+
--main-theme-color: #007bff;
1247+
}
1248+
1249+
.btn-secondary{
1250+
--main-theme-color: #6c757d;
1251+
}
1252+
1253+
.btn-danger{
1254+
--main-theme-color: #dc3545;
1255+
}
1256+
1257+
.btn-success{
1258+
--main-theme-color: #28a745;
1259+
}
1260+
1261+
.btn-info{
1262+
--main-theme-color: #17a2b8;
1263+
}
1264+
1265+
.btn-warning{
1266+
--main-theme-color: #ffc107;
1267+
}
1268+
1269+
.btn-light{
1270+
--main-theme-color: #dedede
1271+
}
1272+
1273+
.btn-dark{
1274+
--main-theme-color: #343a40;
1275+
}
1276+
```
1277+
1278+
<p>
1279+
<figure>
1280+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.3.1-css-var-demo-transform-transition.png" alt="CSS Variables Demo - Hover effect with Transform Transition" title="CSS Variables Demo - Hover effect with Transform Transition" width="1000" border="2" />
1281+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.3.1 - CSS Variables Demo - Hover effect with Transform Transition </figcaption>
1282+
</figure>
1283+
</p>
1284+
1285+
<p>
1286+
<figure>
1287+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.3.2-style-css-var-demo-transform-transition.png" alt="Style CSS Variables Demo - Hover effect with Transform Transition" title="Style CSS Variables Demo - Hover effect with Transform Transition" width="1000" border="2" />
1288+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.3.2 - Style CSS Variables Demo - Hover effect with Transform Transition </figcaption>
1289+
</figure>
1290+
</p>
1291+
11631292
3 CSS Variables Resources
11641293
=====================
11651294

@@ -1168,3 +1297,4 @@ body {
11681297
> **Reference:** - https://www.w3schools.com/css/css3_variables.asp
11691298
11701299
> **Reference:** - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
1300+

0 commit comments

Comments
(0)

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