เขียนเว็บออนไลน์ผ่าน Codepen.io

Codepen.io

          สำหรับในบทความนี้จะเป็นการรีวิวการเขียนโค้ดต่างๆผ่านทาง codepen.io โดยเป็นเครื่องมือที่ช่วยอำนวยความสะดวกในการทดลองการเขียนเว็ปต่างๆ ซึ่งสามารถใช้งานได้ง่าย และไม่ต้องติดตั้ง รองรับ html , css , java script โดยหน้าเว็ปสามารถใช้งานได้ง่าย

          ในเบื้องต้นเมื่อจะเริ่มใช้งานก็เลือกไปที่เมนู Create ซึ่งอยู่ทางด้านบนขวา จะเป็นการเข้าสู่การใช้งานของ Codepen.io และจะสามารถเขียนเว็ปผ่านหน้านี้ได้ทันที ทำให้สะดวกสบายในการที่จะทดลองเขียนเว็ปต่างๆ โดยที่ไม่ต้องติดตั้งโปรแกรมใดๆ

ทดลองสร้าง button ghost ผ่าน codepen.io

ก่อนอื่นเป็นการเขียนโค้ดของ html โดยจะเป็นการใส่ข้อความที่เราต้องการให้แสดงผ่านทางหน้าเว็ป ดังรูป

 

ผลจากโค้ดที่เขียนไปในตอนแรกที่จะแสดงผ่านหน้าเว็ป

จะเห็นได้ว่า เมื่อเขียนโค้ดลงในฝั่งของ html จะเป็นหน้าเว็ปเปล่า ซึ่งทำให้ไม่มีอะไรสีสันหรือดึงดูดตา จึงทำการเขียนลงในฝั่ง css เพื่อทำการตกแต่งให้หน้าเว็ปมีความหน้าสนใจ แปลกใหม่รวมทั้งดึงดูดตาของผู้ใช้ โดยจะทำการเขียนโค้ดในส่วนของ css ดังรูป

 

เมื่อใส่โค้ดในส่วนของ css ไปจะแสดงผลให้มีความน่าสนใจ มีสีสันมากยิ่งขึ้น

โค้ดตัวอย่างจากการทดลองสร้าง button ผ่านทาง codepen.io


ตัวอย่างโค้ด html
<section class="jumbotron">
 <h1>SPORT SHOES</h1>
 <p>The designed for you</p>
 <a href="#" class="button">MAKE APPOINTMENT</a>
</section>

ตัวอย่างโค้ด css
html, body {
 margin: 0;
 padding: 0;
}

.jumbotron {
 font-family: 'Montserrat', sans-serif;
 padding: 150px 0;
 background: url(https://wallpapercave.com/wp/1PDOsRI.jpg) center center;
 background-size: cover;
 text-align: center;
 color: #fff;
 position: relative;
}

.jumbotron h1 {
 font-size: 70px;
 margin-bottom: 0;
}

.jumbotron p {
 font-family: serif;
 font-size: 30px;
 font-style: italic;
 margin: 0 0 30px;
}

.button {
 display: inline-block;
 border: 2px solid #fff;
 padding: 10px 20px;
 color: #fff;
 text-decoration: none;
 transition: 0.3s;
}

.button:hover {
 background: #fff;
 color: #000;
}

คลิปทดลองสร้าง button
YouTube Preview Image
จัดทำโดย นายกิตติศักดิ์ ภูคานา 1560900746

Zico Kittisak
at GlurGeek.Com

Leave a Reply

Copyright © 2021 GlurGeek.Com. All Rights Reserved.