Guide: You Might Have Overlooked these CSS Tricks
If you’ve been a front-end web developer for a while, chances are you’ve had a moment when you tried to find out how to code something and after a bit of googling realized that “that’s what CSS is for”. If you hadn’t, then you’re about to. This post is a collection of such CSS codes, which you can provide features such as making an element sticky, giving you dotted line underlining capabilities, making your page text flow into a special shape, or achieving a parallax effect. Some of them are widely supported while others are on the way for full support by all browsers.
Numbering of headings and subdivisions
Let’s say you have a series of headings and subheads in your document and you number them manually or through a script. You can use CSS counters for this instead. There’s an in-depth post on this already. And since it is of a CSS2 specification, you can be sure it is supported by all browsers, except maybe IE 6. See Preethi Sam’s Pen GJRLWj (@rpsthecoder) on CodePen.
Herb up clear underlines
Sometimes we want to underline with a nice dotted line or dashed line instead of a solid line. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you underlined is continuous. CSS3 specified not one but three new text decoration properties text-decoration-color text decoration line, and text decoration style which can be summed up in the good old text decoration You can use this to create a style for underlines, lines, even blink text, and more. As of January, only Firefox supports this feature, but you can enable the “experimental web platform” featuresTo use it in Chrome. See Preethi Sam’s Pen YXzMQw (@rpsthecoder) on CodePen.
Quoting a quote
First of all, you don’t have to worry about typing the correct curly quotes for short quotes because that’s what HTML is for: the tag indicating inline quotes. The tag also ensures that the enclosed quotes are quoted with single quotes. So, where is the “there is ‘CSS’ for that” moment in this? Supposing you don’t want the default double quotes or you have more than one level of nested quotes, then you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property. See the Pen VLwNzv by Preethi Sam (@rpsthecoder) on CodePen.
Unmanageable table management
You may have come across a large table with different content size per cell that refuses to stay within a width you specify no matter what you try. Tame that table with the table layout property (follow this link for equal column height). To be specific, the solution is in the table setting: fixed; value. When you assign a fixed layout for the table, the table and cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers. See the Pen NqWmvw by Preethi Sam (@rpsthecoder) on CodePen.
Make it sticky
Stickies are elements on a page that are not scrolled out of sight. In others words it sticks to a visible area (viewport or scroll box). You can create this with CSS using position: sticky; They behave as relatively placed elements before scrolling and as fixed elements later once a scroll threshold is reached. For now, only Firefox supports it. See the position of the pen: sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen.
Shape your text
Do you want the text on your page to curve nicely over an image displayed next to it? You can try CSS formsTo implement CSS shapes, we can use three shape-outside, shape-margin and shape-image-threshold properties. Starting in April, CSS Shapes will be supported by webkit browsers See the CSS form of the pen. by Preethi Sam (@rpsthecoder) on CodePen.
Required fields
If you have a form, chances are that some fields are required in it and some are not. You need to let the users know which is which. The CSS for this is :obligated : optional pseudo classes. All modern browsers support them. See the Pen EjxJLB by Preethi Sam (@rpsthecoder) on CodePen.
Picky with colors
If you don’t like a particular color, such as blue, we can color the selected area with another color and the ::selection pseudo-element is the CSS for that. This is supported by all modern browsers. See Preethi Sam’s Pen eNYoPo (@rpsthecoder) on CodePen.
Have I checked it?
In a situation where a check box is checked, it would be nice to have an indication other than the small check mark in the default check box to indicate that the item is checked. There is CSS for that which exploits the bond between the direct siblings, two elements side by side. CSS has an adjacent sibling selector denoted by the plus sign, and we can use it to target the label next to the check box. But what about target the checked box first? There is the : checked pseudo class for that. See Preethi Sam’s Pen BNaEOm (@rpsthecoder) on CodePen.
Just like a storybook
Wouldn’t it be nice if the first “O” in the “Once upon a time” looks nice? We can make it look nice, that’s what CSS is for after all. Here’s true :: first letter pseudo-element comes to the rescue. It focuses on the first letter of the first line of the target element. Read more about it here. See the Pen bdGPWd by Preethi Sam (@rpsthecoder) on CodePen.
Knowing more?
An element can have class X or data Y or some other value for an attribute. If we ever need to display such an attribute value of an element close to it, we can use the content: attr (X)It gets the value of attribute X of the element, then we can show it next to the element. See the Pen bdGXWr by Preethi Sam (@rpsthecoder) on CodePen.
A little more to the left
Centering elements for CSS beginners is quite an achievement. Different elements require a different set of CSS properties to center them. We’ll take a look at one of the many examples available on the world wide web so that you can remember that there is CSS to center things. See the Pen jPEEmZ by Preethi Sam (@rpsthecoder) on CodePen.
Disclose the file format of links
Ever seen a small image next to a link that indicates what that link is? A pdf? or a DOC? Yes, there is CSS to achieve that. The content: url () is what we’ll use to show the image behind the links. See the Pen gpbbKW by Preethi Sam (@rpsthecoder) on CodePen.
Trigger parallax effect
The parallax effect is an effect used to describe the seemingly slow movement of the background in relation to the foreground. This effect is popular with websites that implement parallax scrolling. There are several ways to implement it, the example below works in Firefox with background attachment: fixed; See the Pen XbJJaO by Preethi Sam (@rpsthecoder) on CodePen.
The power of CSS animations
Probably not a huge “there is CSS for that” moment, because you probably all know about CSS animation by now. But a little reminder can’t hurt. There are many uses for CSS animation, but here’s one for an easy coloring exercise. See the Pen Jdooyg by Preethi Sam (@rpsthecoder) on CodePen.
You Might Have Overlooked these CSS Tricks: benefits
Faq
Final note
I hope you like the guide You Might Have Overlooked these CSS Tricks. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the You Might Have Overlooked these CSS Tricks, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “You Might Have Overlooked these CSS Tricks”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide You Might Have Overlooked these CSS Tricks, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
