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
จัดทำโดย นายกิตติศักดิ์ ภูคานา 1560900746
