Skip to content

Commit 93408d4

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent 5f20476 commit 93408d4

File tree

2 files changed

+120
-0
lines changed

2 files changed

+120
-0
lines changed

‎css_outlines/base.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@charset "UTF-8";
2+
3+
/* VARIABLES -------------------------------------------------------------- */
4+
5+
:root {
6+
--heading-font: 'Open Sans', sans-serif;
7+
--main-font: 'Open Sans', sans-serif;
8+
--minor-font: 'Open Sans', sans-serif;
9+
--heading-color: rgba(0,0,50,.9);
10+
--main-color: rgba(70,70,90,.9);
11+
--minor-color: rgb(190,190,200);
12+
--emphasis-color: rgb(27,211,165);
13+
}
14+
15+
/* DEFAULTS --------------------------------------------------------------- */
16+
17+
html {
18+
color: var(--main-color);
19+
font-family: var(--main-font);
20+
font-size: 16px;
21+
font-weight: 400;
22+
}
23+
24+
/* TYPOGRAPHY ------------------------------------------------------------- */
25+
26+
.primary-heading {
27+
color: var(--heading-color);
28+
font-family: var(--heading-font);
29+
font-size: 2rem;
30+
font-weight: 400;
31+
}
32+
33+
/* LINKS & BUTTONS -------------------------------------------------------- */
34+
35+
/* LAYOUT ----------------------------------------------------------------- */
36+
37+
.outline-and-border {
38+
background: peachpuff;
39+
border: solid 3px tomato;
40+
border-radius: 3px;
41+
outline: solid 3px orangered;
42+
outline-offset: 5px;
43+
padding: 1rem;
44+
margin: 2em;
45+
width: 300px;
46+
}
47+
48+
.border-and-pseudo {
49+
background: peachpuff;
50+
border: solid 5px tomato;
51+
border-radius: 3px;
52+
position: relative;
53+
padding: 1rem;
54+
margin: 2em;
55+
width: 300px;
56+
}
57+
58+
.border-and-pseudo::before {
59+
content: '';
60+
position: absolute;
61+
top: -15px;
62+
left: -15px;
63+
right: -15px;
64+
bottom: -15px;
65+
background: blueviolet;
66+
border: solid 5px orangered;
67+
border-radius: 8px;
68+
z-index: -1;
69+
}
70+
71+
.border-and-box-shadow {
72+
background: peachpuff;
73+
position: relative;
74+
padding: 1rem;
75+
margin: 50px;
76+
box-shadow:
77+
0 0 0 5px hsl(0, 0%, 50%),
78+
0 0 0 10px hsl(0, 0%, 60%),
79+
0 0 0 15px hsl(0, 0%, 70%),
80+
0 0 0 20px hsl(0, 0%, 80%),
81+
0 0 0 25px hsl(0, 0%, 90%);
82+
width: 300px;
83+
}

‎css_outlines/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS multiple borders</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS multiple borders</h1>
15+
</header>
16+
17+
<main>
18+
19+
<div class="outline-and-border">
20+
<p>This example uses oultines. outlines work like borders but they fall outside of borders and will overlap the margin and other neighbouring elements. Unlike borders, outlines also have an <code>outline-offset</code> property.</p>
21+
</div>
22+
23+
<div class="border-and-pseudo">
24+
<p>This example uses a pseudo element to create a second border. Since it's an element, it can also have a background color; silulating a third border.</p>
25+
</div>
26+
27+
<div class="border-and-box-shadow">
28+
<p>This example uses multiple box shadows to create unlimited borders.</p>
29+
</div>
30+
31+
</main>
32+
33+
<footer>
34+
</footer>
35+
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)