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 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.
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.
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.
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.
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.
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.
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.
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!
*sources CSS Tricks
Top comments (0)