1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
#+date: <2019-01-07>
#+title: Useful CSS Snippets
#+description:
* Introduction to CSS
[[https://en.wikipedia.org/wiki/CSS][CSS]], the language used to markup
HTML code and make it "pretty", is one of the most effective ways to
increase the attractiveness of a website. It can also lead to increased
user engagement, retention, and satisfaction. In fact, there are whole
career fields are dedicated to the improvement of user experiences,
known as UI design and UX design.
Some web developers are used to the common CSS properties, such as
element sizing, fonts, colors, etc., but are not as well versed in
less-used properties and values such as =flexbox=, =clip-path=, and
=transform=. This article will provide some insight into the less-used
and unique CSS properties.
* CSS Variables
The first topic today is CSS variables. Variables are not often used by
smaller developers. CSS variables allow you to give your website a
well-defined structure, where you can easily reuse CSS properties
throughout the project.
You can use variables to define things, such as color palettes. Then,
you can use these colors for backgrounds anywhere else in the HTML. This
could be extended, where extra variables could be defined for
=primary-text=, =quoted-text=, etc. Variables can also be used to define
spacing (e.g. =32px= or =2rem=), which can then be applied to margins,
padding, font sizes, and more.
For example, here are some variables defined at the root of the website,
which allows for any subsequent CSS rules to use those variables:
#+begin_src css
:root {
--primary-color: black;
--secondary-color: white;
}
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
#+end_src
* CSS Box Shadows
Box shadows were once my mortal enemy. No matter how hard I tried, I
just couldn't get them to work how I wanted. Because of this, my
favorite discovery has been CSSMatic's
[[https://www.cssmatic.com/box-shadow][box shadow generator]]. It
provides an excellent tool to generate box shadows using their simple
sliders. Surprisingly, this is the reason I learned how box shadows
work! You can use the sliders and watch how the CSS code changes in the
image that is displayed. Through this, you should understand that the
basic structure for box shadows is:
#+begin_src css
box-shadow: inset horizontal vertical blur spread color;
#+end_src
Now, let's look at some basic examples! You can copy and paste the
following code into a site like CodePen or your own HTML files. Feel
free to play around with the code, experiment, and learn.
*Box Shadow #1*
#+begin_src html
<div class="shadow-examples">
<div class="box effect1">
<h3>Effect 1</h3>
</div>
</div>
#+end_src
#+begin_src css
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #fff;
margin: 40px auto;
}
.effect1 {
box-shadow: 0 10px 6px -6px #777;
}
#+end_src
*Box Shadow #2*
#+begin_src html
<div class="shadow-examples">
<div class="box effect2">
<h3>Effect 2</h3>
</div>
</div>
#+end_src
#+begin_src css
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #fff;
margin: 40px auto;
}
.effect2 {
box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.75);
}
#+end_src
Try these box shadows out on your own and see how changing each shadow
value works.
* CSS Flexbox
Now, let's move on to the best part of this article: flexbox. The
flexbox is by far my favorite new toy. I originally stumbled across this
solution after looking for more efficient ways of centering content
horizontally AND vertically. I had used a few hack-ish methods before,
but flexbox throws those out the window. The best part of it all is that
flexbox is /dead simple/.
Flexbox pertains to the parent div of any element. You want the parent
to be the flexbox in which items are arranged to use the flex methods.
It's easier to see this in action that explained, so let's see an
example.
*Flexbox*
#+begin_src html
<div class="flex-examples">
<div class="sm-box">
<h3>1</h3>
</div>
<div class="sm-box">
<h3>2</h3>
</div>
</div>
#+end_src
#+begin_src css
.flex-examples {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding: 10px;
background-color: #f2f2f2;
}
.sm-box {
display: flex;
justify-content: center;
align-items: center;
width: 20%;
height: 100px;
background: #fff;
margin: 40px 10px;
}
#+end_src
You may notice that we no longer need to use the =top= property for the
=h3= elements in our code. This is because we set the display box to be
a flex container for the small boxes, AND we made the small boxes flex
containers for their elements (the h3 tags). Flex boxes can be nested
like this to center content that is inside centered content.
For the example above, we designated the =justify-content= property to
be =flex-start= so that the boxes stack from the left side of the
screen. This property can be changed to =center= to make the boxes
appear in the center of the screen.
For an interactive example,
[[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]]
from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
window with dice to see how they collapse and re-align.
* Even More CSS
For more inspiration, you can visit [[https://www.codepen.io][CodePen]],
[[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI
Movement]] to browse the collections of many amazing web designers.
|
