BestHub
Sign in
Tagged articles

css

474 articles · Page 2 of 5
Sohu Tech Products
Sohu Tech Products
Dec 11, 2024 · Frontend Development

Simulating Realistic Loading Progress Bars with CSS Animations

The article shows how to create a realistic loading progress bar using only CSS—by styling a container and its ::before pseudo‑element, applying keyframe width animations with ease, cubic‑bezier or the newer linear() timing functions, and toggling between long and short animations via CSS variables for a smooth instant‑complete effect without JavaScript animation code.

Web Developmentanimationcss
0 likes · 8 min read
Simulating Realistic Loading Progress Bars with CSS Animations
IT Services Circle
IT Services Circle
Dec 11, 2024 · Frontend Development

2024 CSS New Features You Should Not Miss

This article surveys the most notable CSS additions in 2024—including custom scrollbars, cross‑document view transitions, scroll‑driven animations, new component utilities, dark‑mode helpers, @property, Popover API, @starting‑style and text‑stroke—providing code examples and usage guidance for modern web developers.

2024Browser FeaturesStyling
0 likes · 10 min read
2024 CSS New Features You Should Not Miss
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 8, 2024 · Frontend Development

A Comprehensive Guide to New CSS Features: @scope, @container, Pseudo‑Classes, Nesting, nth‑of, text‑wrap, and Native Popover

This article introduces and demonstrates several emerging CSS capabilities—including native style isolation with @scope, container queries via @container, advanced pseudo‑classes like :has, :where, :is, CSS nesting, the nth‑child of selector, text‑wrap balance/pretty, and the native popover element—providing code examples and usage tips for modern frontend development.

NestingPopoverWeb Development
0 likes · 12 min read
A Comprehensive Guide to New CSS Features: @scope, @container, Pseudo‑Classes, Nesting, nth‑of, text‑wrap, and Native Popover
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 7, 2024 · Frontend Development

Comprehensive TailwindCSS Styling Guide: Width, Height, Layout, Spacing, Borders, Typography and More

This article provides a thorough, step‑by‑step tutorial on TailwindCSS styling utilities—including preset width/height, custom values, viewport units, max/min dimensions, size shortcuts, margin/padding/space, border and divide utilities, outline, font sizing, weight, tracking, line‑height, text alignment, colors, overflow handling, wrapping and whitespace control—complete with code examples and visual demos.

Stylingcssresponsive design
0 likes · 12 min read
Comprehensive TailwindCSS Styling Guide: Width, Height, Layout, Spacing, Borders, Typography and More
JD Tech
JD Tech
Dec 5, 2024 · Frontend Development

Running W3C Standard CSS on HarmonyOS with Taro: Bridging CSS and ArkUI

This article explains how Taro converts standard W3C CSS into HarmonyOS ArkUI styles, addressing unit and layout differences, using a Rust‑based LightningCSS plugin and the Yoga layout engine, and detailing the full style initialization, matching, application, and update workflow for cross‑platform React development.

ArkUICross-PlatformHarmonyOS
0 likes · 13 min read
Running W3C Standard CSS on HarmonyOS with Taro: Bridging CSS and ArkUI
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Dec 3, 2024 · Frontend Development

How to Simulate a Realistic Progress Bar Using Only CSS

This article shows step‑by‑step how to create a more authentic‑looking loading bar with pure CSS by using a container element, a ::before pseudo‑element, keyframe animations, easing functions like cubic‑bezier and the new linear() function, and finally how to finish the bar instantly with CSS variables and a tiny JavaScript trigger.

Linearanimationcss
0 likes · 8 min read
How to Simulate a Realistic Progress Bar Using Only CSS
JavaScript
JavaScript
Dec 3, 2024 · Frontend Development

What’s New in the Latest CSS Tool Release? Key Features Explained

The latest update introduces resolve.conditions default values, enhanced JSON serialization, expanded HTML resource reference support, postcss‑load‑config integration, Sass’s modern API default, customizable CSS output filenames in library mode, and several other minor tweaks affecting a small user base.

FrontendSasscss
0 likes · 1 min read
What’s New in the Latest CSS Tool Release? Key Features Explained
IT Services Circle
IT Services Circle
Nov 3, 2024 · Frontend Development

New Chrome DevTools Elements Panel Badges: scroll, overflow, and More

Chrome 130’s DevTools Elements panel introduces a new scroll badge to highlight scrollable elements, along with upcoming overflow badges, and details how various built‑in badges like grid, flex, ad, scroll‑snap, container, slot, top‑layer, media, and subgrid help developers diagnose layout and rendering issues.

