css tricks

Best CSS Tricks to Boost Your Productivity !!

Spread this useful information with your friends if you liked.

 

CSS tricks

CSS stands for cascading style sheets is a part of HTML used to display elements on websites. It is the basic technology started as a front-end developer.

Apart from styling, coloring, and positioning the elements on the web page CSS can do something more like animations, picturing, and giving a spirit to a website. 

 

Get ready now to know about the tips and tricks to change the way of the usage of CSS.

Some of the basic tricks are given below, take a glance at them.

Vertical alignment with flex – 

Positioning and aligning becomes easier with the use of Flex. It made vertical alignment fast, nice and easy as compared to earlier.

Let’s write an example 

.parent {
            
display: flex;
            
align-items: center;
            
justify-content: center;
            
height: 100vh;
            
width: 100wh;
            
}

Easy, Right?

Blend Modes – 

One can do a lot of things in CSS one of them is blend mode.

There are two properties in blend modes: mix blend mode, which explains blending between element and element behind it, Background blend mode which defines blending of the background image, and background color of that image.

For example ,

blend {
           
width: 100vw;
           
height: 500px;
          
display: flex;
          
align-items: center;
          
justify-content: center;
        
} 

       
.blend img {
         
position: absolute;
         
}

        
.blend h1 { 
         
font-size: 150px;
        
mix-blend-mode: overlay;
       
}

Parallax scrolling-

It is the most common trend in web designing. It helps the user to scroll the webpage at a different speed.

The background image is scrolled down with this tool.

Shape outside-

This feature is not very common in web designing but can be used to decide how content can be wrapped around the floated element.          

Let’s see how it works:

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

Clip Path – 

It allows the users to set the image of a specific shape like a triangle, circle, or other. Take a glance at the example of how it works. 

.ellipse img {
          
clip-path: ellipse(200px 200px at 100px 100px);
          
}

         
.circle img {
           
clip-path: circle(30%);  
           
}

          
.polygon img {
           
clip-path: polygon(5% 5%, 100% 10%, 900% 75%,75% 75%, 75% 100%, 60% 75%, 20% 80%);
             
}

Content – It is the property of CSS that allows the user to insert an icon from an icon font in a specific place.

Drop Caps-

Most loving feature. It is used to highlight the content of the first page. The first letter or first thing always attracts everyone so it grabs the attention.

Let me show with an example 

p:first-letter{
           
display:block;
           
float:left;
           
margin:3px;
           
color:#f00;
           
font-size:300%;
           
}

CSS Reset – 

CSS settings for default browsers are unique, So you have to reset those. This feature provides you a strong base for your websites and gives you consistency in the CSS starting point.

It removes unwanted borders, margins, paddings, lines, etc.

Image filters– 

Stunning results can be made by playing with images and can bring lots of amazing effects for the layout.

CSS permits the usage of filters on the images to improvise the graphics of the image in Photoshop.

CSS Animations-

Animations play a vital role in the user experience and to gain attention in web designing. CSS gives access to the developers to create things much easier and smooth.

Element Rotation–  

A dynamic animation tool that can be used in CSS is rotation, and it’s great to add some extra support to loader elements, logo, and image in the gallery.

Let’s check how it works: 

cat IMG {
        
width: 200px;
        
margin: auto;
        
animation-name: rotate;
        
animation-duration: 10s;
        
animation-delay: 2s;
        
}

        
@keyframe rotate {
         
0% { transform: rotate(0turn); }
        
100% { transform: rotate(6turn); }
         
}

        
@-webkit-keyframes rotate {
        
0% { transform: rotate(0turn); }
       
100% { transform: rotate(6turn); }
         
} 

Mask – 

If you have some ideas and practical knowledge of graphic design, you probably know how helpful masks are.

It’s possible to use image masks in CSS. To make a more clear check out the example:

img {
         
width: 1000px;
        
-webkit-mask-image: radial-gradient(circle at 50%,        black 50%, rgba(0, 0, 0, 0.2) 10%);
        
mask-image: radial-gradient(circle at 50%, black    50%, rgba(0, 0, 0, 0.2) 10%);
        
}

Zoom On Hover – 

When an image is created by the user, you need to mark the hovered image as often.

This feature enables you to add zoom on hover to focus on the hovered image. Let’s check with an example: 

images {
          
display: flex;
          
width: 100vw;
          
justify-content: center;
          
align-items: center;
          
}
  
         
img {
         
width: 400px;
        
}
  
         
img:hover {
         
transform: scale(1.3);
       
}

Controls the elements of a section– 

If the user wants to target the images of a certain section, they can use the blog element and combine it with the actual selector.

Focus on the image that you would select, not any other images. Have a look at how it works through an example:

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

● :Before – 

This is a selector that allows you to choose an element of CSS. It is used to insert content before every element with a class is applied to it.

To make familiar have a look on example :

h2: before{
                 content: “Read and write :”
          
<span class= “Apple converted space”>
            
}

:after – 

As before selector you can use after to insert the content with only on the specified elements.

Example: 

p:after{
               
content: “-StudyBer.com”;
               
color:#f00

Conclusion: 

This was brief information about the tips and tricks of CSS for web designing

You will get more updates further for this topic on Studyber.com, till then stay connected.

I hope you all enjoyed reading the article, If any doubts or queries are left behind please comment below we will get to you ASAP.


Spread this useful information with your friends if you liked.

Leave a Comment

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