Tag: css

How CSS @scope replaces BEM

One of the most common and challenging issues faced by front-end engineers is CSS naming conventions. With the popularity of the Block Element Modifier (BEM) approach, many people have become accustomed to organizing their styles according to a maintainable pattern. The upcoming implementation of @scope in Chrome will further improve the performance of BEM by […]

CSS Effect 009: Audio Ripple Loading Rhythm

100 common CSS examples + column directory This column records frequently used CSS examples and techniques, mainly including CSS layout, CSS special effects, and CSS lace information. Among them, CSS layout mainly lists some commonly used CSS layout information points, CSS special effects mainly include some animation examples, and CSS lace describes some CSS-related libraries, […]

CSS Special Effect 001: Put the mouse on the div to achieve effects such as rotation, amplification, and movement.

100 common CSS examples + column directory This column records frequently used CSS examples and techniques, mainly including CSS layout, CSS special effects, and CSS lace information. Among them, CSS layout mainly lists some commonly used CSS layout information points, CSS special effects mainly include some animation examples, and CSS lace describes some CSS-related libraries, […]

Parse overflow attribute in css

Table of Contents 1. overflow definition and attribute values 2. Attribute effect display 2.1 overflow: visible; do not crop the part beyond the box 2.2 overflow: hidden; hide the content beyond the box; clear the float 2.3 overflow: scroll scroll bar 2.3.1 overflow-y: auto; overflow-x: hidden; 2.3.2 overflow-x: auto; overflow-y: hidden; 2.3.3 overflow: scroll forces […]

JavaScript script to manipulate CSS

Scripted CSS is the use of JavaScript scripts to operate CSS. With HTML5, Ajax, jQuery and other technologies, you can design delicate and realistic page special effects and interactive behaviors to improve user experience, such as display/hide, positioning, deformation, movement, etc. of web page objects. Dynamic styles. 1. Basics of CSS scripting CSS styles come […]

CSS Effect 002: Various mouseover effects

100 common CSS examples + column directory This column records frequently used CSS examples and techniques, mainly including CSS layout, CSS special effects, and CSS lace information. Among them, CSS layout mainly lists some commonly used CSS layout information points, CSS special effects mainly include some animation examples, and CSS lace describes some CSS-related libraries, […]

HTML+CSS, Vue+less+, HTML+less component encapsulation to implement secondary menu switching style running (including all codes)

1. HTML + CSS secondary menu <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <title>Document</title> <link rel=”stylesheet” type=”text/css” href=”nav.css” /> <script src=”bottom.js” defer></script> </head> <body id=”body”> <!–Big frame–> <div class=”box”> <div class=”nav1″> <!–Horizontal navigation bar–> <div id=”logo” class=”logo”> <p><img src=”logo.png” width=”100px” height=”99px” /></p> </div> <ul> <li class=”special”><a href=”#”> HOME</a></li> <li […]

[CSS] transition, transform and animation

1.CSS transition Introduction Usually when a CSS property value changes, the browser will immediately update the corresponding style. A transition function has been added to CSS3, through which we can smoothly transition elements from one style to another within a specified time, similar to a simple animation, but without resorting to flash or JavaScript. In […]

Displaying XML documents using CSS

Introduction to CSS CSS (Cascading Style Sheet, Cascading Style Sheet or Cascading Style Sheet) is a style control language. Its basic idea is to define a corresponding set of display styles for each tag in the structural document. CSS can not only statically modify web pages, but can also cooperate with various scripting languages to […]