การเข้ารหัสกราฟิก Kung-fu 35 สร้างขึ้นด้วย CSS3 อย่างหมดจด

ดูกราฟิกด้านล่างแล้ว Photoshop ที่ยอดเยี่ยมใช้งานได้ใช่ไหม ไม่นะพวกมันถูกสร้างโดย CSS3 ใช่พวกเขากำลัง อย่างสมบูรณ์ “วาด” โดย CSS3! เมื่อเราเห็นภาพเคลื่อนไหว CSS3 มากพอเราคิดว่าสิ่งเหล่านั้นคือ CSS3 ทั้งหมดสามารถทำหน้าที่เป็นนักฆ่าแฟลชได้ แต่เราคิดผิด นักพัฒนาอาจไม่พอใจกับความสนุกของภาพเคลื่อนไหวดังนั้นอีกครั้งพวกเขาผลักขอบเขตของ CSS3 เพื่อท้าทายอาณาจักรของตัวแก้ไขกราฟิก.

ในโพสต์นี้มีกราฟิก CSS3 ที่สร้างขึ้นมาอย่างระมัดระวัง 35 รายการซึ่งรวมถึงบางสิ่งที่คุณจะไม่เกี่ยวข้องกับ CSS3 เช่น Apple iPhone, ตัวการ์ตูน โดราเอมอน, และที่น่าประหลาดใจมากขึ้น! Heck บางคนมาพร้อมกับการสอนโดยละเอียดที่สอนวิธีการทำให้สำเร็จ! ดังนั้นอย่าพลาดโอกาสที่ยอดเยี่ยมในการเรียนรู้การสร้างกราฟิกโดยใช้ CSS3 และ HTML นิดหน่อยมาสนุกกับ CSS3 กันเถอะ!

ขอแนะนำอย่างยิ่งให้คุณดูการสาธิตเหล่านี้โดยใช้เวอร์ชั่นล่าสุดของ Safari หรือ Google Chrome เวอร์ชันนักพัฒนาซอฟต์แวร์ การสาธิตส่วนใหญ่รองรับ Firefox และ Google Chrome เวอร์ชันล่าสุด.

ไอคอนฟีด RSS

ไอคอนฟีด RSS สร้างด้วย CSS3 เฉพาะจาก Hongkiat! พร้อมกับลิงค์มาสอนที่คุณสามารถเรียนรู้ได้จริง “วาด” ไอคอน RSS Feed โดยไม่ต้องใช้แม้แต่ภาพเดียว สร้างความมหัศจรรย์ CSS3 ด้วยมือของคุณเอง!

Apple iMac

ใช่ตาของฉันก็ไม่เชื่อเช่นนั้น แต่มันเป็น iMac “ลอม” หมดจดด้วย CSS3.

คีย์บอร์ด Apple

มันเป็นคีย์บอร์ดของ Apple ที่สร้างด้วย CSS3! Heck สามารถกดปุ่มบนคีย์บอร์ดได้.

Apple iPhone

โอ้อีกหนึ่งสิ่ง: iPhoneCSS3.

ดอกซากุระ

ความสุดยอดที่แท้จริงของ CSS3 คือมันสามารถใช้สร้างสิ่งต่าง ๆ รวมถึงพืชและสัตว์!

ถ้วยกาแฟ

วันที่เหนื่อยล้า มาดื่มกาแฟ CSS3 กันดีที่สุดกับ Safari / Google Chrome.

โดราเอมอน

โดราเอมอนนี้มีชื่อเสียงในการทดสอบความเข้ากันได้ของ CSS3 ลองใช้ใน Internet Explorer 8 หรือต่ำกว่าและขอให้มีความสุขมาก.

Meowww!

ตอนนี้คุณกำลังมองหาแมวที่สร้างขึ้นอย่างสมบูรณ์ด้วยรหัส! น่าเสียดายที่ CSS3 ไม่สามารถสร้างเอฟเฟกต์เสียงได้อย่างน้อยตอนนี้.