BadgesChromeDevTools
0 likes · 6 min read
New Chrome DevTools Elements Panel Badges: scroll, overflow, and More
JD Tech Talk
JD Tech Talk
Nov 1, 2024 · Frontend Development

Bridging CSS Differences: How Taro Adapts Styles for HarmonyOS ArkUI

This article explains how Taro resolves the incompatibilities between standard CSS and HarmonyOS ArkUI CAPI styles by converting CSS at compile time, using a Rust‑based LightningCSS plugin, and employing the Yoga layout engine to achieve high‑performance, cross‑platform UI rendering.

ArkUIHarmonyOSLayout Engine
0 likes · 12 min read
Bridging CSS Differences: How Taro Adapts Styles for HarmonyOS ArkUI
JD Cloud Developers
JD Cloud Developers
Nov 1, 2024 · Frontend Development

How Taro Transforms CSS for HarmonyOS: Bridging React and ArkUI

This article explains how Taro adapts standard CSS to HarmonyOS's ArkUI by converting units, handling layout differences with the Yoga engine, and implementing an efficient runtime style system that maintains cross‑platform compatibility and high performance for React‑based applications.

ArkUIHarmonyOSTaRO
0 likes · 12 min read
How Taro Transforms CSS for HarmonyOS: Bridging React and ArkUI
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 29, 2024 · Frontend Development

Elegant Centering and Advanced Layout Techniques with margin:auto in Flexbox

This article explores how to achieve horizontal and vertical centering in CSS Flexbox using justify-content, align-items, and the more concise margin:auto approach, presenting multiple practical examples, code snippets, and advanced layout scenarios such as partial clustering, equal-width distribution, and dynamic spacing calculations.

Frontendcssmargin auto
0 likes · 17 min read
Elegant Centering and Advanced Layout Techniques with margin:auto in Flexbox
KooFE Frontend Team
KooFE Frontend Team
Oct 1, 2024 · Frontend Development

Boost Emoji Picker Performance with CSS content-visibility

The article explains how using the new CSS content-visibility property can dramatically reduce layout and paint costs when rendering tens of thousands of custom emojis, offering a lightweight alternative to full virtualization while preserving accessibility and searchability.

Content-Visibilitycssemoji-picker
0 likes · 7 min read
Boost Emoji Picker Performance with CSS content-visibility
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 1, 2024 · Frontend Development

Implementing Frosted Glass, Acrylic, Neumorphism, and Glassmorphism UI Effects with CSS

This article explains the evolution and practical CSS techniques for creating Frosted Glass, Acrylic Material, Neumorphism, and Glassmorphism UI effects, providing design background, accessibility considerations, and complete code examples for implementing these styles in modern web projects.

Frosted GlassGlassmorphismUI design
0 likes · 17 min read
Implementing Frosted Glass, Acrylic, Neumorphism, and Glassmorphism UI Effects with CSS
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 6, 2024 · Frontend Development

Comprehensive Guide to CSS Grid Layout: Concepts, Syntax, and Practical Examples

This article provides an in‑depth tutorial on CSS Grid layout, covering its advantages over Flexbox, compatibility, container setup, row and column definitions, sizing units, gaps, element positioning, naming conventions, area declarations, auto‑flow behavior, alignment properties, and automatic placement with numerous code examples.

CSS GridHTMLcss
0 likes · 25 min read
Comprehensive Guide to CSS Grid Layout: Concepts, Syntax, and Practical Examples
21CTO
21CTO
Sep 5, 2024 · Frontend Development

Mastering CSS rem Units: Responsive Font Sizing Made Simple

This article explains the CSS rem unit, demonstrates how it relates to the root element's font size, and shows practical examples using vw and clamp() to create fluid, responsive typography across different screen sizes.

cssfont sizerem
0 likes · 5 min read
Mastering CSS rem Units: Responsive Font Sizing Made Simple
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 4, 2024 · Frontend Development

Image Fragmentation Effect with HTML, CSS, and JavaScript

This article explains how to create a picture‑fragment animation by dividing an image into a grid of small blocks, using CSS background‑size and background‑position together with JavaScript to generate the blocks, apply delays, rotations, scaling, and performance‑optimising techniques.

HTMLJavaScriptanimation
0 likes · 10 min read
Image Fragmentation Effect with HTML, CSS, and JavaScript
Python Programming Learning Circle
Python Programming Learning Circle
Aug 5, 2024 · Frontend Development

