15 Useful CSS Tricks You Might Have Overlooked

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 “there is CSS for that”. If you hadn’t, well you are about to.

This post is a collection of such CSS codes, 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.

Numbering headings and subheadings

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. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

See the Pen GJRLWj by Preethi Sam (@rpsthecoder) on CodePen.

Spice up plain underlines

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. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

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 “experimental web platform features” to use it on Chrome.

See the Pen YXzMQw by Preethi Sam (@rpsthecoder) on CodePen.

Quoting a quote

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> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the “there is ‘CSS’ for that” moment in this?

Lets say you don’t 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 property.

See the Pen VLwNzv by Preethi Sam (@rpsthecoder) on CodePen.

Managing unruly tables

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 property (for equal column height, follow this link).

To be specific, the fix is in the table-layout: fixed; 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.

See the Pen NqWmvw by Preethi Sam (@rpsthecoder) on CodePen.

Make it sticky

Sticky elements 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;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen.

Get your text in shape

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

See the Pen CSS Shape. by Preethi Sam (@rpsthecoder) on CodePen.

Mandatory fields

If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :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 certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

See the Pen eNYoPo by Preethi Sam (@rpsthecoder) on CodePen.

Did I check it?

In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

See the Pen BNaEOm by Preethi Sam (@rpsthecoder) on CodePen.

Like a storybook

Then, wouldn’t it be nice if the first “O” in the “Once upon a time” looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element. Read more about it here.

See the Pen bdGPWd by Preethi Sam (@rpsthecoder) on CodePen.

Would you like to know more?

An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

See the Pen bdGXWr by Preethi Sam (@rpsthecoder) on CodePen.

A little bit more to the left

Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

See the Pen jPEEmZ by Preethi Sam (@rpsthecoder) on CodePen.

Disclose file format of links

Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display 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 background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different 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 all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

See the Pen Jdooyg by Preethi Sam (@rpsthecoder) on CodePen.