ikkhksvu 发表于 2024-10-3 03:35:55

2020拟态设计搞半天没火起来，分享一下拟态css样式实现！


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">拟物化、扁平化。UI设计无论<span style="color: black;">怎样</span>都会<span style="color: black;">持续</span>变化的，人的审美会疲劳，就连乔布斯的拟物化<span style="color: black;">此刻</span>都被扁平化搞得裤衩都不剩了。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/8e0f981e2d9e45d5939b319d4268f071~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728083419&amp;x-signature=CjodgbNTUVVeyigxDTFvseiGuQo%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">扁平化很简单，<span style="color: black;">然则</span>设计师<span style="color: black;">已然</span>不满足于此类审美了，在寻找新的设计。这不，新拟态<span style="color: black;">起始</span><span style="color: black;">显现</span>，本来以为2020会火，结果到<span style="color: black;">此刻</span>还没几个UI用新拟态设计风格。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你还不<span style="color: black;">认识</span>新拟态啥样子，不妨去<span style="color: black;">瞧瞧</span>百度<span style="color: black;">照片</span>搜索里找“新拟态”，<span style="color: black;">或</span>能科学上网去外国网站看。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/01df238633b4471b8361bf196ab4f095~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728083419&amp;x-signature=bgLLx2Z0A97jMnRAyq6mqW4vg%2BQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从UI代码编写<span style="color: black;">方向</span><span style="color: black;">来讲</span>，加了内发光外发光两唯独<span style="color: black;">暗影</span>，比扁平化页面代码编写还是麻烦了不少。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/d921cf207f6644f883fef54830f32a04~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728083419&amp;x-signature=jHZjVu%2Bc%2BXLseXXFuU24iKbFtBE%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新拟态明亮主题 示例</p>
    </div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/822df00c92fd42dabfc6f36623bf7e6c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728083419&amp;x-signature=cEzesV2TopMNXvfL2KUatk1waks%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新拟态<span style="color: black;">阴暗</span>主题 示例</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">赶潮流的我<span style="color: black;">亦</span><span style="color: black;">科研</span>了新拟态UI设计，<span style="color: black;">亦</span>从国外网站学习<span style="color: black;">科研</span>，分享一下新拟态的css页面装饰代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">很简单，就几行css，只需要新拟态风格的元素包裹就行了。还<span style="color: black;">能够</span>切换黑白主题！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面是提炼出的核心样式！</p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">HTML代码</h1><span style="color: black;">&lt;!DOCTYPE <span style="color: black;">html</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">html</span> <span style="color: black;">lang</span>=<span style="color: black;">"en"</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">head</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">meta</span> <span style="color: black;">charset</span>=<span style="color: black;">"UTF-8"</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">title</span>&gt;</span>新拟态 UI<span style="color: black;">&lt;/<span style="color: black;">title</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">link</span> <span style="color: black;">href</span>=<span style="color: black;">"style.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span>&gt;</span>
    <span style="color: black;">&lt;/<span style="color: black;">head</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">body</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"display"</span>&gt;</span>
    拟态内容
    <span style="color: black;">&lt;/<span style="color: black;">div</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">div</span> <span style="color: black;">data-theme</span>=<span style="color: black;">"dark"</span> <span style="color: black;">class</span>=<span style="color: black;">"display"</span>&gt;</span>
    拟态内容
    <span style="color: black;">&lt;/<span style="color: black;">div</span>&gt;</span>
    <span style="color: black;">&lt;<span style="color: black;">div</span>&gt;</span>
    拟态设计内容
    <span style="color: black;">&lt;/<span style="color: black;">div</span>&gt;</span>
    <span style="color: black;">&lt;/<span style="color: black;">body</span>&gt;</span>
    <span style="color: black;">&lt;/<span style="color: black;">html</span>&gt;</span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">CSS代码</h1><span style="color: black;">:root</span> {
    <span style="color: black;">--body-bg-color</span>: <span style="color: black;">#e0e5ec</span>;
    <span style="color: black;">--bg-color</span>: <span style="color: black;">#e0e5ec</span>;
    <span style="color: black;">--primary-font-color</span>: <span style="color: black;">rgba</span>(<span style="color: black;">144</span>,<span style="color: black;">152</span>,<span style="color: black;">168</span>,<span style="color: black;">1</span>);
    <span style="color: black;">--secondary-font-color</span>: <span style="color: black;">rgba</span>(<span style="color: black;">51</span>,<span style="color: black;">64</span>,<span style="color: black;">89</span>,<span style="color: black;">1</span>);
    <span style="color: black;">--soft-high-light</span>: <span style="color: black;">rgba</span>(<span style="color: black;">255</span>,<span style="color: black;">255</span>,<span style="color: black;">255</span>,.<span style="color: black;">43</span>);
    <span style="color: black;">--dark-high-light</span>: <span style="color: black;">rgba</span>(<span style="color: black;">217</span>,<span style="color: black;">210</span>,<span style="color: black;">200</span>,.<span style="color: black;">51</span>);
    }

    <span style="color: black;"></span> {
    <span style="color: black;">--bg-color</span>: <span style="color: black;">#131419</span>;
    <span style="color: black;">--primary-font-color</span>: <span style="color: black;">#c7c7c7</span>;
    <span style="color: black;">--secondary-font-color</span>: <span style="color: black;">#03a9f4</span>;<span style="color: black;">--soft-high-light</span>: <span style="color: black;">rgba</span>(<span style="color: black;">255</span>,<span style="color: black;">255</span>,<span style="color: black;">255</span>,.<span style="color: black;">05</span>);
    <span style="color: black;">--dark-high-light</span>: <span style="color: black;">rgba</span>(<span style="color: black;">0</span>,<span style="color: black;">0</span>,<span style="color: black;">0</span>,.<span style="color: black;">51</span>);
    }
    <span style="color: black;">body</span> {
    <span style="color: black;">bac<span style="color: black;">公斤</span>round</span>: <span style="color: black;">var</span>(--body-bg-color);
    <span style="color: black;">color</span>: <span style="color: black;">var</span>(--primary-font-color);
    }<span style="color: black;">.display</span> {
    <span style="color: black;">box-shadow</span>: <span style="color: black;">6px</span> <span style="color: black;">6px</span> <span style="color: black;">16px</span> <span style="color: black;">0</span> <span style="color: black;">var</span>(--dark-high-light), -<span style="color: black;">6px</span> -<span style="color: black;">6px</span> <span style="color: black;">16px</span> <span style="color: black;">0</span> <span style="color: black;">var</span>(--soft-high-light), inset <span style="color: black;">6px</span> <span style="color: black;">6px</span> <span style="color: black;">5px</span> <span style="color: black;">0</span> <span style="color: black;">var</span>(--dark-high-light), inset -<span style="color: black;">6px</span> -<span style="color: black;">6px</span> <span style="color: black;">5px</span> <span style="color: black;">0</span> <span style="color: black;">var</span>(--soft-high-light);
    <span style="color: black;">border</span>: <span style="color: black;">5px</span> solid <span style="color: black;">var</span>(--soft-high-light);
    <span style="color: black;">color</span>: <span style="color: black;">var</span>(--secondary-font-color);
    }




j8typz 发表于 2024-10-16 18:38:30

楼主果然英明！不得不赞美你一下！

4zhvml8 发表于 2024-11-6 20:55:04

“板凳”（第三个回帖的人）‌
页: [1]
查看完整版本: 2020拟态设计搞半天没火起来，分享一下拟态css样式实现！