Creating a Snowfall Effect with JavaScript and CSS

This tutorial demonstrates how to build a realistic snowfall animation on a web page by using CSS radial gradients for snowflakes and a JavaScript class that generates, styles, and animates thousands of snow particles with requestAnimationFrame, including advanced enhancements like speed variation, swing motion, 3D perspective, and rain integration.

FrontendJavaScriptSnowfall
0 likes · 11 min read
Creating a Snowfall Effect with JavaScript and CSS
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Aug 4, 2024 · Frontend Development

Create 3 Stunning Sweep Light Effects Using Pure CSS

This article explains the simple principle behind CSS sweep‑light animations and provides step‑by‑step code for three common scenarios—text, card containers, and irregular images—using linear gradients, background‑position animation, pseudo‑elements, and CSS masks.

CSS maskbackground-positioncss
0 likes · 8 min read
Create 3 Stunning Sweep Light Effects Using Pure CSS
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 3, 2024 · Frontend Development

Common Front‑End Issues on iOS, Android, and Web: Border‑Radius, Text Overflow, Button Focus, Coupon Hole Effect, Clipboard Compatibility, UnoCSS, and CORS Options Requests

This article explains several practical front‑end problems—including iOS border‑radius loss with transforms, text‑overflow truncation on iOS, Android button focus outlines, CSS coupon hole effects, clipboard API compatibility, UnoCSS style loss after bundling, and CORS OPTIONS request failures on low‑end devices—along with clear code‑based solutions.

CORSborder-radiusclipboard
0 likes · 6 min read
Common Front‑End Issues on iOS, Android, and Web: Border‑Radius, Text Overflow, Button Focus, Coupon Hole Effect, Clipboard Compatibility, UnoCSS, and CORS Options Requests
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 25, 2024 · Frontend Development

Why a 0.5px Border Renders as 1px and How to Fix It

This article explains why CSS borders set to 0.5px often appear as 1px on various devices, discusses browser rendering and device pixel ratio issues, and provides five practical solutions—including pseudo‑elements, shadows, SVG, and container tricks—to achieve sub‑pixel borders in H5 layouts.

bordercsssub-pixel
0 likes · 6 min read
Why a 0.5px Border Renders as 1px and How to Fix It
Python Programming Learning Circle
Python Programming Learning Circle
Jul 11, 2024 · Frontend Development

Creating a Snowfall Effect with HTML, CSS, and JavaScript

This tutorial walks through building a realistic snowfall animation on a web page using HTML span elements, CSS radial gradients, and JavaScript classes to generate, style, animate, and recycle thousands of snowflakes with optional swing, speed variations, 3‑D perspective, and performance‑optimized transforms.

HTMLJavaScriptcss
0 likes · 12 min read
Creating a Snowfall Effect with HTML, CSS, and JavaScript
Sohu Tech Products
Sohu Tech Products
Jul 10, 2024 · Frontend Development

Implementing an Infinite 3D Carousel Animation with Pure CSS

The article shows how to build a smooth, infinite 3D carousel using only CSS by sharing a common motion path, staggering items with negative animation delays, defining keyframes (including optional pauses), and optionally leveraging @property and @container style for smoother or declarative control, while noting browser compatibility and hover‑pause tips.

3D carouselFrontendcss
0 likes · 12 min read
Implementing an Infinite 3D Carousel Animation with Pure CSS
Sohu Tech Products
Sohu Tech Products
Jul 10, 2024 · Frontend Development

Advanced CSS Techniques: Fluid Design, Mathematical Functions, and Modern Features

The article showcases advanced CSS capabilities—including fluid layouts with clamp, min, max and grid functions, new step functions like round, rem, and mod, versatile media queries, accent‑color and color‑scheme theming, custom counters, and variable‑driven animations—empowering developers to build responsive, modern, and performant web designs.

CSS AnimationsCSS Functionscss
0 likes · 14 min read
Advanced CSS Techniques: Fluid Design, Mathematical Functions, and Modern Features
21CTO
21CTO
Jul 7, 2024 · Frontend Development

10 Simple CSS Tweaks to Instantly Boost Readability and Layout

This article presents ten practical CSS snippets—ranging from content width limits and larger text to balanced headings and reduced motion—each explained with code examples and screenshots to help developers create cleaner, more accessible web pages.

Responsiveaccessibilitycss
0 likes · 8 min read
10 Simple CSS Tweaks to Instantly Boost Readability and Layout
Code Mala Tang
Code Mala Tang
Jul 3, 2024 · Frontend Development

