• Pure CSS Material Design Style Button


    In fact, Material Design’s flattened icon button, this type of button often only uses the change of geometric color blocks, can catch the user’s eyes, and understand the meaning of the button from the geometric shape, which is also the design concept and essence that Material Design emphasizes very much. Emphasis and Principle of Application […]

  • Has to Collection – IE CSS-filter Filter Small Knowledge Daquan


    Preface Some time ago, I used it when I was doing a project.opacityOpacity attribute, because the design drawing is translucent background, white text So I used the filter attribute in IE. I heard that this attribute has different effects. It is not only opaque, so I took time to charge it. Sometimes we are used […]

  • Hovering Transition Animation Trilogy for CSS Beginners


    CSS doesn’t have to be so complex to achieve special effects. Here are three examples of super simple transitions, which may be just a few lines of code, but adding them to a Web application will add a lot of color to it.Here’s the code we’ll build in this tutorial Project settings In this project, […]

  • Positive Polygon Transform of Single Divide (Pure CSS)


    In the previous article, we introduced how to make Material Design-style buttons with before and after pseudo-elements. The key technology is to use the width of the border and the width of the div body flexibly. So we add another effect to this article, which is to make “single” div change from regular triangle to […]

  • [Basics] Which of the 15 CSS median approaches have you used?


    Brief statement Centralization of CSS is a problem that front-end engineers often face, and it is also one of the basic skills. Today, I have time to compile a compilation of CSS centralization schemes. At present, there are 15 schemes including horizontal centralization, vertical centralization and horizontal vertical centralization. If there are omissions, they will […]

  • CSS Universal Data Type


    There are many formats for attribute values in CSS. In order to enable the user agent (browser) to identify whether a value is valid, it is necessary to confirm that the value conforms to one of the formats supported by the value. The formats supported by these attribute values are called data types and are […]

  • CSS3 uses transition attribute to achieve transition effect


    Property details Transition attributes are intended to allow some attributes of css, such as background, to appear as smooth transitions. It is a merged attribute, which is composed of the following four attributes: Transit-property: Sets the CSS properties of the application transition, such as background. Transition-duration: The time it takes to set the transition effect. […]

  • A Brief Introduction to Background Attribute in CSS


    As I mentioned earlier, each element in the document tree is just a rectangular box. These boxes have a background layer, which can be completely transparent or other colors, or a picture. This background layer is controlled by eight CSS attributes (plus one abbreviated attribute). background-color The background-color attribute sets the background color of the […]

  • Negative pseudoclass: not (s) | CSS-Tricks


    Not (X) is a negative pseudoclass (selector) in CSS, and accepts a simple selector as a parameter. Essentially, any other selector can be made (as a parameter). Not (selector) matches elements not selected by the passing parameter selector. Passing parameters may not include additional selectors or pseudo-element selectors. /* the X argument can be replaced […]

  • What you need to know about CSS Transition


    The transitional nature of CSS3 brings simple and elegant animation to web applications, but it has many rules compared to the first meeting. In this article, I will focus on the more complex parts of CSS3 transition, from chains and events to hardware acceleration and animation functions. Let the browser control the animation sequence, by […]

  • Seven Methods of CSS Vertical Centralization


    In editing a page, we usually use horizontal and vertical alignment to design, and horizontal alignment is a good way to deal with it, just setting margin: 0 auto; or text-align: center; it can easily solve the problem of horizontal alignment, but the most troublesome alignment problem has always been “vertical alignment”. Here are seven […]

  • CSS Layout Foundation (Three-column Layout)


    Preface You always hear about the two-wing layout and the Grail layout… I don’t know who named it. I’ll call it the three-column layout. Although they are slightly different, they essentially achieve a three-column layout, that is, the left and right columns are fixed, and the middle is adaptive. Implementation scheme A random search on […]