Skip to content

Commit 2e86417

Browse files
rachelandrewrachelandrew
committed
more examples
1 parent 819b665 commit 2e86417

File tree

4 files changed

+164
-2
lines changed

4 files changed

+164
-2
lines changed

‎howto/balloon.jpg

310 KB
Loading

‎howto/object-fit.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to fill a box with an image without distorting it</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.wrapper {
10+
height: 200px;
11+
display: flex;
12+
gap: 20px
13+
}
14+
15+
.box {
16+
flex: 1;
17+
border: 5px solid #000;
18+
border-radius: .5em;
19+
}
20+
</style>
21+
22+
<style class="editable">
23+
.box img {
24+
width: 100%;
25+
height: 100%;
26+
}
27+
.box1 img {
28+
object-fit: cover;
29+
}
30+
31+
.box2 img {
32+
object-fit: contain;
33+
}
34+
35+
.box3 img{
36+
object-fit: fill;
37+
}
38+
39+
</style>
40+
</head>
41+
42+
<body>
43+
<section class="preview">
44+
<div class="wrapper">
45+
<div class="box box1"><img src="balloon.jpg" alt="a balloon"></div>
46+
<div class="box box2"><img src="balloon.jpg" alt="a balloon"></div>
47+
<div class="box box3"><img src="balloon.jpg" alt="a balloon"></div>
48+
</div>
49+
</section>
50+
51+
<textarea class="playable playable-css" style="height: 300px;">
52+
.box img {
53+
width: 100%;
54+
height: 100%;
55+
}
56+
57+
.box1 img {
58+
object-fit: cover;
59+
}
60+
61+
.box2 img {
62+
object-fit: contain;
63+
}
64+
65+
.box3 img {
66+
object-fit: fill;
67+
}
68+
</textarea>
69+
70+
<textarea class="playable playable-html" style="height: 100px;">
71+
<div class="wrapper">
72+
<div class="box box1"><img src="balloon.jpg" alt="a balloon"></div>
73+
<div class="box box2"><img src="balloon.jpg" alt="a balloon"></div>
74+
<div class="box box3"><img src="balloon.jpg" alt="a balloon"></div>
75+
</div>
76+
</textarea>
77+
78+
<!-- leave everything below here alone -->
79+
<div class="playable-buttons">
80+
<input id="reset" type="button" value="Reset">
81+
</div>
82+
</body>
83+
<script src="playable.js"></script>
84+
85+
</html>

‎howto/opacity.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to make a background color semi-transparent</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.wrapper {
10+
height: 200px;
11+
display: flex;
12+
gap: 20px;
13+
background-image: url('balloon.jpg');
14+
background-repeat: no-repeat;
15+
background-size: cover;
16+
padding: 20px;
17+
}
18+
19+
.box {
20+
flex: 1;
21+
border: 5px solid #000;
22+
border-radius: .5em;
23+
font-size: 140%;
24+
padding: 20px;
25+
}
26+
</style>
27+
28+
<style class="editable">
29+
.box1 {
30+
background-color: #000;
31+
color: #fff;
32+
opacity: .5;
33+
}
34+
35+
.box2 {
36+
background-color: rgba(0,0,0,.5);
37+
color: #fff;
38+
}
39+
</style>
40+
</head>
41+
42+
<body>
43+
<section class="preview">
44+
<div class="wrapper">
45+
<div class="box box1">This box uses opacity</div>
46+
<div class="box box2">This box has a background color with an alpha channel</div>
47+
</div>
48+
</section>
49+
50+
<textarea class="playable playable-css" style="height: 200px;">
51+
.box1 {
52+
background-color: #000;
53+
color: #fff;
54+
opacity: .5;
55+
}
56+
57+
.box2 {
58+
background-color: rgba(0,0,0,.5);
59+
color: #fff;
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 100px;">
64+
<div class="wrapper">
65+
<div class="box box1">This box uses opacity</div>
66+
<div class="box box2">This box has a background color with an alpha channel</div>
67+
</div>
68+
</textarea>
69+
70+
<!-- leave everything below here alone -->
71+
<div class="playable-buttons">
72+
<input id="reset" type="button" value="Reset">
73+
</div>
74+
</body>
75+
<script src="playable.js"></script>
76+
77+
</html>

‎howto/text-shadow.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<style class="editable">
2222
h1 {
2323
color: royalblue;
24-
text-shadow: 0px 4px 2px rgba(46,91,173,0.6);
24+
text-shadow: 2px 4px 4px rgba(46,91,173,0.6);
2525
}
2626

2727
</style>
@@ -37,7 +37,7 @@ <h1>Adding a shadow to text</h1>
3737
<textarea class="playable playable-css" style="height: 100px;">
3838
h1 {
3939
color: royalblue;
40-
text-shadow: 0px 4px 2px rgba(46,91,173,0.6);
40+
text-shadow: 2px 4px 4px rgba(46,91,173,0.6);
4141
}
4242
</textarea>
4343

0 commit comments

Comments
 (0)