Mushroom, Triforce, Poké ball, Kirby

“ในฐานะที่เป็นคนโง่ฉันได้สร้างสิ่งแปลก ๆ เช่นเห็ดมาริโอทรีฟอร์ซโปเกมอนและเคอร์บี้ สำหรับผู้ที่ใช้เบราว์เซอร์ไดโนเสาร์มีภาพหน้าจอของสิ่งที่ควรจะเป็น.”

Nyan Cat

“มันมีองค์ประกอบ 81 DOM, CSS 688 สายบริสุทธิ์และหนึ่งฟังก์ชั่น JavaScript สำหรับการวนลูปเสียง CSS ของฉันล้มเหลวในการทดสอบ CSSLint และฉันภูมิใจในสิ่งนี้มาก.”

รูปแบบ

CSS3 นั้นยอดเยี่ยมมากจนสามารถใช้เพื่อสร้างสินทรัพย์พื้นฐานสำหรับการออกแบบเว็บเช่นรูปแบบเหล่านี้.

BonBon

BonBon นั้นเป็นปุ่ม CSS3 ที่หวานที่สร้างขึ้นโดยมีเป้าหมายคือรูปลักษณ์ที่เซ็กซี่และปุ่มที่มีความยืดหยุ่นอย่างแท้จริงพร้อมมาร์กอัปที่เรียบง่ายที่สุดเท่าที่จะเป็นไปได้.

ไอคอน iOS

Amazing? ใช่. ไอคอนเหล่านี้ถูกสร้างขึ้นโดย มุมโค้งมน, เงา, การไล่ระดับสี, RGBA, หลอกองค์ประกอบ, และ แปลง, ด้วยความช่วยเหลือของเครื่องมือบางอย่างเช่นเครื่องมือของ Westciv และ Border Border.

ไอคอนโซเชียลมีเดีย

นั่นเป็นไปไม่ได้ที่นักพัฒนาเว็บจะไม่สร้างไอคอนโซเชียลมีเดียหากพวกเขาสามารถสร้าง iPhone และ Doraemon ด้วย CSS3 และพวกเขาสร้างไอคอนเหล่านี้ได้ดีจริงๆ.

ไอคอนโซเชียลมีเดีย

ชุดไอคอนสื่อโซเชียลอีกชุดที่แสดงความเป็นไปได้ของ CSS3 ในการสร้างไอคอนที่ใช้งานได้.

แปลก

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

ไอคอน GUI

84 ไอคอน GUI อย่างง่ายโดยใช้เพียง CSS และ semantic HTML นี่ยังถือว่าเป็น “ไม่พร้อมสำหรับการผลิต” ไอคอน แต่พวกเขาดูมีแนวโน้มมาก.

สตีฟจ็อบส์

Steve Jobs ไม่เพียง แต่เป็นไอคอนของยุคดิจิตอล แต่ยังเป็นผู้นำที่ส่งเสริม HTML5 อย่างมาก.

Twitter Fail Whale

วาฬล้มเหลวของ Twitter จะไม่ทำให้คุณประหลาดใจยกเว้นใน Internet Explorer 8 หรือต่ำกว่า.

umbrUI

องค์ประกอบส่วนต่อประสานผู้ใช้ทำให้เป็นไปได้ด้วย CSS3 และมันก็ดูโฉบเฉี่ยวจริงๆ!

โลโก้ Adobe Photoshop

บรรณาการให้กับ Photoshop โดยไม่ต้องใช้ Photoshop.

โลโก้ Android

Android ทำมาจากรูปทรงที่ค่อนข้างเรียบง่าย แต่มันอธิบายถึงข้อดีของ CSS3: คุณสามารถทำสิ่งต่าง ๆ ได้ง่ายและปรับเปลี่ยนตามที่คุณต้องการโดยใช้รหัสเพียง แต่ไม่ใช่ Photoshop.

โลโก้ Apple

