Discover Clever Ways to Use CSS for Web Design

Are you interested in discovering some clever CSS techniques to enhance your web design skills? Below are 13 easy tricks to get it done!

1. Curve Text Around a Floating Image

shape-outside is a CSS property that allows geometric shapes to be set in order to create a text region that can float around. This can specially be beneficial if you use geometric shapes in your web pages and want to wrap the text dynamically around the shape to avoid any overlapping. Below is a sample code snippet and its output.

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

Resource — https://css-tricks.com/almanac/properties/s/shape-outside/

2. Easily Resize Images to Fit The Width

You might often get into a pinch where images have to match a given width, while proportionally scaling. An easy way to implement this is to use the maximum width to handle it. Below is a sample code snippet.

img {
    max-width:100%;
    height:auto;
}

3. Absolute positioning

If you want to statically position an object on your web page to a specific position, you can use absolute positioning to perform it like the below example.

position:absolute

Resource — https://css-tricks.com/absolute-positioning-inside-relative-positioning/

4. Using SVG for Icons and Logos

If you use JPG, PNG or GIF images in your web pages, they can sometimes be pixelated if resized. To tackles this, you can use SVG images as all modern browsers support SVGs for all resolution styles (without pixelating the logos). The below code is the CSS code for displaying a website logo.

#logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 80px;
  background: url(logo.svg);
  background-size: 100px 80px;
}

5. Overriding all styles

If you want to override a different CSS style for a specific element, use !important in your CSS theme. In the below example, we are overriding the color of the H2 headings with red instead of blue.

.section h2 { color:red !important; }

6. Vertical alignment

The trick here is to keep the menu height and the text line height same. Below is the code snippet.

.nav li{
    line-height:40px;
    height:40px;
}

7. Highlight on Hover

This is a highlight technique where you can change the colors of buttons , text links, site bocks, icons, etc when someone hovers over those elements. Below isa sample code snippet and output.

.a h2{
    font-size:42px;
    color:#000;
    font-weight:600;
}

.a h2:hover{
    color:#f00;
}

Resource — https://youtu.be/zPcvAwp71uA?si=JB8bPHoE4TC5QQg3

8. Apply CSS to multiple classes, or selectors

To make sure that all the photos, the blog and the sidebar have the same boundary, you need not write the exact same CSS 3 times but can list the items separated by commas. Below is an example.

.blog, img, .sidebar {
    border: 1px solid #000;
}

9. Before

This CSS is a selector which lets you pick a CSS object and insert content in front of each occurrence of that particular class. In the below example, there is a continue section added before any H2 tag.

h2:before { 
    content: "Continue: ";
    <span class="Apple-converted-space"> color: #F00;</span>
}

10. After

Similar to the previous one but the content is inserted after the selected section. Below is an example.

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

11. Drop caps

In articles, that 1st, big letter really catches your attention, doesn’t it? Even with CSS, you can do the same trick by using the pseudo element :first letter. Below is a sample code snippet and its output.

a:first-letter{
    display:block;
    float:left;
    margin:5px;
    color:#f00;
    font-size:500%;
}

Resource — https://www.csestack.org/create-drop-cap-using-css-html-code/

12. Force Text To All Caps, All Lowercase, or Capitalised

Using this CSS trick, you can force any text of a specific type to be of a specific case. Below are the examples for All Caps, All Lowercase, or Capitalised.

h2 { 
   text-transform: uppercase;
}

h2 { 
  text-transform: lowercase; 
}

h2 { 
  text-transform: capitalize; 
}

13. Links

This CSS snippet helps the visitors know which links they have already visited by highlighting them with a different color. Below is an example where the visited links are highlighted with purple instead of blue.

a:link { color: blue; }
a:visited { color: purple; }