博客详情
CSS+JS图文并茂的创意博客详情页面布局，支持展开与收缩详情内容这是一款博客文字墙布局效果，基于CSS技术实现，通过可收缩与展开的详情内容以及个性化图文布局优化阅读体验，适用于内容聚合平台或长篇博客的视觉展示场景。
纸张风格
CSS 便签纸风格图文卡片布局，适用于笔记应用、待办事项或创意内容展示场景这是一款纯CSS实现的笔记本纸张便签展示图文布局效果，模拟真实便签纸装饰，适用于笔记应用、待办事项或创意内容展示场景。
层叠卡片
JavaScript 3D错位动态堆叠卡片效果这是一款层叠偏移卡片效果，基于CSS+JavaScript技术实现，卡片以错位堆叠布局排列，悬停时通过动态调整 z-index 和位置突出当前卡片，适用于相册、项目集或内容画廊等展示场景。
卡片布局
纯CSS实现倾斜带标题的创意图文卡片布局，悬停时倾斜及图片复位这是一款基于伪元素双图层倾斜设计的图文卡片交互效果，基于纯CSS技术实现，悬停时伪元素复位并触发圆角与背景位移，适用于产品卡片或焦点图展示场景。
悬停卡片
CSS悬停动态裁剪六种多边形图片边框卡片，并带有文字信息及操作按钮这是一款基于CSS的 clip-path 动画等属性实现的卡片交互效果，悬停时图像裁剪为圆形、五边形等共六款多边形边框展开并滑出文字信息与操作按钮，适用于作品集或产品展示的渐进式披露场景。
图文布局
CSS实现SVG不规则图文环绕效果，使svg图片自适应不规则图形或文字的边界这是一款基于CSS shape-outside 属性实现的SVG等图片悬停于section等区域一侧的上面布局效果，使svg图片自适应不规则图形边界，适用于创意排版或杂志风格网页设计。
图文布局
HTML中基于CSS Grid实现滚动图文页面横幅图片视口移动切换的 Full-Bleed 布局这是一款比较流行的全屏出血（Full-Bleed 布局）横幅效果，HTML页面中包含多张图片和文字内容时，图片以全屏横幅的形式穿插于HTML页面的文字内容中间，初始阶段会有文字内容遮盖图片部分区...
折角边框
CSS与HTML实现带有折角边框效果的图文卡片布局基于CSS的background、clip-path等关键属性实现的一款带折角边框效果的图文卡片布局，卡片的上方可以放置图片，并且可以任意设置图片的长宽以及纵横比，都可以完美展示。图片的下方显示...
网格图库
基于CSS Grid实现的响应式图文网格布局，支持RTL反向功能在HTML中创建了一个响应式的网格布局图库，单张图片的左上角、左下方以及中间区域可放置文字介绍内容，右下角设置了「分享」以及「收藏」的功能按钮。并且提供了RTL反向布局功能。这款使用CSS Gr...
食谱布局
HTML最佳菜谱图文布局，支持响应式这是一种利用CSS实现的最佳食谱图文网页布局方式，网页的背景是一张白纸放在拥有纹理的餐桌上，最终的图文内容会放入这张白纸中，此背景还原真实做饭场景，能够把做菜所需的食材、烹饪步骤以及操作时间等...