Important CSS Properties Part Three
Welcome back to the Important CSS Properties blog, this will be the last part in the series, as I feel like this will cover just about everything I wanted to chat about in terms of CSS Properties.
It’s been a great ride, but it’s not over yet! We still have three more properties to cover in some detail!
So let us waste no time and get right down to business.
Box-Shadow
The box-shadow property is a pretty cool one. It’s fairly straight forward on its face; it adds a shadow to the element you put it on. But it’s not one shadow fits all, you have the ability to increase/decrease the intensity of the shadow to suit your purpose.
The box shadow property can use up to six values. The first two values use px or em . These values denote the x and y offset. Offset, meaning how far you want the shadow to go on either axis.
The next value denotes the blur radius, the higher the value, the more the blur effect increases, making the shadow both bigger and lighter. This value is also measured in px and em units.
Then there is the spread radius, which will increase the overall size of the shadow, using the same px and em , units you can make the shadow bigger than the element or, with negative units, smaller than the size of the element. By default, the shadow is the same size as the element.
The value after that is the inset keyword. By default the box-shadow property will be a drop shadow, meaning the shadow will exist outside the element, but using the inset keyword will reverse this, making the shadow inside the border.
Finally you have the color keyword. It just changes the color of the shadow itself. The color value can be a word, hex code, rgb, etc. You the typical “units” for color values. If you don’t write in a color value, the default is black.
.element {
box-shadow: 3px 5px 1px 1px black; Float
The float is a property for positioning elements in CSS, particularly images.
When you have a block of text, it can be nice to include pictures alongwith it to provide examples and liven up the page.
That’s where float comes in.
Let’s say you have a <div> and inside that <div> you have a block of text and a picture. Thing is without float, the text is going to mess with the placement of that picture, since they’re in the same container.
With float, you can make the image be on either the left or right side and the text will make natural room for it.
The values are simply: left or right.
.element {
float: left;One thing to note with float: It’s not really that common or useful of a positioning property anymore. Flexbox and CSS Grid have become a lot more popular for layout and mostly make float’s positioning effect irrelevant. Which makes sense, since both Flexbox and Grid are a lot more useful overall, but still, I think it’s a good thing to know about float, as it was once a very common property and you may come across it a fair amount in older code.
Opacity
Finally, let’s end this all on a simple property.
Opacity just designates the transparency of an element.
The default value for all elements’ transparency level is 1 and we down from that by decimal points in order to increase the transparency, so 0.5 would be 50% see throug, 0.3 would be 70% see through, 0 would be entirely transparent and so on.
.element {
opacity: .04;
}And that’s it for this blog and also for this series of blogs!
I’ll bet you’ve learned a bit more about box shadows, floats, and opacity, and, if you’ve been following this whole series, probably a fair bit more than that.
While this CSS properties series may be over, I’ll still be makin’ new blogs every week so be sure to check ’em out!
Until next time!
