Home / CSS3 / Top 10 CSS Hacks for Web Developers
6 minutes read
117 Views
Blog post thmbnail css

Cascading Style Sheets are the most effective approach to make a website more appealing. We will discuss Top CSS Hacks for Web Developers. CSS has a lot of tricks under its sleeve. Different kinds of tactics based on expertise and superb CSS design usually entice the client to devote his or her valuable time to the website. I started building the website as a PSD slicing and learned a lot of HTML elements and CSS methods along the way. At the same time, I created a number of appealing websites using CSS2 and CSS3. As a result, I’d like to share a few CSS hack guidelines that I believe every web developer should be aware of.

1- With Position Absolute CSS, any section appears in the centre of the screen.

section { 
 position: absolute;  
 left: 50%;  
 top: 50%; 
 transform: translate(-50%, -50%);   
 padding: 20px; 
 background: #444; color: #fff;
}

This method can be used to display any portion of the screen in the middle of the screen at any resolution. It’s incredibly simple to set up on the internet.

2- Vertical Height

.fullheight { 
    height: 90vh;
}

We may require the full screen to be 90 percent or 60 percent tall. Then, as I explained below, you may use the VH (view height) CSS method to solve the problem.

3- CSS Columns

We normally utilize JavaScript to generate column-based layouts, which is quite hard and time-consuming. However, utilizing the CSS columns rule, there is now a method around this:

HTML

<div class="container">
   <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.
   </p>
</div>

CSS

container {
    width: 500px;
    margin: 0 auto;
}
 
/* Creating columns CSS */

.container p {  
    -moz-columns:3;  
    -webkit-columns:3;  
    columns:3;
}

4- First letter caps

We all know that drop caps information attracts our attention first since it is visually appealing. It has the appearance of a classic book, and we all expect to use it in the content block.

CSS now provides us with this opportunity. Please see the sample below.

p:first-letter{
     display: block;
     float: left;
     margin:3px;
     color:#ff0000;
     font-size:80px;
}
CSS-Hacks

5- Gradient Text and Background

The gradient color scheme appears to be quite appealing. We previously utilized a gradient image. However, CSS now has new gradient CSS techniques. Here’s an illustration.

Text gradient

h2 {
     font-size: 50px;
     background: -webkit-linear-gradient(#eee, #333);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

Background Gradient

.section {
     height: 200px;
     background-color: red;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(red, yellow);
    /* Standard syntax (must be last) */
}

6- Cross-Browser Change the Text Selection Color

The stander colour blue appears when we select any section of text in the browser. CSS, on the other hand, includes a method for changing the colour in a different browser.

::selection {
     background-color: green;
    /* Safari */
}
 ::-moz-selection {
     background-color: red;
    /* Firefox */
}

7- Mobile Browser Input Field Design Issue in iPhone

When you access a webpage on the iPhone browser, you may apply rounded corners and drop shadows to each input. This style isn’t always required. It’s a simple fix, to be sure. Simply add this to any input fields or buttons that you don’t want to change the appearance of.

textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox {
     -webkit-appearance: none;
     border-radius: 0;
}

8- Important

Because inline CSS overrides your external CSS, we sometimes follow a few inline CSS defined in the HTML page and can’t hack certain style properties with the external CSS file. But don’t worry, CSS offers us the option of overriding this.

<p class=’’textColor” style=”color: red;
”>Example</p> .textColor {
    color: green !important;
}

9- Responsive

Every client nowadays needs responsive design since they want a website that works on all devices, which is now feasible thanks to media queries. The following is an example.

@media only screen and (max-width: 768px) {
     .textColor {
         color: white;
    }
}

10- Browser CSS Hacks

Every browser has default spacing, gap, sizing, and so on, and when we make any pixel-perfect design for all browsers supported, we may need such ticks. In addition, if we need a different style for a different browser, we can use these CSS hacking rules. It’s quite useful for any browser-related problem.

 .textColor {
     color: red 
}
/* IE6, IE7 */
 .textColor {
     *color: red;
}
/* Everything but IE6 */
 .textColor {
     color
    /**/
    : red 
}
/* IE6, IE7, IE8, but also IE9 in some cases :( */
 .textColor {
     color: red;
}
/* IE7, IE8 */
 .textColor {
     color
    /*\**/
    : red;
}
/* IE8, IE9 */
 .textColor {
    color: red 
    /* IE6 */
     .textColor {
         _color: red 
    }
    /* IE6, IE7 */
     .textColor {
         *color: red;
    }
    /* Everything but IE6 */
     .textColor {
         color
        /**/
        : red 
    }
    /* IE6, IE7, IE8, but also IE9 in some cases :( */
     .textColor {
         color: red\9;
    }
    /* IE7, IE8 */
     .textColor {
         color
        /*\**/
        : red\9;
    }
    /* IE8, IE9 */
     .textColor {
        color: red\0/;
    }
    /* IE9, IE10 */
     @media screen and (min-width:0\0) {
         .textColor {
             color: red
        }
    }
     /;
}
/* IE9, IE10 */
 @media screen and (min-width:0 
/* IE6 */
 .textColor {
     _color: red 
}
/* IE6, IE7 */
 .textColor {
     *color: red;
}
/* Everything but IE6 */
 .textColor {
     color
    /**/
    : red 
}
/* IE6, IE7, IE8, but also IE9 in some cases :( */
 .textColor {
     color: red\9;
}
/* IE7, IE8 */
 .textColor {
     color
    /*\**/
    : red\9;
}
/* IE8, IE9 */
 .textColor {
    color: red\0/;
}
/* IE9, IE10 */
 @media screen and (min-width:0\0) {
     .textColor {
         color: red
    }
}
 ) {
     .textColor {
         color: red
    }
}
/* Firefox CSS hacks */
 @-moz-document url-prefix() {
     .textColor {
         color: red;
    }
}
/* Chrome CSS hacks */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     .textColor {
         color:red;
    }
}
/* Opera CSS hacks */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
     head~body .textColor {
         color:red;
    }
}
/* Safari CSS hacks */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     .textColor {
         color: red;
    }
}
/* Opera 9.27 and below, safari 2 */
 html:first-child .textColor {
     color: red 
}
/* Safari 2-3 */
 html[
xmlns*=""] body:last-child .textColor {
     color: red 
}
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:nth-of-type(1) .textColor {
     color: red 
}
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
 body:first-of-type .textColor {
     color: red 
}
/* saf3+, chrome1+ */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     .textColor {
         color: red 
    }
}
/* iPhone / mobile webkit */
 @media screen and (max-device-width: 480px) {
     .textColor {
         color: red 
    }
}
</code></pre> <!-- /wp:code -->

Read More:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *