From 25945b8fead989cca09a23983623b63ce36dcc0c Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Mon, 8 Jan 2024 20:11:17 -0600 Subject: feat: total re-write from Emacs org-mode to Zola markdown --- blog/2019-01-07-useful-css.org | 181 ----------------------------------------- 1 file changed, 181 deletions(-) delete mode 100644 blog/2019-01-07-useful-css.org (limited to 'blog/2019-01-07-useful-css.org') diff --git a/blog/2019-01-07-useful-css.org b/blog/2019-01-07-useful-css.org deleted file mode 100644 index 3032b59..0000000 --- a/blog/2019-01-07-useful-css.org +++ /dev/null @@ -1,181 +0,0 @@ -#+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 -
-
-

Effect 1

-
-
-#+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 -
-
-

Effect 2

-
-
-#+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 -
-
-

1

-
-
-

2

-
-
-#+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. -- cgit v1.2.3-70-g09d2