CSS ข้อความเงา: ทันสมัย​​และแฟนซีผลกระทบตัวอย่าง

CSS สามารถสร้างผลกระทบเงาข้อความทันสมัย​​จริงๆบาง เงาแฟนซีเหล่านี้จะถูกสร้างขึ้นโดยใช้ข้อความคุณสมบัติเงาซึ่งสนับสนุนโดยเบราว์เซอร์ที่สำคัญทั้งหมด

A+ A-

วิธีเงาข้อความสไตล์คุณสามารถสร้างการใช้ CSS? คุณสามารถทำอะไรได้ดีกว่าเงาง่าย? คุณสามารถสร้าง Photoshop บางอย่างเช่นผลกระทบเงาใช้ CSS เท่านั้น?

เนื่องจากนักพัฒนาเว็บยาวได้ใช้เงาพื้นฐานที่จะทำให้ข้อความและองค์ประกอบ DIV ดูราวกับว่าพวกเขาจะนูนหรือยกขึ้นจากพื้นผิว ในสมัย​​โบราณ, ภาพและภาพโปร่งใสถูกนำมาใช้เพื่อสร้างผลเงา นักพัฒนาจะชั้นภาพเงาภายใต้ข้อความหรือ DIV เพื่อให้บรรลุผลที่ต้องการของเงา

แต่กับการมาถึงของ CSS 3 -IT คือตอนนี้ง่ายมากที่จะเพิ่มเงาและอื่นที่มากเกินไปในทางที่สามารถปรับแต่งได้อย่างเต็มที่!

ลองมาดูวิธีการสร้างเงาข้อความบางส่วนที่ทันสมัย​​พร้อมกับคุณสมบัติ CSS ข้อความเงา ขอเริ่มต้นด้วยการใช้งานพื้นฐาน:

<div style="text-shadow: 2px 2px 2px #000000; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี
<div style="text-shadow: 20px -12px 2px #6374AB; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี

ที่คุณสามารถดูคุณสมบัติข้อความเงาใช้พารามิเตอร์ที่สี่:

  1. พิกัด x ของข้อความเงา (เทียบกับข้อความ)
  2. พิกัด y ของข้อความเงา (เทียบกับข้อความ)
  3. เบลอรัศมีของข้อความเงา มันเป็นจำนวนของพื้นที่ข้อความเงาคือ 'ยืด' ที่ก่อให้เกิดผลกระทบเบลอ
  4. สีของข้อความเงา

ตอนนี้ขอดูตัวอย่างแฟนซีมากขึ้นของเงาข้อความ CSS:

<div style="color: #000; background: #666; text-shadow: 0px 1px 1px #fff; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี
<div style="color: #666; background: #000; text-shadow: 0px 1px 1px #fff; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี

อีกคุณสมบัติที่น่าตื่นตาตื่นใจของสถานที่ให้บริการข้อความเงาคือการที่คุณสามารถใช้เงาหลายข้อความเดียวกันและสร้างผลกระทบได้น่าประทับใจมากบาง!

On Fire CSS เงาข้อความ

<div style="color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; padding:20px; font-size: 25px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี

หินแข็ง CSS เงาข้อความ

<div style="background:#3B5998; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; line-height: 35px; padding:20px; font-size: 30px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี

ไฟนีออน CSS ข้อความเงา

<div style="background:#000; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95; letter-spacing: 5px; line-height: 55px; padding:20px; font-size: 50px">TechWelkin is a resource of technology information</div>
TechWelkin เป็นทรัพยากรของข้อมูลเทคโนโลยี

คุณไม่ชอบผลกระทบที่ดีเหล่านี้ได้อย่างไร? หากคุณมีคำถามใด ๆ เกี่ยวกับทรัพย์สินข้อความเงาของ CSS, โปรดอย่าลังเลที่จะแสดงความคิดเห็นและขอให้ นอกจากนี้ถ้าคุณรู้เกี่ยวกับผลเงาข้อความอื่นที่สละลมหายใจ, โปรดแจ้งให้เราทราบ

Ads

หุ้น

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น