Master CSS Variables: Boost Flexibility, Reusability, and Theming

This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.

FrontendThemingVariables
0 likes · 12 min read
Master CSS Variables: Boost Flexibility, Reusability, and Theming
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 29, 2024 · Frontend Development

How to Build a Mouse‑Tracking Parallax Banner Animation with HTML, CSS, and JavaScript

This tutorial explains how to recreate Bilibili's mouse‑responsive top‑banner animation by collecting assets, constructing a layered HTML structure, applying CSS positioning, and writing vanilla JavaScript to track mouse movement, calculate element offsets, and animate the layers with smooth transitions.

HTMLJavaScriptcss
0 likes · 15 min read
How to Build a Mouse‑Tracking Parallax Banner Animation with HTML, CSS, and JavaScript
Sohu Tech Products
Sohu Tech Products
Jun 20, 2024 · Frontend Development

Implementing Dynamic Columns in an Element UI Table with Vue

This guide shows how to create an Element UI table in Vue whose columns are generated from a configurable array, using colgroup/col for layout, v‑for loops for headers and rows, sticky left/right columns, edit‑mode inputs, and dynamic scroll‑shadow effects for a flexible, high‑performance table component.

Dynamic TableElement UIVue
0 likes · 14 min read
Implementing Dynamic Columns in an Element UI Table with Vue
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 27, 2024 · Frontend Development

Why Mastering CSS Selectors, Pseudo‑Classes, and Pseudo‑Elements Is Essential for Frontend Developers

This article highlights the critical role of mastering CSS fundamentals—especially selectors, pseudo‑classes, pseudo‑elements, attribute and combinator selectors—by examining common coding mistakes, offering alternative pure‑CSS solutions, and emphasizing understanding over memorization for robust frontend development.

Best PracticesSelectorscss
0 likes · 14 min read
Why Mastering CSS Selectors, Pseudo‑Classes, and Pseudo‑Elements Is Essential for Frontend Developers
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 3, 2024 · Frontend Development

Implementing an H5 Lottery Turntable with CSS and JavaScript

This tutorial explains how to create a lottery wheel in HTML5 by designing the turntable layout using CSS transforms, controlling rotation with JavaScript, managing click locks, applying easing for a smooth slowdown, and adjusting prize probabilities through weighted random selection, complete with full source code examples.

HTML5LotteryTurntable
0 likes · 11 min read
Implementing an H5 Lottery Turntable with CSS and JavaScript
Sohu Tech Products
Sohu Tech Products
Apr 24, 2024 · Frontend Development

CSS :has Pseudo-class for Modal Scroll Locking

This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.

:has() selectorFrontendJavaScript
0 likes · 4 min read
CSS :has Pseudo-class for Modal Scroll Locking
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 12, 2024 · Frontend Development

How Much Faster Is unocss Compared to Tailwind CSS?

This article examines the performance differences between the atomic CSS engines unocss and Tailwind CSS, presenting benchmark tests on a MacBook M1 using Vite and PostCSS setups, analyzing build times, the impact of CSS AST parsing, and discussing practical implications for frontend development.

FrontendPerformanceTailwindCSS
0 likes · 7 min read
How Much Faster Is unocss Compared to Tailwind CSS?
Liangxu Linux
Liangxu Linux
Mar 9, 2024 · Fundamentals

Why STM32’s PLL Keeps Running After HSE Failure and How to Fix It

A customer reported that on an STM32F103VDT6, disconnecting the external 8 MHz crystal did not trigger the external watchdog reset because the MCU’s PLL continued to generate a low‑frequency clock, but enabling the Clock Security System (CSS) and handling the NMI correctly resolves the issue.

EmbeddedHSEPLL
0 likes · 6 min read
Why STM32’s PLL Keeps Running After HSE Failure and How to Fix It
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 8, 2024 · Frontend Development

RTL Layout Adaptation Practices for Web Front-End Development

The guide outlines a direction‑based RTL adaptation workflow for web front‑ends—detecting language, setting the HTML dir attribute, using a lightweight helper, configuring postcss‑rtlcss (combined mode) to generate mirrored CSS, handling SSR and third‑party components, and providing a dev switch tool for seamless LTR/RTL support.

InternationalizationRTLWeb Development
0 likes · 18 min read
RTL Layout Adaptation Practices for Web Front-End Development
DaTaobao Tech
DaTaobao Tech
Mar 8, 2024 · Frontend Development

