10 CSS web designer essential skills (turn)

English original: 10 Essential Rules for CSS Web Designers

CSS is the basis for web designers, knowledge of CSS enables them to design more beautiful and unique pages. Use CSS skills to skillfully handle CSS is to make designer fascinated by things. There are a lot of interesting things in the deep sea world of CSS, you just need to find the most suitable for you just fine. Of course, we can not suddenly remember all the CSS rules and grammar, but for the future development we should remember those very useful CSS techniques. Today, we carefully prepared the 10 most useful for web designers CSS skills, if you want to design a web page unique to stand out you have to take good care of. This blog is a provider of high-quality printing services and online printing company "Business Card Printing" written when working.

1. @ font-face

A good way fonts on other servers. Obviously, if you can not find the font you want on the hosting server, you can use this method in a style to introduce the font you want.

@font-face {
    font-family: Blackout;
    src: url("assests/blackout.ttf") format("truetype");
}

2. .clearfix

If you can not remove the float, which is a way to remove floating. You can use this method for any HTML element separately.

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

3. @media

You can set the current response @media media site, it can help you adjust the width of the site based on the user's monitor.

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

4. transform: rotate(30deg);

The combination of these properties and CSS conversion transition effects to create an interesting dynamic effects.

 .title {     transform: rotate(40deg); }

5. background-size

This rule helps you adjust to full-screen background in the site. This is unlike the previous version of CSS code that must be written very heavy.

 body {
     background: url(image.jpg) no-repeat;
     background-size: 100%;
 }

6. input[type="text"]

The input [type = "text"] selectors and other senior selectors take you to the senior level from the general level very helpful. Submitted version attribute selectors to control the input elements or add an icon to a foreign chain that is very good, right?

input[type="text"]{  width: 250px; }

7. margin: 0 auto;

Very strange, there is no specific criteria to make block-level elements in the middle. This method can make the center block element in the parent element.

#container { margin: 0 auto;}

8. a {outline: none;}

In browsing your site, a link points to a huge dashed box across the entire web page which will seriously affect the user's mood. The " A {Outline: none;} " statement will remove this, but for ease of use, do not forget to add your link also : focus state.

a {outline: none;}

9. overflow: hidden

This is the best yet clear is loaded into your CSS inside a floating element method. Use it to make the site faster response speed.

.container { overflow:hidden;}

10. color: rgba();

PNG picture because of its transparency, making it very popular and widely used in web design, but now you can use this same method to achieve this transparency. It uses red, green, and blue channels and its opacity value is set to achieve a transparent, like 0.5 corresponding to 50% opacity.

btn{ color: rgba(0,0,0,0.5);}

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3269285.html

10 CSS web designer essential skills (turn)

Guess you like