วันที่ 1 - 100 Days CSS

สวัสดีครับ วันนี้ผมไปเจอเว็บนึงคือ 100 Days CSS Challenge เป็นเว็บที่ให้เราได้ฝึกฝน ฝึกทำ CSS ใน 100 วันครับ แต่ละวันก็จะมีโจทย์มาให้เราทำ สามารถ submit สิ่งที่ทำได้ ดูตัวอย่าง ดูโค๊ดของคนอื่นๆ หรือดูเฉลยก็ได้ เนื่องจากทั้งหมด ใช้ Codepen นั่นเอง ก็เลยคิดว่า ลองฝึก นั่งทำดูบ้างดีกว่า

โค๊ดทั้งหมดจะใช้ Codepen ซึ่งตัวเว็บ 100 Days CSS Challenge เค้าก็เตรียม Template ไว้ให้เราแล้ว

100 Days CSS Challenge

Challenge yourself and become a CSS expert in 100 days. Be creative, submit your result and check out what others have created. No Registration and completely free.

Matthias Martin

ข้อดีของ 100 Days CSS Challenge คือ

• เราได้ฝึกฝนการเขียน CSS ของตัวเอง
• ทุกๆ Challenge มันไม่มีคำตอบที่ดีที่สุด แต่ละข้อ สามารถทำได้หลายแบบ หลายแนวทาง
• หากเราทำไม่ได้จริงๆ ก็ดูของคนอื่นๆที่เค้า submit มา หรือดูโค๊ดต้นฉบับได้ (แต่แนะนำว่าลองทำก่อน ไม่ได้จริงๆ ค่อยดู)

สุดท้าย คุณจะลองทำเอง หรือจะดูเฉลย จะดูคนอื่น ก็แล้วแต่ครับ อยู่ที่ตัวเราแล้วว่า เป้าหมายของเราคืออะไร หรือเราถนัดเรียนรู้แบบไหน ทำแบบไหนแล้วสนุก มีประโยชน์ก็ลุยเลย

โปรเจ็ค Day 1

Day 1 - 100 Days CSS Challenge

Challenge yourself and become a CSS expert in 100 days. Be creative, submit your result and check out what others have created. No Registration and completely free.

100 Days CSS ChallengeMatthias Martin

ดูจากตัวอย่าง วันนี้ยังไม่ค่อยมีอะไรมากครับ หลักๆ เป็นการจัดการ font และก็ background

• ใช้ background gradient - ส่วนนี้ อาจจะต้องนั่งจิ้มสี และใช้เว็บ gradient generator ช่วย 🤣
• เรื่องของ box-shadow ที่ text และก็อาจจะมีปรับ margin / หรือ text spacing ให้ติดกัน
• หลักจากลองทำเกือบเสร็จแล้ว เพิ่งสังเกตว่าตัว 100 มันไม่ใช่ font แต่เป็น สีเหลี่ยมกับวงกลม ก็เลยต้องคิดใหม่ วิธีการวาด สีเหลี่ยมและวงกลมโดนัท มาต่อกันเป็น 100

ตัว Template จะมี HTML และ CSS มาให้แล้ว โดยเค้ากำหนด ความกว้าง และสูงมาเลย 400x400 px ให้อยู่ตรงกลาง

<div class="frame">
  <div class="center">
    <p>Happy coding :)</p>
  </div>
</div>

ตัว CSS (เป็น SCSS) ที่มีมาให้แล้ว

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

เริ่มต้นโปรเจ็ค

ทีนี้มาลองดูว่า มันทำยังไง ทีละ Step ละกัน

1. เริ่มวางโครงสร้าง HTML ก่อน โดยส่วนที่เป็น ตัวเลข 100 จะแยกเป็น 4 div และใช้วิธีกำหนด width height และ border-radius และ border-width เอา

<div class="frame">
  <div class="center">
    <div class="number">
      <div class="one-one"></div>
      <div class="one-two"></div>
      <div class="zero-one"></div>
      <div class="zero-two"></div>
    </div>
    <span class="big">Days</span>
    <span class="small">CSS Challenge</span>
  </div>
</div>

2. ส่วนที่เป็น .frame ไม่มีอะไรมาก ก็แค่ใส่ background gradient และก็ปรับ font family แบบตัวอย่าง (ผมไม่ได้ใส่พวก vendor prefix นะครับ เนื่องจากใน Codepen ผมตั้งเป็น autoprefixer ไว้แล้ว

.frame {
	color: #fff;
	background: #43389f;
	background: linear-gradient(to top right, #43389f 0%, #4ec6ca 100%);
	font-family: "Courier New", "Courier", sans-serif;
}

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

CSS Gradient

3. กำหนดให้ข้อความอยู่ กึ่งกลาง

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

4. ส่วนที่เป็น 100 จะวาดเป็นรูป โดยกำหนดขนาดไว้ที่ สูง 100px กว้าง 200px โดยที่

• ตัวเลข 1 ตัวแรก ใช้ 2 div คือ .one-one และ .one-two ตัวแรกขนาด 20x40 มีการกำหนด rotate 50 deg และ ปรับขนาด left จาก parent .number ส่วนตัว .one-two ก็ปกติ แค่กำหนด width height
• ตัวเลข 0 สองตัว ใช้ border-width ที่ 24px เพื่อให้ขนาดเท่ากับ เลข one-two มีปรับ z-index เล็กน้อย

.number {
  position: relative;
  height: 100px;
  width: 200px;
    
  & > div {
    box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.2);
  }
	
  .one-one {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 1rem;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
  }

  .one-two {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0px;
    height: 100px;
    width: 24px;
    background: #fff;
    border-radius: 3px;
  }

  .zero-one, 
  .zero-two {
    position: absolute;
    top: 0;
    left: 1.25rem;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 24px solid #fff;
	z-index: 7;
  }

  .zero-two {
    z-index: 6;
    left: 100px;
  }
}

5. ส่วนสุดท้าย ข้อความ Days และ CSS Challenge ก็ปรับขนาด จัด spacing และ line-height เอา ก็เป็นอันเรียบร้อย

สุดท้ายโค๊ดที่ได้ ก็ตาม Codepen ข้างล่างเลย (จริงๆ ไม่ต่างจากตัวอย่าง เพราะว่าลอกตัวอย่างมานั่นเอง 🤣)

See the Pen Untitled by Chai Phonbopit (@Phonbopit) on CodePen.