Modern CSS Tricks and Techniques

CSS is becoming more and more powerful every passing day. It helps the web designers to design a visually stunning website. There are some advanced CSS tricks and techniques that are beneficial in front end development.

CSS Tricks

1. Vertically align the elements with Flexbox

   Centering a text or element vertically is quite difficult for the front end developers. But display: flex property in CSS3 specification makes it easy for the developers.
   Here is the code for aligning the elements vertically:

   HTML:
   
<div class="align-vertically">
Vertically aligned
</div>
CSS:
.align-vertically {
background: red;
color: #fff;
display: flex;
align-items: center;
height: 200px;
}

   Output:
   Output of the code is as follows:

   

2. Use SVG for images and logos

   SVG is now supported by all modern browsers. For good resolution, its recommended to the front end developers to use the SVG instead of PNG and JPG.

   Code below represents how to use SVG format for logos and images in CSS:
   
#logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(mylogo.svg);
background-size: 100px 82px;
}

3. CSS Variables

   CSS variables are used to avoid the code redundancy. Once we declare the css variables, we can use them again and again. CSS variables are very useful for front end developers.

   Consider the CSS below:
   
:root1 {
--main-bg-color: coral;
--main-txt-color: #fff;
--main-padding: 15px;
}

   #divexample {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}

   Variables are declared by giving them name preceded by two dashes. In the above example, the main color, background color, and base padding are declared.
   To use variables, use the var() function as shown in the above example.

4. Truncate Strings in CSS

   Nowadays web designers or front end developers face a common problem when text is too long for its div. We can truncate the text in CSS3.

   See the code below that helps to tackle that problem:

   HTML:
   
<h1>
hii, this is long text which needs to truncate
</h1>

   CSS:
   h1 {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 20px;
   font-size: 1.3rem;
   margin: 0;
   background: white;
   resize: horizontal;
   }

   body {
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: #ccc;
}

   CSS of h1 tag defines a fixed width and prevents the text from overflowing the container.

   text-overflow: ellipsis;

   automatically adds ellipsis at the end of the text in order to indicate that text is truncated

   See the output here :

   

   This text box shows the truncated text. You can drag the div to see the proper text like this:

   

PHP programming is a valuable skill that a programmer can have. Let StudySection help you out with proving your programming skills through its PHP certification. StudySection provides beginner as well as expert-level certifications in PHP programming to prove your level of skills in PHP programming.

Share this...

Facebook

Twitter

Linkedin