什么是CSS变态生成器？
CSS Neumorphism Generator 构建了软 UI 元素 - 形状看起来使用成对的明暗阴影从背景轻轻挤出或压入背景的样式,您设置了表面颜色、阴影距离、模糊、对比强度、角半径和形状,观看实时预览,并复制精确的 CSS。
变形是通过在与页面共享背景的元素上放置两个盒子阴影来工作的：左上角有一个较浅的阴影，右下角有一个较暗的阴影。 让两种阴影颜色和偏移看起来令人信服地柔软是很挑剔的。 此工具会自动从表面颜色中获取明暗色调，因此效果看起来始终保持平衡。
一切都在您的浏览器中运行。 选择一个预设，调整滑块，在平坦、凹形、凸形和按压的形状之间切换，然后复制CSS。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。
Neumorphism值得用清晰的眼光来了解它的主要弱点,那就是可访问性。这种风格的工作原理是在与背景颜色几乎相同的表面上放置一个光影和一个暗影,因此控件的边缘由亮度相差几%来定义。这对一些观众来说是优雅的,对于任何对比度降低的人来说都是不可见的,在昏暗的屏幕上,或者在户外。它失败了WCAG 1.4。11,它要求在交互组件的边界上采用3:1的比例。通常的妥协是保留装饰表面的风格,并给真正的交互元素一个真实的边框或清晰的焦点状态。阴影颜色源自此处的表面颜色,因此深色表面会产生正确倒置的一对而不是灰色的一对。
如何使用CSS变态生成器？
设置表面颜色
选择元素的颜色,它应该与其后面的页面背景相匹配 - 新形态依赖于元素和页面共享相同的基本颜色。
调整阴影
调整距离、模糊和强度以控制元素从页面上提起的距离以及光/暗对比的强度。
选择一个形状
在平坦、凹、凸、按压之间切换。 Pressed 使用嵌入阴影看起来凹陷，而凹凸增加了微妙的渐变。
复制CSS
复制生成的块(边框半径、背景和配对的框阴影)并将其粘贴到您的卡片、按钮或面板上。
主要特点
自动阴影颜色
浅色和暗阴影源自您的表面颜色，因此柔和的UI效果在无需手动调整的情况下始终看起来平衡
四种形状
平、凹、凸、压盖凸起和凹陷的外观，使用嵌入阴影和凹凸加压的凹凸
全控
阴影距离、模糊、对比度强度和角半径的滑块可让您从几乎没有到戏剧性的方式调整效果
实时预览
预览位于匹配的背景上，以便软阴影正确读取，在编辑时立即更新
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
Credit Card Validator
Check a credit card number against the Luhn checksum and detect its card network. Validates the format only, never contacts a bank.
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!