9 super practical CSS tips to help designers and developers

A web designer's head must be filled with a lot of knowledge related to his work. When it comes to CSS, it can help design websites, give them more design possibilities, and make your website more attractive in a simpler way, which is not easy to cover all aspects using traditional technologies.
For the front-end and web pages, CSS is indeed a first-choice skill that needs to be mastered.
Here are 9 very practical CSS3 properties and usage techniques.
1. Rounded corners effect When talking about rounded corners, I have frequently heard the following shortcomings in various discussions: implementation difficulties, compatibility difficulties, poor performance, etc. Today's Web design requires a variety of new development skills, so more and more front ends and pages are beginning to use HTML5.
For HTML5, the requirements that previously had to be implemented using images can now be achieved through code. The "border-radius" added in CSS3 can be used to directly define the rounded corners of HTML elements and supports the latest versions of all browsers.
I can achieve this with the following code:

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

We can also use the combined version below, or use it as a shorthand for the above code.

-moz-border-radius: 10px 20px 30px 0;

For more information about IE browser's support for CSS3 properties, you can read this English article.
2. Shadow effect Another interesting feature that can be achieved with CSS3 is the shadow effect (box-shadow), which can be achieved very simply through "box-shadow". Our common mainstream browsers all support this property, and Safari browser supports the optional prefixed -webkit-box-shadow property.
The code includes:

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

The following JavaScript code can also achieve the same shadow effect:

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

3. @Media Attribute
@Media can directly specify the application style to introduce media attributes, which is used to change the web page style of the same style for different screen sizes. It also helps with styling changes in responsive web design. This can be achieved by simply modifying the following code.

@media screen and (max-width: 480px) {
}

And you can even specify CSS print preview using @media print as follows:

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

4. Add a gradient fill Gradients in CSS3 are another amazing property. It is not yet supported by all browsers, so it is best not to rely entirely on it for setting layouts. Here is a CSS-based gradient navigation bar for your reference.
Here is how it is done.

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

5. Background size Background size is one of the most practical effects in CSS3, and many browsers currently support it. The Background size property allows you to control the size of the background image as you wish.
In the past, the size of images used for backgrounds was not adjustable in the style. If you can't imagine how bad that was, you can try to recall that when you were making wallpaper on your computer desktop, you encountered a picture that you liked but it didn't fit the desktop size, and you had to fill it by tiling.
Such a desktop is so ugly that anyone with decent aesthetic sense would have the urge to smash the screen. And now we can make the background image fit our page by changing one line of code.

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

6 @font face
The attribute has proven its usefulness when it comes to transforming fonts using CSS3. In the past, due to various font licensing issues, only a few specific fonts could be selected during the design process. And through @font face we can customize the name of the font:

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

Then we can use the customized mySmashingFont font family anytime and anywhere through a simple code

div{font-family:mySmashingFont;}

7. clearfix attribute If Overflow: hidden clearing the floating effect is not your first choice, then clearfix should be your better choice, which allows you to handle different HTML elements individually.

.clearfix {
display: inline-block;
}

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

8. Margin: 0 auto
Margin: 0 auto implements the most basic function in CSS. We often use it to implement the simplest and most commonly used function - centering. Although CSS itself does not have a function to specify centering, it is still very simple to achieve this function by specifying a margin through auto margin.
With this property, you can center an element with a simple piece of code. But it should be noted that, as in the following code, a width must be set for the div.

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

9. Overflow: hidden
Overflow: Hidden, its main function is to hide overflow, and as mentioned above, people rarely use its other function, which is to clear floats.

div
{
overflow:hidden;
}

Via: Smashing HUB

<<: How to remove the "Enter" in the form, "Submit" and "Enter != Submit"

>>: CSS Naming: BEM, scoped CSS, CSS modules and CSS-in-JS explained

Summary of new usage of vi (vim) under Linux

9 super practical CSS tips to help designers and developers

Summary of new usage of vi (vim) under Linux

CSS clear float clear:both example code

Install MySQL database 5.6 source code under Linux and change the login user password

Explanation of the basic syntax of Mysql database stored procedures

A brief discussion on the pitfalls of react useEffect closure

Detailed tutorial for installing mysql5.7.18 on centos7.3

Detailed explanation of creating a view (CREATE VIEW) and usage restrictions in MySQL

mysql subquery and join table details

Alibaba Cloud OSS access rights configuration (RAM permission control) implementation

vue+node+socket io realizes multi-person interaction and releases the entire process

Recommend

MySQL database JDBC programming (Java connects to MySQL)

MySql 8.0.16-win64 Installation Tutorial

Detailed explanation of Docker Compose deployment and basic usage

Detailed tutorial on docker-compose deployment and configuration of Jenkins

Detailed explanation of HTML programming tags and document structure

Solve the problem that await does not work in forEach

Detailed steps to expand LVM disk in Linux

Complete guide to using iframe without borders or borders (practical experience summary)

Implementation of nginx flow control and access control

A brief discussion of the interesting box model of CSS3 box-sizing property

11 common CSS tips and experience collection

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

A brief discussion on CSS blocking merging and other effects

Several ways to pass data from parent components to child components in Vue

Learn about JavaScript closure functions in one article