CSS Grid Layout for E‑commerce Product Cards

The article shows how using CSS Grid instead of nested Flex containers can halve the HTML and CSS needed for e‑commerce product cards by defining rows and columns, simplifying markup to a few elements while preserving layout for images, titles, prices, badges, and actions.

CSS GridHTMLLayout
0 likes · 9 min read
CSS Grid Layout for E‑commerce Product Cards
DaTaobao Tech
DaTaobao Tech
Feb 26, 2024 · Frontend Development

Implementing Tab Border Effects with SVG

To create a tab interface with connected borders, recessed rounded corners, and smooth scrolling transitions, the article explains abandoning CSS due to background‑cover problems and instead using SVG paths that map the four corner vertices, employ arc commands for inner curves, dynamically update coordinates during scroll, and discusses the resulting performance and scalability trade‑offs.

Border DesignSVGTab Interface
0 likes · 17 min read
Implementing Tab Border Effects with SVG
Sohu Tech Products
Sohu Tech Products
Feb 21, 2024 · Frontend Development

Comprehensive Guide to CSS Functions: 66 Common Functions Explained

This comprehensive guide explains 66 essential CSS functions—from basic attr() and var() to advanced color, filter, gradient, math, graphic, transform, layout, and animation timing functions—detailing their syntax, practical usage, and code examples so developers can create dynamic, responsive, and interactive web designs.

Front‑EndFunctionsStyling
0 likes · 48 min read
Comprehensive Guide to CSS Functions: 66 Common Functions Explained
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 6, 2024 · Frontend Development

Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns

This article provides a detailed tutorial on implementing various modern web layout techniques—including horizontal‑vertical centering, equal‑height columns, sticky footers, equal‑distribution columns, the Holy Grail layout, 12‑column grids, justified spacing, and responsive sizing with clamp()—using CSS Flexbox and Grid with practical code examples.

FlexboxGridWeb Layout
0 likes · 29 min read
Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns
21CTO
21CTO
Feb 1, 2024 · Frontend Development

Top CSS Frameworks to Boost Your UI Development in 2024

Discover the best CSS frameworks for 2024—including Bootstrap, Tailwind, Foundation, Bulma, and UIkit—detailing their key features, integration methods, and code examples, to help developers choose the right toolkit for rapid, responsive, and maintainable front‑end design.

BootstrapFrontendReAct
0 likes · 12 min read
Top CSS Frameworks to Boost Your UI Development in 2024
ByteFE
ByteFE
Jan 29, 2024 · Frontend Development

Master CSS Cascading, Inheritance, and Specificity to Write Cleaner Styles

This article explains the three core CSS concepts—cascading, inheritance, and specificity—detailing how browsers resolve conflicting rules, the role of importance and source, selector weight calculations, the impact of rule order, and the use of keywords like !important, initial, inherit, revert, unset, and @layer to control styling.

CascadingSpecificityWeb Development
0 likes · 29 min read
Master CSS Cascading, Inheritance, and Specificity to Write Cleaner Styles
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 28, 2024 · Frontend Development

Understanding CSS Cascade, Inheritance, and Specificity

This article explains the core concepts of CSS—cascade, inheritance, and specificity—detailing how browsers resolve conflicting style rules, the role of source order, importance, selector weight, and newer features like @layer, while providing practical code examples and visual illustrations.

CASCADESpecificitycss
0 likes · 27 min read
Understanding CSS Cascade, Inheritance, and Specificity
IT Services Circle
IT Services Circle
Jan 7, 2024 · Frontend Development

Using CSS Relative Color Syntax for Dynamic Color Manipulation

This article introduces CSS Relative Color syntax, explains its core transformation functions, demonstrates practical examples such as generating green text from red, creating unified button hover/active colors, and adapting text color to any background using the new color‑contrast() function.

FrontendRelative Colorcolor functions
0 likes · 12 min read
Using CSS Relative Color Syntax for Dynamic Color Manipulation
JD Cloud Developers
JD Cloud Developers
Dec 21, 2023 · Frontend Development

How to Fix the Mobile 100vh Bug and Achieve True Full‑Screen Layouts

This article explains why the 100vh unit behaves incorrectly on mobile browsers, demonstrates several work‑arounds—including a CSS‑custom‑property script, -webkit-fill-available, postcss‑100vh‑fix—and shows the modern dvh unit that reliably creates full‑screen sections across all devices.

