CSS Advanced-That make you a web designer

CSS Advanced:

In the previous article we will tell you basics of CSS. But in this article we will tell you advanced features of the cascading style sheet. Our aim is to make you a web designer and developer and make your earning online by using this skills.

In this article we will teach you complete cascading style sheet for free. Some websites will teach you this when you are paying for this but we will not charge you any fees and also tell you about advanced cascading style sheet.

So let’s begin the CSS advanced.

CSS Round Corners:

This is the cascading style sheet property that help us to make the corner into round shape of the border that will look attractive then corner shapes. You will also fill the box using this syntax.

 

#corner{

Width: 70px;

Height: 90px;

Padding: 20px;

Border-radius: 20px;

Background-color: red;

}

 

This code will helps you to make the round shaped border and also helps to set the height width and color of the border.

CSS Backgrounds:

Cascading style sheet helps you to add multiple images as a background by using the cascading style sheet property. You will different backgrounds in your website. The syntax of adding multiple backgrounds in website is.

 

#example{

Background-image: url(image.jpg), url(image2.png);

Background-position: right top, left bottom;

Background-repeat: repeat, no-repeat;

}

By using this syntax you will be able to add multiple and different images on your website as a background.

CSS Colors:

In this topic you will able to add single or multiple colors in your website. We will also use the RGBA color in our website and also used this color in our font and also its background. The syntax of adding the colors is.

 

#h1{

Background-color: rgba(255, 50, 0, 0);

}

 

This will helps you to add gradient in your heading. You will also use this in your paragraph and in your website as a background.

CSS Shadow Effect:

In the cascading style sheet it will allows us to make the shadow of the font also make the shadow of the box. That will make the look of our box and font real. That is looking very beautiful.

The syntax of adding the shadow in our font is.

 

#h1{

Text-shadow: 4px, 4px, 6px, blue;

}

 

It will make the shadow of our text is blue the length and width of this shadow is 4px. The shadow is maximum 2 to 4px. If we will increase this it will look bad.

CSS 3d Transforms:

It will also allow us to make our text and box 3d. This is the feature that will be used in almost all websites. This is the trending feature of the cascading style sheet. To make our font and box 3d transform we will use this syntax.

#div{

Transform: rotatex(150degree);

}

#div{

Transform: rotatey(150degree);

}

#div{

Transform: rotatez(30degree);

}

 

We will add t3 types of coding that will help us to rotate our text first code is used for x axis second is for y axis and third is for z axis that will combine and make the 3d transform of box.

CSS Transitions:

Cascading style sheet allows us to add transitions in our website. Transitions make the look of our website is beautiful. It will more important to add in our website. Suppose we will make a box when we take the cursor on it. It will be automatically zoom and it looks very beautiful.

The syntax of adding the transitions is.

 

Div{

Width: 20%;

Height: 30%;

Background: blue;

Transition: width 2s;

}

 

By using this code we will add the transition on our box our box height is 30% our box width is 20% and the color of our box is blue. When we move the cursor on this box the width of this box will increase automatically within 2 seconds.

CSS Animation:

In this we will animate our box. Our box will move left to right and also moved from top to bottom. And while moving the color of this box will be changed automatically that make the look of our website attractive. The syntax of adding the animation in our website is.

 

@key phrase example {

From {background-color: red ;}

To {background-color: blue ;}

Div {

Width: 70px;

Height: 70px;

Background-color: red;

Animation-name: example;

Animation-duration: 5s;

}

 

By using this syntax we will move the box from left to right and the colors turn red to blue while moving. It will be move using rotate feature. We use the CSS animation for making the look of our website better.

CSS Image Reflection:

It will enable us to make the reflection of the picture. It will be same as real picture that we upload. This feature is used when we making a logo and make the design of image better. The syntax of making the reflection of the image is.

 

Img{

-webkit-box-reflect: below;

}

 

That will help us to make the reflection of the image under the real image. This is the very advanced feature of the cascading style sheet.

CSS Masking:

It will enable us to add the image between our font widths. It will make the font look professional. Under the font the image will look better than if we image set as a background on our website. To adding the masking the syntax is.

 

.mask{

-Webkit-mask-image: URL(image.jpg);

Mask-image: URL(image.jpg);

-Webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

}

 

This code will help us to add masking between our font. That looks very beautiful and amazing. This will also help us to make the look of our website better.

CSS Buttons:

A css button allows us to make the button that are added in our website better. If we make the button in simple HTML. It will looks very creepy but if we add the cascading style sheet effects on it. It will be look very beautiful. A css button will make using some properties of cascading style sheet. To making the button looks better we will use this syntax.

 

.button{

Background-color: green;

Border: none;

Color: white;

Padding: 12px 34px;

Text-align: center;

Text-decoration: none;

Display: inline-block;

Font-size: 15px;

}

 

So using this code we will be able to add designs in our html button.

So here the Cascading style sheet basics and advanced are completed. If we read the complete articles then we will guaranteed that you will be able to make the front end design of the website using hypertext markup language and cascading style sheet

For reading the Cascading style sheet basics click on this.

For more information visit to this website.

Leave a Comment