This article explains how to replicate Bilibili’s non‑overlapping subtitle effect using a simple HTML demo and the experimental CSS mask‑image property, detailing the implementation steps, code example, and visual results while noting its experimental status.
In early 2021 senior engineer Liu Lei led a complete redesign of Bilibili’s PC homepage, adopting Vue 3 with a custom SSR/CSR hybrid, responsive grid layouts via CSS grid and flex, theme variables, monorepo tooling, and extensive performance tweaks—boosting the page’s score dramatically while preserving hackability and supporting both narrow and ultra‑wide screens.
This article explains why applying a CSS grayscale filter is a low‑cost way to turn an entire website black‑and‑white for memorial occasions and provides three practical code snippets—including simple style rules, DOCTYPE adjustments, and Flash parameters—to achieve the effect across browsers.
This guide explains why and how to convert an entire website to black‑and‑white using CSS filter properties, provides two practical methods with code snippets, addresses browser compatibility, DOCTYPE requirements, and even Flash handling, and ends with a ready‑to‑use CSS block.
This guide explains how to apply the CSS filter grayscale() function to turn whole web pages—including images, text, and buttons—into grayscale, showing the required CSS rules, how different percentage values affect the result, and which browsers support the feature.
This article traces the evolution of CSS from its early table‑based days through the rise of responsive design, examines why large‑scale projects struggle with CSS, reviews major architecture patterns such as OOCSS, BEM and ITCSS, and explains how tools like Tailwind and CSS‑in‑JS address modern scalability challenges.
This article explains how to add a simple CSS snippet that applies a full-page grayscale filter, turning a website black-and-white, including the code, usage instructions, and notes on compatibility and alternative JavaScript methods.
This article provides a practical guide to essential Vite configuration options—including CSS preprocessor settings, PostCSS plugins, path aliases, server host and proxy, build output directories, and plugin usage—offering concise code examples to help frontend developers quickly set up and optimize Vite projects.
This article explains how a single mask image and the CSS mask-image property can be used to prevent subtitles from overlapping on‑screen characters in Bilibili videos, providing a lightweight demo with HTML/CSS code, visual results, and practical cautions about browser support.
This article explains how Element Plus applies CSS architecture concepts such as OOCSS and BEM, demonstrates generating BEM class names with JavaScript hooks and SCSS mixins, and compares the approach with classic ITCSS layering to improve maintainability and scalability of front‑end styles.
This article explains the differences between CSS pseudo‑classes and pseudo‑elements, lists their common selectors, and provides detailed usage examples—including content insertion, image addition, clearing floats, disabling search, and creating animated button effects—complete with code snippets and visual demonstrations.
This article explains how a single image and the CSS mask‑image property can prevent subtitles from covering on‑screen characters, provides a complete demo with code, shows the visual result, and discusses the experimental nature and limitations of the technique.
This article explains why class name and global element style conflicts occur in micro‑frontend architectures, and presents two main strategies—style naming with priority rules and host‑environment isolation using Shadow DOM or Garfish runtime plugins—to achieve reliable CSS isolation across parent and child applications.
This newsletter curates a selection of technical articles covering custom WebAssembly JavaScript runtimes, the evolution of JavaScript frameworks competing with native SDKs, fast component preview and debugging, an introduction to Web 3D graphics, the new CSS transform individual property, essential JavaScript utility methods, and an overview of CesiumJS for 3D earth visualization.
The CSS ‘ic’ unit, introduced in CSS 4, measures length based on the width of a CJK ideograph, allowing developers to specify dimensions such as ‘max-width: 2ic’ to span exactly two CJK characters, with a default value equivalent to 1 em.
Cube’s Inline Text technology, introduced to meet dynamic packaging demands on iOS and Android, replaces platform‑level text objects with a custom layout and rendering pipeline, enabling Web‑compatible CSS features, reduced package size, faster layout performance, and richer text styling for lightweight mini‑programs.
Chrome 105 introduces 25 new web‑development features—including a blocking=rendering attribute for scripts and styles, the :has() selector, onbeforeinput event, 125 Hz timer alignment, CSS :modal pseudo‑class, restrictions on the default identifier, container queries, enhanced scroll and fetch APIs, and experimental gesture‑scroll DOM events.
This tutorial explains how to create a functional analog clock using only HTML, CSS, and a small amount of JavaScript by leveraging CSS keyframe animations, animation‑delay (including negative values), and basic layout techniques such as border‑radius, box‑shadow, and absolute positioning.
This article explains how to use SVG path commands and JavaScript to draw and animate Bézier curves for a fluid drag‑slider UI, covering background, curve theory, implementation steps, stroke‑dash techniques, offset‑path alternatives, and SMIL animation for interactive effects.
This article demonstrates how to create dynamic liquid‑flow animations for static images using SVG filters (feTurbulence, feDisplacementMap), CSS mask‑image, Canvas drawing, and TweenMax, providing step‑by‑step code for generating hotspots, animating them, and integrating image upload and canvas clearing in a web page.
This article curates a series of front‑end insights, covering Babel fundamentals and plugin development, Flutter widget lifecycle and state management, pure‑CSS transition recreations, user‑experience considerations, practical front‑end best‑practice tips, and a discussion on Vue’s potential move away from virtual DOM, while also inviting readers to join the Cloud Academy front‑end team.
This tip shows how defining .img_container with width:100% and aspect-ratio:16/9 in CSS prevents layout disruptions after image loading and can also be leveraged in media queries for responsive design.
This tutorial demonstrates how to create a functional analog clock using only HTML, CSS keyframe animations, and a small JavaScript snippet that sets negative animation‑delay values so the clock starts synchronized with the current time.
This article explains CSS's invisible flow mechanism, compares block and inline elements to water flow, and details how width, height, and box‑sizing affect layout, providing practical insights for creating fluid and robust front‑end designs.
Chrome 104 Beta brings region capture for video conferencing, new origin trials like shared element transitions, optional Secure Payment Confirmation opt‑out, updated speculative parsing, multi‑screen window placement, focus‑visible CSS, WebGL color management, and deprecates several legacy APIs, with the stable release slated for August 2.
This tutorial explains how to build a responsive, theme‑switchable real‑time data visualization dashboard using a Python Flask back‑end and ECharts front‑end, covering requirements, architecture, HTML/CSS grid layout, JavaScript chart logic, JSON data handling, and deployment steps.
This article explains the six Flexbox child‑item properties—order, flex‑grow, flex‑shrink, flex‑basis, flex (shorthand), and align‑self—showing their default values, how they affect item layout, and providing practical HTML/CSS code examples for each.
This article demonstrates how to recreate the “声生不息” program logo using only native CSS and a small amount of JavaScript, covering gradient stripes, clip‑path shaping, background‑clip text effects, CSS variables for color toggling, and detailed code snippets for each implementation step.
This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.
This article traces the evolution of responsive web design from Ethan Marcotte’s original concepts to today’s component‑driven approaches, exploring CSS media queries, new user‑preference features, container queries, and emerging multi‑screen and foldable‑device techniques, while providing practical code examples and industry insights.
This article explores how to implement smooth scrolling using CSS and JavaScript, compares native scroll APIs, demonstrates practical React examples, explains how to differentiate user‑initiated and script‑driven scrolling, and provides compatibility tips and workarounds for common pitfalls.
This article demonstrates how to recreate the Douyin (TikTok) logo with animation using only a single HTML element, by dissecting its geometric components, employing CSS pseudo‑elements, background‑image gradients, variables, blend modes, and hover‑triggered transformations to achieve the full effect.
Chrome 101 introduces the experimental Federated Credential Management API, Priority Hints for resource loading, comparable WebUSB objects, a USBDevice.forget() method, deprecation of WebSQL in third‑party contexts, new CSS font‑palette and hwb() features, and an expanded MediaCapabilities API for WebRTC streams.
This article systematically explores front‑end page layout techniques, covering common layout types, their best‑practice implementations with CSS (including flex, grid, float, and positioning), detailed Less mixins for vertical, horizontal, and planar centering, and comprehensive solutions for two‑, three‑, and multi‑column layouts across desktop and mobile scenarios.
This article collection explores key front‑end topics—including Vue server‑side rendering, comprehensive monitoring strategies, Babel compilation fundamentals, the latest CSS 2022 features, and decorator design patterns, and tile‑layout techniques for BI reporting—while also introducing the Cloud Classroom front‑end team.
This article presents a curated list of twelve essential front‑end tools—including color scheme generators, font previewers, SVG converters, CSS generators, blob and wave creators, and a clipping path editor—each with brief descriptions and direct links to help developers enhance UI design and workflow efficiency.
This article explains how to enable CSS Container Queries in Chrome, describes the new container-type, container-name, and container properties, and provides practical code examples that demonstrate responsive layout changes based on an element's container size.
This article provides a comprehensive list of common CSS English terms along with their Chinese translations, helping developers and learners understand styling properties such as font-size, background-color, float, and many others for effective front‑end development.
This collection highlights recent technical articles and resources covering Vue 3.0, ESLint fundamentals, defensive CSS techniques, low‑code system design, React project setup, Nest.js with TypeORM, and an introduction to the LRU caching algorithm, offering practical insights for frontend developers.
This article explains the fundamentals of the CSS Flexible Box Module (Flexbox), describing main and cross axes, and provides detailed guidance on the six container properties—flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content—along with code examples and visual illustrations.
Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.
This article walks through practical ways to implement true dark mode on web pages—including manual toggles, system‑preference detection, CSS variables, stylesheet swapping, filter tricks, and common pitfalls—while providing complete code examples and explanations.
This article explains how modern CSS features such as the gap property for Flexbox and Grid layouts and the aspect‑ratio property simplify responsive design, reduce code complexity, and enable more intuitive, RTL‑safe layouts, replacing older hacks and padding tricks with concise, maintainable code examples.
This article explores essential CSS optimization strategies—including shorthand properties, selector merging, semantic class naming, property ordering, parent selector references, and modern methodologies like BEM, Atomic CSS, preprocessors, PostCSS, and CSS-in-JS—while providing practical code examples and tool recommendations for cleaner, more maintainable front‑end styles.
This tutorial demonstrates how to create a festive CSS3 animation of a spoon scooping dumplings, providing complete HTML and CSS code, visual examples, and download links for learners to copy, preview, and use the effect in their own projects.
This tutorial demonstrates how to recreate Baidu’s Yuanxiao Festival “Tangyuan” animation by using a sprite image and JavaScript’s setInterval to repeatedly shift background positions, providing complete HTML, CSS, and JavaScript code for both forward and reverse animation effects.
This article explains how the CSS clamp() function can replace complex media queries by linearly scaling numeric properties such as font‑size, padding, or margin between defined minimum and maximum values, using viewport units for fluid, responsive designs while keeping code concise and maintainable.
This tutorial shows how to build a Valentine‑themed full‑screen heart animation that falls like snow using HTML, CSS pseudo‑elements, CSS transforms, and the jquery‑snowfall plugin, with complete source code and customization tips.
This curated list highlights recent technical articles for front‑end engineers, covering Chromium's rendering pipeline, cross‑cloud mini‑program development, clean JavaScript practices, CSS font metrics, React diff optimization, Commander.js, Google Web Vitals, clean architecture, Remix, state‑management comparisons, and CDN disaster recovery solutions.
Modern CSS logical properties let developers write direction‑agnostic styles, replacing left/right and top/bottom values with start/end and block/inline equivalents, thereby simplifying RTL support, reducing duplicated code, and improving maintainability across browsers in modern web projects.
This article explains how the modern CSS :is pseudo‑class can replace repetitive selector lists, reduce duplicated code, improve maintainability, and handle selector priority and forgiving parsing, with examples in plain CSS and Sass, plus browser support details.
This newsletter curates a collection of technical articles covering WebAssembly's future, Deno's 2021 progress, JavaScript garbage collection fundamentals, front‑end debugging best practices, modern CSS color systems, FormData usage, and advanced JavaScript features like iterators and generators.
Discover how the open‑source Heti project lets you effortlessly apply traditional Chinese typography to web pages, offering grid‑aligned layouts, built‑in ancient poem styles, dark‑mode support, and simple CSS/JS integration for flawless text rendering.
A seasoned front‑end engineer shares ten VS Code extensions—ranging from HTML snippets and CSS class IntelliSense to Live Server and bracket colorizers—that dramatically streamline coding, improve productivity, and simplify common web development tasks for developers of all levels.
This article explains how the internally developed AUX visual development tool extracts original CSS source metadata from the browser using native APIs, stylesheet inspection, and the Chrome DevTools Protocol, and how it processes that data to provide accurate, editable CSS code within a low‑invasion, code‑centric workflow.
This article explains the browser's rendering pipeline—from render trees and layers to compositing and rasterization—and provides practical techniques such as passive event listeners, requestAnimationFrame, CSS containment, and will-change to dramatically improve animation smoothness and reduce layout and paint costs.
This article reviews the most anticipated CSS advancements for 2022, covering container queries, the new parent selector, @layer and @scope rules, fresh viewport and container units, advanced color functions, next‑gen transforms, scroll‑linked animations, Houdini @property and native masonry layouts, while providing practical code examples and browser support notes.
Learn practical defensive CSS techniques to prevent unexpected layout issues by setting minimum dimensions for flexbox and grid items, using properties like min-width, min-height, minmax(), auto-fit, auto-fill, and sticky positioning, plus essential image handling tips.
This article presents practical defensive CSS techniques—including handling justify-content space-between, image text fallbacks, fixed grid values, overflow control, and scrollbar gutter—to create robust, responsive layouts that gracefully adapt to dynamic content changes.
This article explains the CSS display:table-cell property, its behavior similar to HTML table cells, how it enables vertical centering, its interaction with margin, padding, float and absolute positioning, and demonstrates multiple practical layouts—including centered text, multi‑column designs, equal‑height sections, and responsive two‑column structures, with code examples.
Chrome 97 introduces new privacy controls, allowing users to delete all site data, enhances web app UI to resemble native apps, adds a flag for remembering per‑site zoom on mobile, and brings CSS HDR detection for better visual experiences.
The article reviews the latest CSS Annual Report, highlighting popular layout techniques such as Flex, Grid and Subgrid, new graphic capabilities like shape‑outside and blend modes, interactive properties including scroll‑snap and container queries, as well as typography advances, preprocessors, frameworks, CSS‑in‑JS trends and award‑winning features, all illustrated with real code examples.
This article presents practical defensive CSS techniques—including using overscroll-behavior to stop scroll chaining, var() fallbacks for custom properties, min‑width/min‑height instead of fixed dimensions, proper background-repeat handling, and vertical media queries—to create more robust, responsive web layouts.
This article presents a curated collection of 2022 New Year web animation effects—including countdown timers, fireworks, CSS text animations, and dynamic greetings—each with a brief description, preview image, and direct download link for the JavaScript or CSS code.
This article explains defensive CSS techniques—including flex‑wrap for flexible rows, strategic whitespace margins, text‑overflow handling, and object‑fit for images—to create robust, responsive layouts that gracefully handle dynamic content and prevent unexpected visual glitches.
This article explores the flexbox align-content property, explaining its effect on multi‑line flex containers, the required layout direction, and how to achieve expected results with practical code examples and visual demos for both row and column orientations.
This article explains how to turn an entire website black‑and‑white by adding a simple CSS snippet that applies grayscale filters, provides the exact code, and offers guidance on where to insert it in the HTML head for immediate effect.
This tutorial walks through a custom CSS reset, explaining each of the eleven concise rules—including box‑sizing, margin removal, height handling, line‑height, font smoothing, media defaults, form inheritance, overflow handling, and root isolation—while providing clear code examples and visual illustrations to improve both developer experience and user accessibility.
Learn four practical CSS approaches—Grid, Flexbox, margin:auto, and absolute positioning with transform—to reliably center a DIV element both horizontally and vertically, complete with code examples and visual results for quick implementation.
This tutorial series teaches how to build a complete responsive corporate website from the ground up using CSS Grid, covering navigation, carousel, about us, case studies, service flow, team, data, news, and footer sections with smooth transitions and animations.
This article demonstrates how to create a breakfast noodle dish using CSS, covering techniques like :before/:after pseudo-elements, box-shadow, and gradients to build a visually appealing and realistic food illustration.
This article explains how to use CSS properties such as clip-path and outline to draw irregular shapes, including polygons, double borders, and dotted outlines, providing code examples, visual demonstrations, and tips for replacing borders with outlines in frontend development.
This article explains how to embed any SVG icon in pure CSS using UnoCSS presets, DataURI encoding, scalable em‑based sizing, context‑aware coloring via CSS masks, and provides practical code examples for both monochrome and multicolor icons.
This article traces the history of web design from early fixed‑size screens and table‑based layouts, through the rise of responsive design with media queries, to emerging concepts like user‑preference media queries and container queries that promise a more component‑driven, personalized future.
This tutorial demonstrates how to build a playful orange‑cat mood‑changing animation using Vite and SCSS, relying solely on HTML and CSS (including variables, pseudo‑elements, transitions, and keyframe animations) without any JavaScript, and explains each step from project setup to final interactive effect.
The article offers a hands‑on guide, drawn from the Shopee WMS rebuild, that improves web user‑experience by optimizing interaction design—applying “Don’t Make Me Think,” appropriate cursor cues, expanded click zones, selective text‑selection, semantic navigation links, and system‑font stacks—and by enforcing accessibility standards such as WCAG contrast ratios, focus‑visible styling, and WAI‑ARIA roles and attributes.
This tutorial explains how to use HTML, CSS pseudo‑elements, filters, and animations to generate dynamic, colorful shadows behind images, replicating smart‑shadow effects without JavaScript, and provides reusable code snippets for various use cases.
This article offers a comprehensive overview of W3C specifications—including HTML, CSS, and accessibility guidelines—explaining their purpose, lifecycle, key working groups, practical usage tips, and how developers can actively contribute to the standards development process.
This article explains how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.
This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.
This article explores how to write maintainable, readable, and scalable CSS by adopting consistent team guidelines, covering major architectures like OOCSS, BEM, SMACSS, ITCSS, and ACSS, as well as commenting, spacing, and core design principles for high‑quality front‑end code.
The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.
This article explains how CSS3 transforms and related properties promote elements to composite layers, detailing the browser rendering pipeline, the role of the GPU, practical demos, performance observations, and techniques for inspecting and optimizing animation performance in modern front‑end development.
This article demonstrates how to create a pure‑CSS animation of the Sun, Earth and Moon orbital motion using simple HTML divs, Flexbox/Grid layout, gradient colors, and CSS keyframe animations, with full source code and styling details provided.
This article introduces Alibaba’s Cube technology, tracing its evolution from early hybrid native‑web approaches to a custom rendering engine that powers dynamic cards and mini‑programs on mobile and IoT devices, and outlines its architecture, tooling, quality system, and future roadmap.
This article explains why setting font‑weight 500 on PingFangSC‑Regular produces the same visual result as 400, why some Android devices only bold numeric/English characters, and provides practical fallback strategies and code examples for reliable mobile font rendering.
The Modern.js developer survey of 612 respondents reveals that ES6+ and TypeScript dominate JavaScript usage, while React and Vue lead UI frameworks, CSS preprocessors like Less and SCSS remain popular, and tools such as Webpack, Vite, and VSCode are widely adopted across frontend and backend development workflows.
The 2021 ByteDance Modern Web Development survey of 612 developers reveals dominant use of ES6+, TypeScript, Vue and React, widespread adoption of CSS preprocessors, varied backend preferences, and preferred tooling such as Webpack, VSCode, and Prettier, highlighting current trends and gaps in the Chinese front‑end ecosystem.
This article explores why CSS often becomes messy, introduces aesthetic considerations, outlines three core writing principles—less is more, self‑explanatory, reusable—and provides concrete techniques such as naming conventions, formatting, commenting, modularization, and tooling to keep styles clean, readable, and maintainable across teams.
This article explains the concept of danmaku (bullet comments), why they improve user experience, and provides a detailed guide on implementing a danmaku system using HTML + CSS or Canvas, including stage design, track management, collision handling, and reusable code examples.
The author explains how to replace Typora's default, unattractive Markdown styling with a personalized, visually appealing theme by editing CSS variables and selectors, providing a complete stylesheet and a preview image, enabling users to improve readability and aesthetics of their technical documents.
This article explains the CSS content property, how it works with ::before and ::after pseudo‑elements to insert generated content, the concept of replaceable elements, size calculation rules, and practical use cases such as inserting characters, creating shapes, image generation, attribute values, icon fonts and counters.
This article explains how the CSS :is() pseudo‑class can replace long selector lists, compares it with :where(), shows compatibility across browsers, and provides multiple code examples demonstrating concise, readable selector patterns for styling elements like headings and buttons.
Kraken 0.8.0 introduces Flutter 2.2.2 compatibility with Dart Null Safety, boosts first‑paint performance by 10% through Bridge optimizations, enhances Flexbox layout speed, adds new HTML tags and CSS units, fixes numerous bugs, and outlines upcoming features like QuickJS and SSR support.
This tutorial walks through creating a fully functional PHP calendar class that generates an HTML table, handles navigation between months and years, and integrates customizable CSS styling, providing complete source code and step‑by‑step explanations for developers.
This article explains how to create frosted‑glass (backdrop‑filter) effects with CSS, compares backdrop‑filter and filter, and provides Firefox‑compatible techniques—including background‑attachment with blur, -moz-element() with filter, and JavaScript positioning—to achieve similar visual results across browsers.
This article reviews Google’s CSS fundamentals course, dives into React 18’s automatic batching, the new Suspense SSR architecture, the startTransition API, suggests a lightweight VS Code API client, and explains the basics of building user profiles for recommendation systems.
This article provides a comprehensive overview of modern CSS capabilities—including new pseudo‑class selectors like :is(), :where(), :not(), :has(), focus variants, advanced background positioning, masking, clipping, the expanded color module, and clever uses of custom properties—offering practical examples and demos for front‑end developers.
This step‑by‑step tutorial shows how to create a dark‑mode toggle for a web page using HTML structure, CSS styling (including dark‑mode rules), and a small JavaScript script that adds or removes the dark class on user interaction.
This article reviews the newest CSS capabilities—including modern pseudo‑classes like :is(), :where(), :not(), :has(), focus selectors, advanced color functions, background positioning tricks, masking, clipping, blend modes, and custom property hacks—showing practical examples and code snippets for front‑end developers.