100vhcssmobile
0 likes · 6 min read
How to Fix the Mobile 100vh Bug and Achieve True Full‑Screen Layouts
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 9, 2023 · Frontend Development

Create a Rolex GMT‑MASTER Style Watch Using HTML Canvas

This tutorial walks a front‑end developer through building a fully functional Rolex‑inspired GMT‑MASTER watch with HTML, CSS and JavaScript by dividing the watch into dial, bezel and hand modules, initializing three canvas elements, defining color variables, and implementing drawing functions for the bezel, dial, hour, GMT, minute and second hands.

Canvas DrawingHTML CanvasJavaScript
0 likes · 21 min read
Create a Rolex GMT‑MASTER Style Watch Using HTML Canvas
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 28, 2023 · Frontend Development

How to Create a Left‑Looping Scrolling Text Using HTML, CSS, and JavaScript

This article explains four different techniques—including pure JavaScript frame updates, setInterval with CSS transitions, CSS keyframe animation, and a text‑shadow trick—to achieve a continuously left‑scrolling text effect, compares their performance and complexity, and provides complete code samples for each method.

HTMLJavaScriptcss
0 likes · 6 min read
How to Create a Left‑Looping Scrolling Text Using HTML, CSS, and JavaScript
IT Services Circle
IT Services Circle
Nov 16, 2023 · Frontend Development

Upcoming CSS Features: text-wrap, @scope, form-sizing, view-transition, light-dark(), and Nesting

This article introduces several upcoming CSS specifications—including text-wrap with balance and pretty values, the @scope rule for scoped styling, form-sizing for auto‑resizing textareas, view‑transition for seamless page transitions, the light‑dark() function for theme‑aware colors, and native CSS nesting—explaining their purpose, usage, and browser support.

New FeaturesScopecss
0 likes · 6 min read
Upcoming CSS Features: text-wrap, @scope, form-sizing, view-transition, light-dark(), and Nesting
php Courses
php Courses
Oct 19, 2023 · Frontend Development

Popular Open-Source CSS Frameworks on GitHub

This article introduces several popular open-source CSS frameworks on GitHub, such as Bootstrap, Foundation, Bulma, Tailwind, UIkit, Milligram, Pure.css, and Tachyons, describing their features, usage, and repository statistics to help developers choose the right tool for efficient web design.

BootstrapFrontendGitHub
0 likes · 6 min read
Popular Open-Source CSS Frameworks on GitHub
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 15, 2023 · Frontend Development

Responsive Waterfall Flow Layout Implementation in React

This article explains how to build a responsive waterfall (masonry) layout in React, covering the underlying principle of absolute positioning, dynamic column calculation, item placement based on column heights, lazy image loading, and provides the complete TypeScript component and CSS code.

JavaScriptcssresponsive design
0 likes · 13 min read
Responsive Waterfall Flow Layout Implementation in React
IT Services Circle
IT Services Circle
Oct 11, 2023 · Frontend Development

Common CSS Design Mistakes and Their Implications

This article reviews several noteworthy CSS design mistakes—such as the misuse of !important, confusing z-index behavior, margin collapse, ambiguous color functions, and naming of border‑radius—explaining why they are problematic and suggesting clearer alternatives for better front‑end development.

Layoutcssdesign mistakes
0 likes · 6 min read
Common CSS Design Mistakes and Their Implications
HomeTech
HomeTech
Oct 11, 2023 · Frontend Development

Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.

FrontendIntersectionObserverJavaScript
0 likes · 10 min read
Implementing a Sticky Tabs Component with Custom Scroll Behavior in React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 28, 2023 · Frontend Development

Creating a Beautiful Mid‑Autumn Festival Card with Pure CSS

This article walks through a step‑by‑step pure‑CSS implementation of a Mid‑Autumn Festival greeting card, covering animated cloud backgrounds, a glowing cut‑out moon with text, flashing lanterns, moving clouds, and a running rabbit, while explaining the underlying CSS techniques and challenges.

Blend ModePure CSSanimation
0 likes · 13 min read
Creating a Beautiful Mid‑Autumn Festival Card with Pure CSS
JD Tech
JD Tech
Sep 27, 2023 · Frontend Development

Core Front-End Technologies of JD Competition Ranking H5 Page

This article examines the core front‑end technologies employed in JD’s Competition Ranking H5 page, covering animation implementations, style configuration, skin switching, poster generation, debugging tools, request handling, and deployment scripts, providing practical insights and code examples for front‑end developers.

FrontendH5Vue
0 likes · 22 min read
Core Front-End Technologies of JD Competition Ranking H5 Page
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 27, 2023 · Frontend Development

