diff options
Diffstat (limited to 'content/blog/2019-01-07-useful-css.md')
| -rw-r--r-- | content/blog/2019-01-07-useful-css.md | 118 |
1 files changed, 54 insertions, 64 deletions
diff --git a/content/blog/2019-01-07-useful-css.md b/content/blog/2019-01-07-useful-css.md index 687be03..bdabd94 100644 --- a/content/blog/2019-01-07-useful-css.md +++ b/content/blog/2019-01-07-useful-css.md @@ -7,36 +7,32 @@ draft = false # Introduction to CSS -[CSS](https://en.wikipedia.org/wiki/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 +[CSS](https://en.wikipedia.org/wiki/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. +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. +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: +For example, here are some variables defined at the root of the website, which +allows for any subsequent CSS rules to use those variables: ``` css :root { @@ -52,23 +48,22 @@ body { # 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 [box shadow -generator](https://www.cssmatic.com/box-shadow). 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: +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 [box shadow +generator](https://www.cssmatic.com/box-shadow). 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: ``` css box-shadow: inset horizontal vertical blur spread color; ``` -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. +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** @@ -124,22 +119,20 @@ free to play around with the code, experiment, and learn. } ``` -Try these box shadows out on your own and see how changing each shadow -value works. +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*. +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 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** @@ -174,27 +167,24 @@ example. } ``` -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. +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 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, [check out this CodePen](https://codepen.io/LandonSchropp/pen/KpzzGo) from -[LandonScropp](https://codepen.io/LandonSchropp/). Resize the window -with dice to see how they collapse and re-align. +[LandonScropp](https://codepen.io/LandonSchropp/). Resize the window with dice +to see how they collapse and re-align. # Even More CSS For more inspiration, you can visit [CodePen](https://www.codepen.io), -[Dribbble](https://dribbble.com), or [UI -Movement](https://uimovement.com) to browse the collections of many -amazing web designers. +[Dribbble](https://dribbble.com), or [UI Movement](https://uimovement.com) to +browse the collections of many amazing web designers. |