{"id":23888,"date":"2019-05-14T23:32:02","date_gmt":"2019-05-14T15:32:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23888"},"modified":"2020-06-23T17:28:20","modified_gmt":"2020-06-23T09:28:20","slug":"useful-css-tricks-you-might-have-overlooked","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/useful-css-tricks-you-might-have-overlooked\/","title":{"rendered":"15 Useful CSS Tricks You Might Have Overlooked"},"content":{"rendered":"

If you have been a frontend web developer for a while, there is a high chance that you have had a moment when you were trying to find out how to code something and realised after a bit of googling, that \u201cthere is CSS for that\u201d. If you hadn\u2019t, well you are about to.<\/p>\n

This post is a collection of such CSS codes<\/a>, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.<\/p>\n

Numbering headings and subheadings<\/h2>\n

Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this. There is already an in-depth post on it here<\/a>. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.<\/p>\n

See the Pen GJRLWj<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

Spice up plain underlines<\/h2>\n

Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom<\/code>. But border-bottom<\/code> is not a good solution if the text you are underlining wraps<\/a>.<\/p>\n

CSS3 specified not one but three new properties for text decoration text-decoration-color<\/code><\/strong>, text-decoration-line<\/code><\/strong>, and text-decoration-style<\/code><\/strong> which can be shorthanded into the good old text-decoration<\/strong>.<\/p>\n

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable \u201cexperimental web platform features\u201d to use it on Chrome.<\/p>\n

See the Pen YXzMQw<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

Quoting a quote<\/h2>\n

First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q><\/code> tag that indicates inline quotations.<\/p>\n

The <q><\/code> tag also takes care of quoting the inner quotes with single quotes. So, where is the \u201cthere is \u2018CSS\u2019 for that\u201d moment in this?<\/p>\n

Lets say you don\u2019t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes<\/strong> property.<\/p>\n

See the Pen VLwNzv<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

Managing unruly tables<\/h2>\n

You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout<\/code><\/strong> property (for equal column height, follow this link<\/a>).<\/p>\n

To be specific, the fix is in the table-layout: fixed;<\/strong> value. When you assign a fixed layout for the table, the table and the 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.<\/p>\n

See the Pen NqWmvw<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

Make it sticky<\/h2>\n

Sticky elements<\/a> are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;<\/strong>.<\/p>\n

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox<\/strong> supports it.<\/p>\n

See the Pen position:sticky (CSS)<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

Get your text in shape<\/h2>\n

Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes<\/strong>. To implement CSS shapes, we can make use of three properties shape-outside<\/code>, shape-margin<\/code> and shape-image-threshold<\/code>. As of April, 2015 CSS Shapes is supported by webkit browsers<\/strong>.<\/p>\n

See the Pen CSS Shape.<\/a> by Preethi Sam (@rpsthecoder<\/a>)\n on CodePen<\/a>.<\/span><\/p>\n

\n\t\t\t\t\tHow to Change Default Text Wrapping with HTML and CSS<\/span><\/a>\n
\n\t\t\t\t\t\t\t