diff options
Diffstat (limited to 'blog/2019-01-07-useful-css.org')
| -rw-r--r-- | blog/2019-01-07-useful-css.org | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/blog/2019-01-07-useful-css.org b/blog/2019-01-07-useful-css.org new file mode 100644 index 0000000..3032b59 --- /dev/null +++ b/blog/2019-01-07-useful-css.org @@ -0,0 +1,181 @@ +#+date: 2019-01-07 +#+title: Useful CSS Snippets + +* 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. |