Skeuomorphism

拟物设计组件配方

组件变体

font-bold rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out bg-gradient-to-b from-[#b8a88a] to-[#8b7355] text-white hover:-translate-y-px hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),0_4px_6px_rgba(0,0,0,0.18)] active:translate-y-px active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]

button

按钮

Realistic 3D button with gradient surface, inset shadows and tactile depth

基础骨架: font-bold rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out
变体: 主要、次要、轮廓
状态: hover、active、disabled

card

卡片

Textured surface card with gradient background and realistic depth shadows

基础骨架: bg-gradient-to-b from-[#e8dfd1] to-[#d4c4a8] rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out
变体: 默认、凸起、凹入
状态: hover

input

输入框

Realistic inset input field with textured background and depth effect

基础骨架: w-full rounded-lg border border-[#a89880] bg-[#f5efe6] shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] font-sans text-[#3a2f22] placeholder:text-[#8b7355] focus:outline-none transition-all duration-200 ease-out
变体: 默认、浮雕
状态: focus、disabled