15 เอฟเฟ็กต์ข้อความที่สวยงามที่สร้างขึ้นด้วย CSS

ข้อความหรือตัวอักษรที่สวยงามจะทำให้การออกแบบของคุณดูน่าสนใจ ในการออกแบบเว็บ CSS ช่วยให้มีสไตล์ในการออกแบบรวมถึงเอฟเฟกต์ต่างๆในข้อความหรือตัวอักษร ด้วย CSS คุณสามารถใช้การตัดและเพิ่มภาพเคลื่อนไหวลงในข้อความเพื่อเพิ่มสีสันให้กับสิ่งต่าง ๆ.

และเพื่ออธิบายสิ่งนี้เราได้รวบรวม เอฟเฟกต์ข้อความสุดเจ๋ง 15 แบบที่จะทำให้ CSS เป็นไปได้ (บางคนมีความช่วยเหลือเล็กน้อยจากรหัส Javascript).

สำหรับสิ่งเพิ่มเติมที่คุณสามารถทำได้ด้วย CSS ลองดู:

18 สิ่งดีๆที่คุณจะไม่เชื่อว่าถูกสร้างขึ้นโดยใช้ CSS
30 jQuery text effects libraries ที่คุณต้องรู้
วิธีสร้างรูปหัวใจด้วย CSS
Animate.css - ห้องสมุด CSS3 เพื่อสร้างภาพเคลื่อนไหวได้อย่างง่ายดาย

นิเมชั่นจังหวะยืดหยุ่น

Yoksel เคลื่อนไหวจังหวะของข้อความด้วยโทนสีเย็น เอฟเฟกต์นี้ทำด้วย CSS และ SVG ผลลัพธ์ที่ได้นั้นยอดเยี่ยม!

SVG ทันทีทันใด

ต้องการสร้างเอฟเฟกต์ที่ดูเหมือนทีวีอะนาล็อกที่เสียหรือไม่ Dirk Weber สร้างเอฟเฟกต์ความผิดพลาดอันน่าทึ่งนี้โดยใช้ตัวกรอง CSS และ SVG.

โลโก้ร้านคุย

โลโก้ Shop Talk ถูกสร้างขึ้นใหม่โดย Hugo โดยใช้ CSS เท่านั้น โลโก้มีลักษณะคล้ายกับต้นฉบับพร้อมด้วยพื้นผิวที่เหมาะสม.

Slashed Effect

แนวคิดนี้โดย Robet Messerle ให้เอฟเฟ็กต์มีดหั่นด้วย CSS น้อยกว่า 70 บรรทัด.

เอฟเฟกต์เงาที่สง่างาม

เอฟเฟกต์ Long Shadow มาพร้อมกับข้อความโดยใช้ CSS Juan Brujo ผู้สร้างได้สร้างเอฟเฟกต์อื่น ๆ อีก 4 อัน แต่มันก็น่าประทับใจที่สุด.

เอฟเฟกต์ข้อความ Foggy

Andreas สร้างเอฟเฟกต์หมอกที่น่าทึ่งในโรงภาพยนตร์ ใช้ได้กับเบราว์เซอร์ Webkit เท่านั้น.

มาสก์ข้อความ SVG

การออกแบบโดย Marco Barria แสดงผลการปิดบังข้อความที่สง่างามบนภาพพื้นหลังขนาดใหญ่.

แอนิเมชั่ข้อความ

Yoann สร้างเอฟเฟกต์สัญลักษณ์ที่ยอดเยี่ยมด้วยแอนิเมชั่นข้อความนี้ ดูว่าคำที่สองสลับกันระหว่างสามคำอย่างไร.

กระแทกพื้น

เอฟเฟกต์ 3D ของ ThatGuySam นั้นเล่นง่ายบนข้อความ - เงา แต่ด้วยผลลัพธ์ที่ยอดเยี่ยม.

ข้อความคลิปพื้นหลัง

Jintos กำลังเล่นกับคลิปพื้นหลัง Webkit เพื่อเพิ่มภาพพื้นหลังภายในข้อความ เขาสร้างผลงานยอดเยี่ยม 16 รายการโดยใช้วิธีนี้.

CSS Text-FX

Moklik เพิ่มเอฟเฟกต์แสงสลัวลงในข้อความทำให้คุณมีแสงกะพริบเป็นช่วง ๆ ซึ่งเตือนถึงอันตรายจากระยะไกล.

การลงนามเคลื่อนไหวของลายเซ็น

Gary Hepting สร้างภาพเคลื่อนไหวการเซ็นชื่อแบบเรียลไทม์ สิ่งนี้ทำได้โดยการใช้ Javascript กับเส้นทาง SVG เพื่อทำให้การลงนามเคลื่อนไหว.

สีสัน Glitchy 404

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

จักรวาล

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

กำลังโหลด

เอฟเฟกต์สุดเจ๋งที่ซ่อนและแสดงตัวอักษร.