Tag: CSS

  • สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

    cheerasak.s

    เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป

    เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้

    
CSS (ตัด media query ออก เนื่องจากใช้ flex box ช่วยในการทำ responsive อยู่แล้ว)

.timeline {
    position: relative;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

    .timeline::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: #977c44;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

.timeline-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

    .timeline-container::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -12px;
        background-color: white;
        border: 4px solid #FF9F55;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

.timeline-left {
    left: 0;
}

.timeline-right {
    left: 50%;
}

.timeline-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.timeline-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.timeline-right::after {
    left: -12px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

    HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง)

    /*Include Bootstrap 5*/
<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="timeline">
    <div class="timeline-container timeline-left">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
        </div>
    </div>
    <div class="timeline-container timeline-right">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พนมรุ้ง ปราสาทหินพนมรุ้งเป็นโบสถ์พราหมณ์ลัทธิไศวะ มีการบูรณะก่อสร้างต่อเนื่องกันมาหลายสมัย ตั้งแต่ประมาณพุทธศตวรรษที่ 15 ถึงพุทธศตวรรษที่ 17 และในพุทธศตวรรษที่ 18 พระเจ้าชัยวรมันที่ 7 แห่ง...</p>
        </div>
    </div>
    <div class="timeline-container timeline-left">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
        </div>
    </div>
    <div class="timeline-container timeline-right">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1792-2006</h3>
            </div>
            <p>อุทยานประวัติศาสตร์ศรีสัชนาลัย ศรีสัชนาลัย มีพัฒนาการมาแต่สมัยก่อนประวัติศาสตร์ตอนปลาย ประมาณ ๒,๓๐๐ – ๑,๕๐๐ ปีมาแล้ว โดยปรากฏชื่อควบคู่ไปกับเมืองสุโขทัยที่เป็นราชธานี สันนิษฐานว่าเมืองศรีสัชนาลัยมีความสำคัญในฐาน...</p>
        </div>
    </div>
</div>

    ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ

  • สร้างเงาให้กับวัตถุด้วย SmoothShadow

    ekaphon.t

    ปัจจุบันเทรนการออกแบบเว็ปไซต์ต่างๆมักจะมีการใช้เงามาเป็นส่วนประกอบ ทำให้วัตถุชิ้นนั้นมีความโดดเด่น สร้างจุดสนใจของเว็ปไซต์ได้ หรือเพื่อความสวยงาม ดูมีมิติ แต่การที่เราใส่เงาให้กับวัตถุนั้นๆ เราก็จะต้องมาตั้งค่า Box-shadow หลาย parameter กว่าจะได้เงาสวยๆออกมาสักแบบหนึ่ง นั่งสุ่มตัวเลขความเบลอ ความเข้มของเงา หรือระยะห่างของเงา เว้นแค่ไหนดี ตัวเลขแค่นี้เพียงพอแล้วหรือยัง วันนี้ผมจะมาแนะนำ SmoothShadow เครื่องมือหนึ่งตัวที่มีประโยชน์และช่วยลดเวลาในการเขียน code ของเราได้มาก Smooth Shadow เป็นเว็ปไซต์ที่เราสามารถเข้าไปปรับแต่งเงาผ่าน UI บนเว็ปไซต์และสามารถ copy ออกมาใช้งานได้เลย
    หน้าตาของ SmoothShadow จะประกอบไปด้วยกล่องสี่เหลี่ยมอันหนึ่งกลางหน้าจอ ส่วนนี้จะแสดงรูปแบบเงาที่จะแสดงจริงๆบนเว็ปไซต์ โดยจะแสดงเงาตามการตั้งค่าจากแถบข้างขวา และมี CSS box-shadow แสดงไว้สำหรับการ copy ไปใช้งาน และส่วนของแถบข้างขวาจะแสดงแถบ customize เงา เราสามารถปรับแต่งเงาได้โดยการลาก adjustment bar ตามค่าต่างๆได้หรือลากปรับเส้นกราฟการไล่แสงเงาได้ ซึ่งประกอบไปด้วย 5 ส่วนหลักๆ

    Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ

    Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ

    Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้

    Final blur strength คือระดับความเบลอของเงา ยิ่งเพิ่มค่าเบลอ เงาของเราก็จะเบลอ ดูนวลตา กลมกลืนมากขึ้น ถ้าลดค่าความเบลอ เงาก็จะยิ่งชัดขึ้นจะเป็นสี่เหลี่ยม แสงแข็ง เห็นชัดเจน ส่วนกราฟจะความเบลอในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้เช่นกัน

    Reduce spread คือ ระดับการแผ่กระจายของเงา ยิ่งเพิ่มมาก เงาก็จะมีความใหญ่ มีการเกลี่ยแสงที่มาก ดูกลมกลืน ยิ่งลดค่า เงาก็จะยิ่งหดอยู่ใกล้วัตถุ ทำให้วัตถุมีความชัดเจนมากขึ้น

    ทั้งนี้ทั้งนั้น เราปรับแสงเงาที่กล่าวมาสามารถนำไปใช้ได้ในหลายสถานการณ์ อยากได้เงาสไตล์แบบเข้มๆ หรือแบบจางๆอ่อนๆ ก็สามารถปรับได้ในเบื้องต้น การปรับเอียงเงาไปซ้าย-ขวา หรือขึ้นข้างบน หรือการปรับสีของเงาคงต้องปรับผ่าน CSS ครับ

    อ้างอิง Smoother & sharper shadows with layered box-shadows | Tobias Ahlin , @brumm (@funkensturm) / Twitter