โลโก้ Apple Retro นำเสนอโดยใช้ CSS3 ยังคงยอดเยี่ยมเหมือนเวลาที่สร้างขึ้น.

โลโก้อาตาริ

หลายปีก่อนใครจะคิดว่าโลโก้อาตาริจะถูกสร้างขึ้นใหม่โดยใช้ CSS3.

โลโก้ BP

โลโก้อย่างง่ายสามารถทำได้อย่างง่ายดายด้วย CSS3 สิ่งที่ดีที่สุดที่มีโลโก้เหล่านี้แสดงอยู่ที่นี่คือมีรหัสสำหรับให้คุณทดลองใช้!

โลโก้ Dribbble

เว็บไซต์ตู้โชว์ที่ผู้ใช้ขับเคลื่อนมีชื่อเสียงโลโก้ของ Dribbble จัดแสดงโดยใช้ CSS3.

โลโก้วีโอไอพี

โลโก้ของวีโอไอพีนั้นไม่ยากเกินกว่าที่จะวาด แต่ผลลัพธ์ดูเป็นมืออาชีพ.

โลโก้ของ McDonald

ฉันรัก CSS3!

นก Twitter

สัดส่วนที่สมบูรณ์แบบปลายหมวกถึงผู้สร้าง.

โลโก้ Windows

โลโก้ Windows! ดูยอดเยี่ยมจริงๆและสร้างได้ง่าย!

โลโก้ Internet Explorer

การสร้างที่ยอดเยี่ยมจริงๆ! ใช้งานได้ในเบราว์เซอร์หลักยกเว้น Internet Explorer 8 หรือต่ำกว่า.

โลโก้ Google Chrome

ฉันไม่แน่ใจว่าคุณรักโลโก้ใหม่ของ Google Chrome หรือไม่ แต่โลโก้ CSS3 Google Chrome นี้ดูยอดเยี่ยม!

โลโก้ Opera

ตอนนี้ฝึกฝนให้คุณ: อะไรคือความแตกต่างระหว่างชิ้นส่วน CSS3 นี้และข้อตกลงที่แท้จริง?

โลโก้ HTML5

HTML5 ไม่สามารถส่องแสงได้หากไม่มี CSS3!

โลโก้โฟล์คสวาเกน

ยกเว้นชุดรูปแบบสีโคลน CSS3 นี้มีลักษณะเหมือนกับรูปแบบดั้งเดิม.

การสะท้อน

ด้วยความเจริญรุ่งเรืองของโลโก้และกราฟิกที่ทำจาก CSS3 ล้วน ๆ การอภิปรายที่ถกเถียงกันอย่างมากเกี่ยวกับการใช้งานของกราฟิกที่ผลิตด้วย CSS3 ในสภาพแวดล้อมการผลิตในโลกแห่งความเป็นจริง.

โดยทั่วไปกราฟิก CSS3 นั้นใช้ได้ แต่ก็เป็นเช่นนั้น อาจรำคาญโดยเฉพาะเมื่อคุณต้องการเปลี่ยนการออกแบบหรือปรับขนาดกราฟิก, ความเจ็บปวดที่ยิ่งใหญ่ที่สุดของที่นี่คือเทคโนโลยียังไม่รองรับเบราว์เซอร์บางตัวเช่น Internet Explorer.

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

มากกว่า

เต็มใจทำอะไรกับ CSS3 จริงหรือ คุณมาถูกที่แล้ว! ด้านล่างนี้เป็นคำแนะนำและแบบฝึกหัดที่เขียนขึ้นเพื่อช่วยเหลือคุณอย่างมากบนท้องถนนเพื่อควบคุม CSS3.

• CSS3: สร้างเมนูการนำทาง Breadcrumb
• CSS3: สร้างโลโก้ฟีด RSS
• CSS3: สร้างช่องค้นหา
• CSS3: คู่มือสำหรับผู้เริ่มต้น
• CSS3 / HTML5: สร้างหน้าเว็บ
• CSS3 / HTML5: สร้างแบบฟอร์มติดต่อ AJAX