Skip to content

Commit 06f925e

Browse files
rachelandrewrachelandrew
committed
How to examples
1 parent 2801363 commit 06f925e

File tree

2 files changed

+129
-0
lines changed

2 files changed

+129
-0
lines changed

‎howto/box-shadow-button.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to add a shadow to an element</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.wrapper {
10+
height: 150px;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
button {
17+
border: 0;
18+
border-radius: 5px;
19+
font-weight: bold;
20+
font-size: 140%;
21+
background-color: #DB1F48;
22+
color: #fff;
23+
}
24+
</style>
25+
26+
<style class="editable">
27+
.shadow {
28+
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
29+
}
30+
31+
</style>
32+
</head>
33+
34+
<body>
35+
<section class="preview">
36+
<div class="wrapper">
37+
<button class="shadow">box-shadow</button>
38+
</div>
39+
</section>
40+
41+
<textarea class="playable playable-css" style="height: 200px;">
42+
.shadow {
43+
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 100px;">
48+
<div class="wrapper">
49+
<button class="shadow">box-shadow</button>
50+
</div>
51+
</textarea>
52+
53+
<!-- leave everything below here alone -->
54+
<div class="playable-buttons">
55+
<input id="reset" type="button" value="Reset">
56+
</div>
57+
</body>
58+
<script src="playable.js"></script>
59+
60+
</html>

‎howto/transition-button.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to transition a button</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.wrapper {
10+
height: 150px;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
button {
17+
border: 0;
18+
border-radius: 5px;
19+
font-weight: bold;
20+
font-size: 140%;
21+
}
22+
</style>
23+
24+
<style class="editable">
25+
.fade {
26+
background-color: #DB1F48;
27+
color: #fff;
28+
transition: background-color 2s;
29+
}
30+
31+
.fade:hover {
32+
background-color: #004369;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<section class="preview">
39+
<div class="wrapper">
40+
<button class="fade">Hover over me</button>
41+
</div>
42+
</section>
43+
44+
<textarea class="playable playable-css" style="height: 200px;">
45+
.fade {
46+
background-color: #DB1F48;
47+
color: #fff;
48+
transition: background-color 2s;
49+
}
50+
51+
.fade:hover {
52+
background-color: #004369;
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 100px;">
57+
<div class="wrapper">
58+
<button class="fade">Hover over me</button>
59+
</div>
60+
</textarea>
61+
62+
<!-- leave everything below here alone -->
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset">
65+
</div>
66+
</body>
67+
<script src="playable.js"></script>
68+
69+
</html>

0 commit comments

Comments
 (0)