วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง

วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง

by jamepiyawat » 09/08/2019 4:28 pm

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

ปุ่ม dropdows ตอนแรกของผมก็จะเป็นแบบนี้
Selection_999(377).png
Selection_999(377).png (10.06 KiB) Viewed 420 times
แต่ผมอย่ากได้ dropdows แบบนี้
Selection_999(379).png
Selection_999(379).png (8.45 KiB) Viewed 420 times
code css ทั้งหมดก็จะเป็นแบบนี้

Code: Select all

box-shadow: none;
  padding: 0.5em 3.5em 0.5em 1em;
  background-color: transparent;
  background-image:
          linear-gradient(45deg, transparent 50%, gray 50%),
          linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
          calc(100% - 20px) calc(1em + 2px),
          calc(100% - 15px) calc(1em + 2px);
  background-size:
          5px 5px,
          5px 5px;
  background-repeat: no-repeat;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
ผลลัพธ์ที่ได้
Selection_999(378).png
Selection_999(378).png (11.64 KiB) Viewed 420 times
เรามาดูโค้ด css กันเลยดีกว่า

อันดับแรกเราก็ต้องใช้คำสั่งที่จะทำให้ไม่เป็นกล่องข้อความก่อนด้วยคำสั่ง

Code: Select all

  box-shadow: none
แล้วก็จัดข้อความในกล่องให้สวยงาม

Code: Select all

padding: 0.5em 3.5em 0.5em 1em
นำพื้นหลังออก

Code: Select all

background-color: transparent

จากนั้นเราก็ให้ code css ในการทำลูกศรชี้ลงล่างด้วย code นี้

Code: Select all

  background-image:
          linear-gradient(45deg, transparent 50%, gray 50%),
          linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
          calc(100% - 20px) calc(1em + 2px),
          calc(100% - 15px) calc(1em + 2px);
  background-size:
          5px 5px,
          5px 5px;
นำภาพพื้นหลัง และขอบออก

Code: Select all

  background-repeat: no-repeat;
  border: none;
เมือเราสร้างลูกศรใหม่แล้วเราก็ต้องลบลูกศรเก่าออกด้วย code นี้

Code: Select all

  -webkit-appearance: none;
  -moz-appearance: none;


เป็นอย่างไรบ้างครับดูเหมือนของต้นฉบับขึ้นมาบ้างหรือเปล่าก็เป็น code css ที่เอามาแชร์กันก็เป็นเพื่อทุกท่านที่ได้นำไปประยุกใช้ในงานกันนะครับก็หวังว่าบทความนี้จะเป็นความรุ้ให้กับทุกท่านที่เข้ามาอ่านกันนะครับ

Top