One of my favorite parts about Flatiron School has been messing with CSS and seeing what cool stuff I can both find and come up with. By reading this blog I'm going to show you some CSS demos that you might be able to spruce up your website with.
Fonts
A good font can make any website look more stylized. There are a handful of fonts built into CSS but one of the best font features is the ability to import new ones from outside sources. All you need to do is specify which url you are grabbing from and which CSS font you are inheriting from.
Cursors
Several times in my projects, I have used different cursors both for amusement and for practical effects. I learned that it's easy as adding a cursor property to your selector and then adding a keyword. When you hover over the element, the cursor should appropriately change.
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.'
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.
Conclusion
Now these are just a couple CSS tricks you can use to add some styling to your website. In reality CSS is a seemingly endless amount of content that can really bring out the creativity in people. What are some cool things you've managed to find or come up with in CSS?
Top comments (0)