Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what super-practical CSS skills help designers and developers". In daily operation, I believe many people have doubts about what super-practical CSS skills help designers and developers. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "what super-practical CSS skills help designers and developers"! Next, please follow the editor to study!

A web designer is bound to be filled with a lot of knowledge about his work. When it comes to CSS, it can help you design a website, make it more possible, and make your site more attractive in a simpler way, which is not easy to do with traditional technology.

CSS is indeed the first skill to be mastered for front-end pages.

Here are 9 very useful CSS3 attributes and tips

1. Fillet effect

Talk about rounded corner editor has heard frequently in various discussions: implementation trouble, compatibility difficulties, poor performance and other shortcomings. Today's Web design requires a variety of new development skills, so more and more front ends and pages begin to use HTML5.

For HTML5, requirements that previously had to be implemented using pictures can now be implemented through code. The "border-radius" added to CSS3 can be used to directly define the rounded corners of HTML elements and support the latest versions of all browsers.

I can do 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 a combined version like this, or use it to take shorthand of the above code.

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

IE browsers support CSS3 attributes, which can be learned more from this English article.

two。 Shadow effect

Another interesting feature that CSS3 can implement is the shadow effect (box-shadow), which can be easily achieved through "box-shadow". Our common mainstream browsers support this attribute, while Safari browsers support the optional prefixed-webkit-box-shadow attribute.

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 properties for the same style to change the style of web pages with different screen sizes, and it also contributes to styling changes in responsive web design. This can be achieved by simply modifying the following code.

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

}

You can even specify a print preview of CSS using @ media print like this:

@ media print

{

P.content {color: # ccc}

}

4. Add a gradient fill

The gradient effect in CSS3 is another amazing attribute. It is not yet supported by all browsers, so it is best not to rely entirely on it to set the layout. Here is a CSS-based gradient navigation bar for you to refer to.

Here is how to do it.

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

5. Background size

Background size (Background size) is one of the most practical effects in CSS3, which is currently supported by many browsers. The Background size attribute allows you to control the size of the background image as much as you like.

The size of the image used to be used for the background is not resizable in the style, and if you can't imagine how bad it is, try to recall that when you were making wallpaper on your computer desktop, you came across a desirable picture that didn't fit the size of the desktop, which could only be filled with tiles.

Such a desktop is so ugly that a person who passes the aesthetic will have the impulse to smash the screen. Now we can adapt the background image to our page by changing one line of code.

Div

{

Background:url (bg.jpg)

Background-size:800px 600px

Background-repeat:no-repeat

}

6 @ font face

Property has fully demonstrated its usefulness when using CSS3 to transform various fonts. In the past, because of various font licensing problems, only a few specific fonts could be selected in the design process. With @ font face, we can customize the name of the font:

@ font-face

{

Font-family: mySmashingFont

Src: url ('blitz.ttf')

, url ('blitz.eot'); / * IE9 * /

}

And then we can use custom mySmashingFont font families anytime, anywhere through a simple code.

Div {font-family:mySmashingFont;}

7. Clearfix attribute

If Overflow: hidden clearing floats is really not your first choice, then clearfix should be your better choice, allowing you to deal with 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, and we often use it to implement the simplest and most commonly used function-centring. Although CSS itself does not have a specified center function, it is still very easy to achieve this function by specifying a margin through auto margin.

With this attribute, the element can be centered with a simple piece of code. It is important to note, however, that, as in the following code, a width must be set for div.

.myDiv {

Margin: 0 auto

Width:600px

}

9. Overflow: hidden

Overflow:Hidden, which is mainly used to hide overflows, as mentioned above, is rarely used to clear floats.

Div

{

Overflow:hidden

}

Via:Smashing HUB

At this point, the study on "what super-practical CSS skills help designers and developers" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.