Implementing Genshin Impact Character Switch Effect with Vue: Horizontal Scrolling, Background Animation, and Mobile Touch Handling

This article walks through recreating the Genshin Impact character switch UI using Vue, detailing the horizontal avatar carousel, background image scaling animations, and touch‑based swipe handling for mobile, complete with code snippets and edge‑case logic.

JavaScriptVueanimation
0 likes · 12 min read
Implementing Genshin Impact Character Switch Effect with Vue: Horizontal Scrolling, Background Animation, and Mobile Touch Handling
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 26, 2023 · Frontend Development

Responsive Full‑Page Scroll Implementation with Vue 3

This article explains how to create a responsive full‑screen scrolling effect using Vue 3, detailing the concept, requirements, underlying principles, and providing complete HTML, JavaScript, and CSS code to handle mouse wheel, touch events, dynamic height calculation, and indicator navigation.

FullPageScrollHTMLJavaScript
0 likes · 12 min read
Responsive Full‑Page Scroll Implementation with Vue 3
php Courses
php Courses
Aug 18, 2023 · Backend Development

How to Build a Simple Video Player with PHP and MySQL

This article explains how to create a functional video player for a website using PHP and MySQL, covering database design, PHP script to fetch video data, HTML structure for playback, and CSS styling to enhance the player’s appearance.

cssvideo playerweb-development
0 likes · 4 min read
How to Build a Simple Video Player with PHP and MySQL
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 10, 2023 · Frontend Development

Understanding CSS3 steps() Animation: Theory, Syntax, and Practical Examples

This article explains the CSS3 steps() timing function, contrasting it with linear animation, detailing its syntax, parameters, start/end behavior, and provides multiple practical demos—including frame-by-frame animations, typewriter effects, and countdown timers—while analyzing how steps divide animation segments and affect timing.

Frontendcsssteps
0 likes · 11 min read
Understanding CSS3 steps() Animation: Theory, Syntax, and Practical Examples
DaTaobao Tech
DaTaobao Tech
Jul 14, 2023 · Frontend Development

Gradient Iconfont Implementation with CSS and React

This article explains how to create gradient iconfonts by using CSS background‑clip:text (with transparent text) and optionally mix‑blend-mode:darken, demonstrates a reusable React component that applies gradient backgrounds via style props, and shows graceful degradation with @supports queries for browsers lacking background‑clip support.

Front-endReActcss
0 likes · 8 min read
Gradient Iconfont Implementation with CSS and React
政采云技术
政采云技术
Jun 21, 2023 · Frontend Development

Analysis of Common Frontend Issues

This article examines typical frontend development pitfalls—including numeric type quirks, precision loss, function length, object ordering, asynchronous timer inaccuracies, race conditions, CSS positioning, stacking contexts, performance bottlenecks, and compatibility concerns—providing explanations, code examples, and practical mitigation strategies for developers.

FrontendJavaScriptPerformance
0 likes · 18 min read
Analysis of Common Frontend Issues
Huolala Tech
Huolala Tech
Jun 20, 2023 · Mobile Development

How to Prevent Webview Layout Breakage When Users Enable Large Font Mode

This article examines how enabling system-wide large‑font mode on Android and iOS can distort Webview layouts for driver‑focused apps, presents data on user font‑size usage, compares approaches from other apps, and offers practical CSS and code solutions to reliably disable or adapt to large fonts.

AndroidLarge Fontaccessibility
0 likes · 11 min read
How to Prevent Webview Layout Breakage When Users Enable Large Font Mode
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 19, 2023 · Frontend Development

Understanding CSS, UI, and Style Systems: Tailwind, Styled-Components, and Behavior Libraries

This article explores how modern frontend development separates UI into CSS extensions, behavior libraries, and style systems, compares Tailwind with Bootstrap, discusses the advantages of styled‑components and behavior‑only libraries like Radix‑UI, and offers guidance on building a custom component library with a personal style system.

Behavior LibrariesTailwindcss
0 likes · 11 min read
Understanding CSS, UI, and Style Systems: Tailwind, Styled-Components, and Behavior Libraries
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Jun 9, 2023 · Frontend Development

Master Frontend Skills: 3 Expert Tips, CSS Popover API, Node.js Debugging, and More

This article shares practical frontend insights, from cultivating a problem‑solving mindset and three expert coding tips to using the new CSS Popover API and effective Node.js debugging, plus experiences with ChatGPT pair programming, the launch of WebContainer 1.0, and essential login‑form UX best practices.

