16 CSS Secrets to improve Web Designs

By Ivaylo Ivanov November 12, 2020 How to, Programming, UI/UX Design 11 Minutes

Have you long been using CSS to build some attractive web designs and layouts? Are you familiar with how CSS can help rejuvenate a bland webpage to create something enticing? CSS is much more than using those fancy fonts and creating backgrounds. No matter how long you have been using CSS to create powerful designs, there could still be some undiscovered features and CSS properties that you can leverage to take your designs to a whole new level. These lesser-known CSS secrets would allow you to influence content behavior on the websites and enjoy greater freedom when applying creative techniques to various elements like photography.

So, let’s discover some of these lesser-known CSS properties and find out how they could help with your futuristic web designs.

Things You’ll Need:

A popular web browser and your favorite developer tools; it is recommended that you use Google Chrome or Firefox because they support most CSS features.
A reliable code editor
Some useful assets like fonts and images

Once you have these, let’s start by exploring some lesser-known typographical CSS properties.

Typographical Properties

Many CSS properties enhance the way text is displayed on a web page. Some lesser-known options include the following:

1. Text-Stroke

If you already know about the text strokes used in Adobe Illustrator and some vector-drawing apps, you’d be happy to know that you can use them in CSS too. The text-stroke property can be used in CSS to achieve that same effect. The text-stroke can also be animated using CSS as you can apply the effect on stroke color. Unfortunately, stroke width can’t be animated.

footer h3 {
/*more styles in style.css*/
/*...*/
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #000;
}

2. Gradient Text

Applying gradient to text isn’t complicated anymore. Here’s a quick demonstration of how that attractive effect could be implemented on your website using WebKit while ensuring that the text still remains selectable and editable.

