10 CSS skills required by web designers and css skills required by web designers

Source: Internet
Author: User

10 CSS skills required by web designers and css skills required by web designers

CSS is the foundation of web designers. Understanding CSS allows them to design more beautiful and distinctive web pages. It is a fascinating thing for designers to use CSS techniques to skillfully deal with CSS. There are many interesting things in the deep-sea world of CSS. You just need to find the one that best suits you. Of course, we cannot remember all CSS rules and syntaxes at once, but we should remember those very useful CSS skills for future development. Today, we have carefully prepared 10 CSS skills that are most useful to web designers. If you want to design a unique web page, you must pay attention to it. This blog was written in collaboration with Business Card Printing, an online Printing company that provides high-quality Printing services.

1. @ font-face

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

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

2. clearfix

If you cannot clear the floating of elements, this is a way to clear the floating. You can use this method independently for any HTML element.

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

3. @ media

@ Media: You can set the media of your current website. It helps you adjust the width of your website based on your display.

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

4. transform: rotate (30deg );Combine these conversion attributes with CSS transition effects to create interesting dynamic effects.

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

5. background-size

This rule helps you adapt to the full screen background on your website. This is not like the previous CSS version that requires heavy coding.

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

6. input [type = "text"]

This input [type = "text"] selector and other advanced selector can take you from the general level to the advanced level. It is nice to use the attribute selector to control the submitted version of the input element or add an icon for an external link?

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

7. margin: 0 auto;

It is strange that there are no specific standards to center block-level elements. This method can center block-level elements in the parent element.

123 #container {    margin: 0 auto;}

8. a {outline: none ;}

When you browse your website, clicking a link and a huge dotted box will span the entire web page, which will seriously affect your mood. This "a {outline: none;}" statement will remove this, but for ease of use, don't forget to add the focus status to your link.

1  a {outline: none;}

9. overflow: hidden

This is the best way to clear the floating elements that have not been loaded into your CSS. Use it to make the website respond faster.

123 .container {    overflow: hidden;}

10. color: rgba ();

PNG images are popular and widely used in Webpage Design because of their transparency. But now you can use the following method to achieve transparency. It uses the red, green, and blue channels and sets its opacity value to achieve transparency, such as 0.5 corresponding to % 50 opacity.

123 .btn {    color: rgba(0,0,0,0.5);}
Related Article
Large-Scale Price Reduction
  • 59% Max. and 23% Avg.
  • Price Reduction for Core Products
  • Price Reduction in Multiple Regions
undefined. /
Connect with us on Discord
  • Secure, anonymous group chat without disturbance
  • Stay updated on campaigns, new products, and more
  • Support for all your questions
undefined. /
Free Tier
  • Start free from ECS to Big Data
  • Get Started in 3 Simple Steps
  • Try ECS t5 1C1G
undefined. /

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.