FrontendNode.jsUX design
0 likes · 3 min read
Master Frontend Skills: 3 Expert Tips, CSS Popover API, Node.js Debugging, and More
Ctrip Technology
Ctrip Technology
Jun 8, 2023 · Frontend Development

Optimizing CSS Animation Performance: Techniques and Best Practices

This article explains how to improve CSS animation performance by understanding the browser rendering pipeline, using GPU‑accelerated transforms, avoiding costly properties and complex selectors, leveraging will‑change and requestAnimationFrame, and preferring CSS over JavaScript for smoother, lower‑latency visual effects.

FrontendGPUOptimization
0 likes · 13 min read
Optimizing CSS Animation Performance: Techniques and Best Practices
vivo Internet Technology
vivo Internet Technology
May 24, 2023 · Frontend Development

Understanding CSS Cascade Layers (@layer): Concepts, Syntax, and Browser Support

CSS cascade layers, introduced via the @layer rule, let developers organize style origins into named, ordered groups—such as resets, libraries, and custom overrides—so they can control precedence without increasing specificity, improve readability, and avoid conflicts, with full support in modern browsers.

Cascade LayersFront-endWeb Development
0 likes · 18 min read
Understanding CSS Cascade Layers (@layer): Concepts, Syntax, and Browser Support
DeWu Technology
DeWu Technology
May 12, 2023 · Frontend Development

Key Takeaways from DeWu Frontend Tech Salon: SaaS Architecture, CSS Mastery, and Container Solutions

The DeWu Frontend Technology Salon in Hangzhou featured five expert talks covering SaaS frontend architecture evolution, one‑stop workbench upgrades, large‑scale CSS maintenance, container‑based e‑commerce workbench solutions, and stable ToG business strategies, followed by lively networking and group photos.

FrontendSaaSarchitecture
0 likes · 9 min read
Key Takeaways from DeWu Frontend Tech Salon: SaaS Architecture, CSS Mastery, and Container Solutions
ByteFE
ByteFE
Mar 15, 2023 · Frontend Development

2022 State of CSS and State of JS Survey: Key Findings, Trends, and Developer Pain Points

The 2022 State of CSS and State of JS surveys, which collected 14,310 CSS and 39,472 JavaScript responses, reveal demographic details, highlight rapidly adopted CSS features like flex gap, aspect‑ratio, and :has, showcase popular JavaScript language enhancements such as nullish coalescing and top‑level await, and expose developers' satisfaction, usage, and pain points across frameworks, tools, and browsers.

FrontendJavaScriptWeb Development
0 likes · 16 min read
2022 State of CSS and State of JS Survey: Key Findings, Trends, and Developer Pain Points
Sohu Tech Products
Sohu Tech Products
Feb 22, 2023 · Frontend Development

Using the CSS Custom Highlight API for Text Highlighting, Rainbow Text, Search Highlight, and Code Editors

This article introduces the browser‑native CSS Custom Highlight API, explains its pseudo‑element ::highlight, shows how to create ranges and Highlight objects with JavaScript, and demonstrates practical examples such as custom text styling, rainbow text, live search highlighting, performance comparisons, and a lightweight code‑highlight editor.

Custom Highlight APIJavaScriptWeb Development
0 likes · 16 min read
Using the CSS Custom Highlight API for Text Highlighting, Rainbow Text, Search Highlight, and Code Editors
ByteFE
ByteFE
Feb 22, 2023 · Frontend Development

Recreating the Flash Game “Manufactoria” with HTML, CSS, and JavaScript

This article details how to recreate the Flash programming game 'Manufactoria' as a web-based puzzle by implementing its UI with HTML and CSS and its logic with JavaScript, covering component definitions, grid layout, robot movement, state handling, level loading, and local storage persistence.

FrontendGame DevelopmentHTML
0 likes · 23 min read
Recreating the Flash Game “Manufactoria” with HTML, CSS, and JavaScript
php Courses
php Courses
Jan 20, 2023 · Frontend Development

Create a Browser Fireworks Animation with HTML, CSS, and JavaScript

This tutorial walks you through building a full‑screen fireworks effect in the browser by structuring the HTML, styling the text and canvas with CSS, and implementing the animation logic using JavaScript's Canvas API, utility functions, and object‑oriented firework and spark classes.

CanvasHTMLJavaScript
0 likes · 16 min read
Create a Browser Fireworks Animation with HTML, CSS, and JavaScript