h2.contact-heading { 
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text; 
  background: radial-gradient(#ffbc00, #ff65aa);
}

3. ::first-letter

It’s a pseudo-element which can be used for styling the first letter in a block-level element. With this, you can be able to introduce similar effects as in paper and print magazines.

p.intro:first-letter { 
  font-size: 100px; 
  display: block; 
  float: left; 
  line-height: .5; 
  margin: 15px 15px 10px 0; 
}

Content Control

Let’s now jump to the CSS properties that allow you to have greater control over your images and text’s behavior depending on their container size or proportion.

4. Line-Clamp

This property is useful for truncating text after a particular number of lines. This type of truncation usually requires three properties for it to work.
First, you must set the display property to -webkit-box. Next, you should set -webkit-box-orient or -webkit-inline-box to vertical. Lastly, keep the overflow value as hidden. If any of these are missing, you won’t be able to clip the content.

p.shortened { 
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

5. Character Unit

The text height or width could be limited using CSS character unit property. The ch unit means the character width is the same as that of '0' (the zero character) when written in that same font, and has a specific use when combined with the monospace fonts. When a different font-family is used, it changes as well. You can treat it somewhat like x-height. However, the ch here is the width of the character '0' rather than that of x.

h2.contact-heading {
  /*more properties in the CSS file*/
  max-width: 8ch;
}

6. Column-Count

Using the column-count property in CSS, you direct the browser to distribute content evenly in the number of columns as specified.

.outro {  
  column-count: 2;
}

7. Shape-Outside

You can use the shape-outside CSS property to make a curved text effect around a floating image. Basically, the property allows for setting geometric shapes so that the text can flow around in a pre-defined area.

.shape { 
  width: 300px; 
  float: left; 
  shape-outside: circle(50%); 
}

8. Word Break Tag <wbr>

Though it’s a CSS tutorial, the <wbr> HTML tag is still worth mentioning here. The Word Break Tag is an HTML element that defines a word break opportunity. It refers to a position within a webpage text where the web browser may break the line. There are situations where it might be quite useful when a word is longer than usual, and you’re afraid that the web browser might break that word in a way, making it inappropriate to read and understand. For instance, a phone number could be too long, and the browser may break it in wrong areas. So, a <wbr> tag could be used to avoid that.

<wbr>+0043<wbr>234-343<wbr>234-234<wbr>

9. Object Fit

Frequently, it would be best if you control the image behavior on your web pages, depending on their container size. If you’re looking for a CSS property to achieve that effect, object-fit is undoubtedly recommended. The property defines how the content inside a <video> or <img> tag should be resized so that it fits inside the container perfectly.
There are four options available to fit the container’s content: fill, cover, contain, and scale-down. For instance, if you have used cover as the value of this property, you can size the container’s content so that its aspect ratio preserves while filling the element’s entire content box.

.object-fit { 
  object-fit: cover; 
  height: 400px; 
  width: 100%; 
}

10. Display: Flex

Vertically centering an element or text is always considered a problem, but there’s an easy way available to do that in CSS using Flexbox. The display: flex property was introduced in the CSS3, and it allows you to align just about any element vertically. Here’s how to do that.

.align-vertically { 
  background: #13b5ea; 
  color: #fff; 
  display: flex; 
  align-items: center; 
  height: 200px; 
}

A Flexbox layout is specified for an element using the display: flex property while vertical centering is taken care of using align-items: center.

Decorative & Creative Elements

Even though there are comprehensive charting functions available through the data visualization libraries such as d3.js, why don’t you try CSS for simple pie charts? Besides, some often-ignored decorative elements could work for adding colors to your website. Let’s try and explore them.

11. Conic-gradient

If creating pie charts has always troubled you and you’ve been looking for a way to do that through CSS only, you’ve got your solution here. The conic-gradient function allows you to achieve the results you’re looking for. The function is great for creating an image using a gradient that has pre-set color transitions all rotated around the central point (instead of radiation from a central point, which is usually the case with the radial-gradient).

.piechart { 
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%); 
  border-radius: 50%; 
  width: 300px; 
  height: 300px; 
}

12. Transition

Transition is a very useful CSS property for smooth color change on:hover. It helps create hover effects not only on links but other elements as well. These effects are visually appealing and allow for a smooth change of color. Here is one basic implementation of the CSS transition on links.

a { 
 color: #1b80b7; 
 transition: all .2s linear; 
}
a:hover { color: #52bff2; }

You can even use this technique for creating far more advanced and creative hover effects. The transition allows you to animate different properties of an element such as height, width, background, etc.

13. Counters

CSS counters allow you to style your numbered lists. With the help of counters, you could adjust your content’s appearance depending on the location it has on a web page. It could be quite a useful hack when it comes to styling your numbered lists.

For implementing CSS counters, you can:

Increase/decrease counter value using counter-increment
Use counter() or counters() function to display counter value from within the content property

ol.numbered-list > li:before { 
  content: counter(li); 
  position: absolute; 
  box-sizing: border-box; 
  width: 45px; 
  height: 45px; 
  background: #f3b70f; 
  border-radius: 50%; 
} 

ol.numbered-list li { 
  position: relative; 
  left: 0px; 
  list-style: none; 
  counter-increment: li; 
}

14. ::selection

With the "::selection" pseudo-element you can change the color of text selection by overriding at browser level to replace the color of text highlight with your defined color option. Your chosen color would appear when the content is selected using the cursor.

:selection { 
  background-color: #f3b70f; 
}

15. Styling Broken Images

Poor web designs don’t often have a way to manage broken images, and whenever an image is missing, the webpage doesn’t look good. Considering that the problem may arise now and then, advanced CSS could be used to styling broken images and make your custom error messages look presentable to the visitors. Here’s how you can do that:

img { 
  font-family: 'Helvetica'; 
  font-weight: 300; 
  line-height: 2;   
  text-align: center; 
  width: 100%; 
  height: auto; 
  display: block; 
  position: relative; 
} 

img:before {  
  content: "We're sorry, the image below is broken :("; 
  display: block; 
  margin-bottom: 10px; 
} 

img:after {  
  content: "(url: " attr(src) ")"; 
  display: block; 
  font-size: 12px; 
}

Here, we use :before and :after pseudo-classes to display error messages in case of a missing/broken image. The value of src property is returned using attr() function in CSS, displaying the faulty URLs.

16. @support

When using a CSS property that’s not supported by most web browsers, we advise using a feature query known as @support rule. It helps you to find out if the browser supports the CSS property: value pairs or not. Any code that you have put inside the @support block will only render if the condition is true. And, if the browser does not understand @support, it won’t generate the given code.

@supports (text-stroke: 4px navy;) { 
  .example {
    text-stroke: 4px navy;
  } 
}

Even though you might still have to face browser compatibility problems using some properties, we suggest that you use them and put them inside the @support block, nevertheless. Browsers may have limited support now, but they are likely to become common practices in future. If you want to make sure that the browser supports that certain style effects, wrap your styles inside the @support rule.

So, how do you like these CSS properties and rules that are certainly lesser-known and not often used by most front-end web developers? Of course, there is much more to explore about CSS, but this certainly makes a great starting point. Try implementing these CSS secrets today and make your future web designs better.

16 CSS Secrets to improve Web Designs