A few CSS tricks  
Tags: css, programming, html
Published: 2019-04-18 15:48:07

---
title: A few CSS tricks  
published: true
description: Some hopefully helpful CSS tricks
tags: #CSS #Programming #HTML 
---

If you're anything like me, styling your application while programming can be somewhat addicting.  You strive to make your webpage look pretty and will spend WAY too long on very minor details.  Through lots of CSS googling, I've come across some lesser known CSS tricks that might change your page from bland, to beautiful! In this blog I will demp some of my favorites.  If you know of any other cool CSS tricks, feel free to comment below and I'll add to the list. 


###Fonts
A good font can transform your page, adding character and life to your application.  Luckily, CSS allows you to easily import fonts to your project. [Google Fonts](https://fonts.google.com/) is one of the best resources for fonts and allows you to easily inject your favorite font into your project. Simply add the URL to your HTML file and specify in CSS which elements you want to inherit the font. 
{% codepen https://codepen.io/kevin-mcminn/pen/gyepdG default-tab=css,result%}

###Cursors
I recently completed a project where I needed a different cursor style, but only over a specific area of my webpage.  I learned that that is a Cursor option within CSS, where you can specify a div or other selector where this cursor will apply. Below you can see the cursor change when hovering over the text.  

{% codepen https://codepen.io/kevin-mcminn/pen/zXWxLL default-tab=css,result%}

###Fade In/Out
Animations can be very powerful in CSS. If you ever have a need to make text or other elements fade in or out from your page, you can easily add a fade property to CSS file.  All you need to do is specify the starting and ending opacity, and how long you want the animation to take. 
{% codepen https://codepen.io/kevin-mcminn/pen/gyebEr default-tab=css,result%}

###Transform
Another cool and useful animation is *Transform*, which allows you to move an element around on the page.  Below I've added a rotate property to the image, and specify 4 full rotations to happen in 4s. You can do all types of animations with the transform property, such as scale, skew, translate(moves element horizontal/vertical), and even add 3d perspective. 
{% codepen https://codepen.io/kevin-mcminn/pen/OGvPeb default-tab=css,result%}

###Columns
If your webpage includes a lot of text, you may have had the idea to add columns or separations to your webpage.  Luckily, this is easily achievable with the *columns* property in CSS. Below I've broken up my paragraph into 4 columns, while also specifying the thickness of the borders to visually separate the text. 

{% codepen https://codepen.io/kevin-mcminn/pen/jRzPPY default-tab=css,result%}

###Image Filters
Now you, yes you,  can build Instagram! Well, there might be some additional programming knowledge involved, but Filters are a HUGE part of instagram. Luckily, the CSS filter property gives you a ton of control on how your images look.  Below are some of the filters you can added to spice up your images.  
{% codepen https://codepen.io/kevin-mcminn/pen/axYOwe default-tab=css,result%}

###Small Caps
This CSS trick may not be useful often, but that one time you want to fancy up your text, this may be the answer. With the font-variant 'small-caps', you can turn your boring text into classy, elegant strings. 
{% codepen https://codepen.io/kevin-mcminn/pen/BErNmm default-tab=css,result%}

###Letter spacing
One more animation! I thought it was interesting you can define the spaces between letters, and use animation to have an effect of words coming together. This ensures a dramatic entrance!
{% codepen https://codepen.io/kevin-mcminn/pen/KYopRG default-tab=css,result%}

*sources [CSS Tricks](https://css-tricks.com/almanac/properties/t/transform/)