zoukankan      html  css  js  c++  java
  • 74.纯 CSS 创作一台 MacBook Pro

    原文地址:https://segmentfault.com/a/1190000015568609

    HTML code:

    <div class="macbook">
        <span class="screen"></span>
        <span class="base"></span>
    </div>

    CSS code:

    html, body {
        margin: 0;
        padding: 0;
    }
    /* 设置body的子元素水平垂直居中 */
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at center, white, gray);
    }
    /* 设置平板电脑macbook容器样式 */
    .macbook {
        font-size: 12px;
        width: 50em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 画出屏幕的轮廓 */
    .screen {
        position: relative;
        width: 40em;
        height: calc(40em * 0.667);
        background-color: black;
        border-radius: 3% 3% 0 0 / 5%;
        border: 0.2em solid silver;
        border-bottom: none;
    }
    /* 画出屏幕screen上的光影 */
    .screen::before {
        content: '';
        margin: 4.3% 3.2%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: radial-gradient(
            circle at right bottom,
            rgba(255, 255, 255, 0.4) 75%,
            rgba(255, 255, 255, 0.6) 75%
        );
    }
    /* 画出底座base */
    .base{
        position: relative;
        width: inherit;
        height: 1.65em;
        border-radius: 0 0 10% 10% / 0 0 50% 50%;
        background: linear-gradient(
            white,
            white 55%,
            #999 60%,
            #222 90%,
            rgba(0, 0, 0, 0.1) 100%
        );
    }
    /* 为底座增加光照效果 */
    .base::before{
        content: '';
        position: absolute;
        width: inherit;
        height: 55%;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(255, 255, 255, 0.8) 1%,
            rgba(0, 0, 0, 0.4) 4%,
            transparent 15%,
            rgba(255, 255, 255, 0.8) 50%,
            transparent calc(100% - 15%),
            rgba(0, 0, 0, 0.4), calc(100% - 4%),
            rgba(255, 255, 255, 0.8) calc(100% - 1%),
            rgba(0, 0, 0, 0.5) 100%
        );
    }
    /* 画出底座上用于掀开屏幕的缺口 */
    .base::after {
        content: '';
        position: absolute;
        width: 7em;
        height: 0.7em;
        background-color: #ddd;
        left: calc(50% - 7em / 2);
        box-shadow: 
            inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2),
            inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2);
        border-radius: 0 0 7% 7% / 0 0 95% 95%;
    }
  • 相关阅读:
    Pimlico:个人信息治理套件
    GChemPaint-绘制化学分子布局
    gLabels:名片方案软件
    设置Tomcat在Linux利用体系中自启动办法
    Linux应用系统下Xmanager器材登录设置
    KGmailNotifier-Gmail 邮件关照轨范
    Xfce 4.4.1 发布
    Mozilla Thunderbird 2.0.0.0 正式版颁布
    Gaim 已更名为 Pidgin
    Wine 0.9.35
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10725311.html
Copyright © 2011-2022 走看看