CSS_文字排版6

文字排版6

HTML

Code

<div class="wrap">
            <div class="container">
                <h1>CSS COKE IS AWESOME</h1>
                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                </div>
            </div>
        </div>

CSS

跟上篇不同，這裡的排版是用 flex 處理，加上 order: 1; 來改變元素排序。其他就是加上陰影，改變方框位置。

要做出上面第二張圖的效果，只要將 h1 的 position: relative; 改到 .container 上即可。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    display: flex;
    h1 {
        width: 400px;
        // 不要收縮
        flex-shrink: 0;
        // display:flex的order屬性，改變DOM元素的順序，順序會依據數值的大小排列 e.g. 給元素flex:1 編號，也可以直接用 1 or -1
        order: 1;
        // 留白
        padding-left: 15px;
        color: #aaa;
        font-size: 90px;
        position: relative;
        // 方框
        &::before {
            content: '';
            display: block;
            // 定位在上方
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border: 30px solid #f1c555;
            // background-color: #f1c555;
            // 顯示文字
            z-index: -1;
            transform: rotate(20deg);
            // 向外偏移
            // transform: rotate(20deg) translate(-20%, -20%);
        }
        // 方框
        &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border: 30px solid #f1c555;
            // background-color: #f1c555;
            // 顯示文字
            z-index: -1;
            transform: rotate(27deg);
            // transform: rotate(27deg) translate(-20%, -20%);
        }
    }
    .content {
        width: 800px;
        flex-shrink: 0;
        column-count: 2;
        column-gap: 30px;
        padding: 15px;
        box-shadow: 0 0 30px #ccc;
        p {
            margin-bottom: 1em;
            &:first-child::first-letter {
                font-size: 40px;
                float: left;
                padding-right: 10px;
            }
        }
    }
}

參考：
https://www.youtube.com/watch?v=O6ags2wEGbc&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=26