9 Practical CSS Properties Web Front-end Developers Must Know

9 Practical CSS Properties Web Front-end Developers Must Know
1. Rounded Corners

Today's web designs are constantly keeping up with the latest development technologies, and are using HTML5 to develop diverse web applications. One of the advantages of HTML5 is that elements that previously had to be implemented with images can now be implemented with code. "border-radius" is an important attribute to achieve this function, which can be used to directly define the rounded corners of HTML elements and is supported by all modern browsers.

CSS Code

Copy code
The code is as follows:

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

To fully understand IE browser's support for CSS3 properties, please read this article.

2. Shadow Effect

The shadow effect can be easily achieved through the box-shadow property of CSS3. All major browsers support this property, and Safari supports the prefixed -webkit-box-shadow property.

CSS Code

Copy code
The code is as follows:

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

You can also use JavaScript to achieve the shadow effect, as follows:

CSS Code

Copy code
The code is as follows:

object.style.boxShadow=”20px 10px 7px #ccc”

3. @media attribute

The Media attribute is used to set the style of the same style sheet on different screens. The medium or media to which this style is applied can be specified in the attribute value.

CSS Code

Copy code
The code is as follows:

@media screen and (max-width: 480px) {
/* Display style of the web page on a screen with a width of 480px*/
}

Developers can also use the @media print attribute to specify the print preview style:

CSS Code

Copy code
The code is as follows:

@media print
{
p.content { color: #ccc }
}

4. Gradient fill

The Gradient property of CSS3 gives developers another amazing experience. Gradient is not yet supported by all browsers, so you cannot rely entirely on Gradient to set the layout.

CSS Code

Copy code
The code is as follows:

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5. Background size

Background size is one of the most important properties in CSS3 and has been supported by many browsers. The Background size property is used to set the size of the background image. Previously, the size of the background image was not adjustable in the style. Now, using the Background size property, you can achieve the background image effect the user wants with just one line of code.

CSS Code

Copy code
The code is as follows:

div
{background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6 @font face

The @font-face attribute in CSS3 has made great improvements to referencing font files. This attribute is mainly used to embed custom web fonts into web pages. Previously, due to font licensing issues, designers were limited to using specific fonts. First, customize the name of the font:

CSS Code

Copy code
The code is as follows:

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */
}

Then you can use the mySmashingFont font family anywhere:

CSS Code

Copy code
The code is as follows:

div
{
font-family:mySmashingFont;
}

7. The clearfix attribute

If the designer thinks that Overflow: hidden cannot handle floating well, then clearfix provides a better solution for handling floating.

CSS Code

Copy code
The code is as follows:

.clearfix {
display: inline-block;
}

CSS Code

Copy code
The code is as follows:

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

8. Margin: 0 auto

Margin: 0 auto property is a basic CSS property. Although CSS syntax does not define a statement for centering block elements, designers can still use the auto margin option to achieve this function. This property can be used to center an element as needed. But please note that this will only be possible if the designer sets the width of the div.

CSS Code

Copy code
The code is as follows:

.myDiv {
margin: 0 auto;
width:600px;
}

9. Overflow: hidden

Overflow: In addition to hiding the overflow function, the Hidden CSS property also has the function of clearing floats.

CSS Code

Copy code
The code is as follows:

div
{
overflow:hidden;
}

<<:  CSS3 to achieve simple white cloud floating background effect

>>:  React event binding details

Recommend

Vue custom component implements two-way binding

Scenario: The interaction methods between parent ...

How to safely shut down MySQL

When shutting down the MySQL server, various prob...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...

How to hide the text in the a tag and display the image? Compatible with 360 mode rendering

Often you will encounter a style of <a> tag ...

Installation and configuration tutorial of MongoDB under Linux

MongoDB Installation Choose to install using Yum ...

MySQL permission control details analysis

Table of contents 1. Global level 2. Database lev...

SQL merge operation of query results of tables with different columns

To query two different tables, you need to merge ...

mysql add, delete, modify and query basic statements

grammar Here is the generic SQL syntax for INSERT...

An article teaches you JS function inheritance

Table of contents 1. Introduction: 2. Prototype c...

Method of Vue component document generation tool library

Table of contents Parsing .vue files Extract docu...

Fixed table width table-layout: fixed

In order to make the table fill the screen (the re...

Solution to installing vim in docker container

Table of contents The beginning of the story Inst...

Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox

1. Download related tools and images Download Lin...

Characteristics of JavaScript arrow functions and differences from ordinary functions

Table of contents 1. Use of arrow functions 1. Fr...

Web page custom selection box Select

Everyone may be familiar with the select drop-dow...