15 practical CSS online example tutorials_html/css_WEB-ITnose

Front-end technology can be said to be a technology that must be learned. Nowadays, to build a website, you need to know DIV and CSS. In many domestic companies, when recruiting web designers, they are required to be able to write basic front-end code, so front-end technology It is necessary to understand, and it is also helpful for web designers themselves. Today I recommend some good practical CSS tutorials to everyone. Learning these can improve your CSS skills and learn some new and useful usages, which may be used in future projects.

Use CSS background to color SVG

About some usages of SVG images, css mask, adding color to background SVG, etc.

View the tutorial

CSS Tennis

Use CSS to draw a three-dimensional tennis ball.

View the tutorial

Practical CSS viewshed units

The new CSS viewshed units (VM, VH, VMIN, VMAX) turn out to be very useful Useful, especially for projects with responsive requirements, it is recommended that front-end personnel learn about it.

View the tutorial

How to use CSS to implement an expanded screen

This is an interesting usage. When the page is loaded, the screen expands left and right. It is displayed in the form of the DEMO effect, it is difficult to express...

View the tutorial

CSS 3D flip animation effect

The CSS flip effect is very nice. It is also practical and requires very little code to implement. It is recommended as an exercise. Recently, the editor also used this to implement a login form. It is really beautiful and can of course be used in various aspects.

View tutorial

How to write mobile-first CSS

Responsive website is a skill that front-end personnel must understand at present. The term mobile-first It also emerged, how can we make mobile first? I recommend taking a look at this tutorial.

PS: When designing, also start with the mobile version of DESIGN? The new version of Design Talent Network can consider this:)

View the tutorial

Responsive large multi-level menu

In some B2C malls, there are generally many categories and many menu levels, and it is a bit difficult to implement responsiveness. You can check out this tutorial for a solution.

View tutorial

CSS Guidelines

Detailed explanation of CSS specifications, such as style writing specifications, selection usage, etc.

View tutorial

Intro to CSS 3D transforms

Case studies and explanation tutorials about CSS 3D transformation

　View tutorial

　A Visual Guide to CSS3 Flexbox Properties

　Guanci CSS3 Flexbox properties are explained, mainly new usages in Layout layout.

View tutorial

Designing For Print With CSS

CSS print style settings can improve the effect of printed pages. It is recommended to learn CSS print style writing method.

View the tutorial

Pure CSS to implement responsive Table

This tutorial can make the Table on the website friendly on the mobile phone and compatible with responsiveness Mode.

View tutorial

Pure CSS FizzBuzz

View tutorial

(Ab)using CSS3's :nth -child selector to invent new ones

　Detailed explanation of the use of CSS3:nth-child pseudo-class element

　via: http://www.shejidaren.com/15- useful-css-tutorials.html