Improve your coding life with these CSS tricks
Whether you’re a junior or a senior front end developer, you can still discover new CSS properties and features. By using them, you have more control over how content behaves on the website. By the way, did you try my previous HTML tips and tricks? If not, check them out. Now you’re all caught up, and you can continue with some new awesome front end tips and tricks.
Some of these tricks are not supported by all browsers, so you you should check this before using them.
1. Text-stroke
As a designer, you can use text stroke in Adobe Illustrator, for instance. In this program, you can manipulate the width and the color of the stroke. As a front end developer, you can also use this property.
.headline {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #f00;
}
2. ::first-letter
Another fun way to play with CSS is by using the pseudo-element ::first-letter. This applies styles to the first letter of the block-level element. By using this, we can achieve a stylish magazine effect.
.headline::first-letter {
color: #f00;
font-size: 100px;
line-height: .5;
margin: 15px 15px 10px 0;
}3. Line-clamp
The line-clamp property truncates text at a specific number of lines. To display the content clipped, these three properties should be used:
- the display property needs to be set to -webkit-box or -webkit-inline-box
- -webkit-box-orient set to vertical
- overflow set to hidden
p.read-more {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}4. column-count
When the column-count property is used, the browser evenly distributes the content in a specified number of columns.
.main-content {
column-count: 4;
}
5. Object fit
The object-fit property defines how the content of an <img> or <video> should be resized to fit its container. There are four options: fill, contain, cover and scale-down.
.main-content {
object-fit: cover;
height: 200px;
width: 200px;
}6. Change the text selection color
To change the default browser text selection color, you need to use the pseudo-element ::selection. You will see the color you chose once you select the website content with the cursor.
::selection {
background-color: #abea00;
}Even though some of these properties aren’t supported by all browsers, they are fun to play with and simplify your coding life. It’s just a matter of time before these will become mainstream in the near future.
That’s all, folks! Give them a try and tell me what you think!
Useful resources:
- https://css-tricks.com/adding-stroke-to-web-text/
- https://caniuse.com/
- https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
- https://www.tutorialrepublic.com/css-reference/css3-column-count-property.php
- https://css-tricks.com/almanac/selectors/f/first-letter/
- https://css-tricks.com/almanac/properties/o/object-fit/
- https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
