HTML5 และ CSS3 ทำงานร่วมกันเพื่อสร้างโลโก้เว็บไซต์

1. ชื่อเล่นอยู่ข้างนอก

ด้วยชื่อเล่นโลโก้ HTML อย่างเป็นทางการเกิดมาพร้อมกับสีที่งดงามและงดงาม คุณสามารถแสดงรายการหน้าโลโก้อย่างเป็นทางการ (คลิกที่นี่) เพื่อดู

ภาพด้านบนเป็นภาพหน้าจอและภาพหน้าจอก็เป็นภาพ ภาพด้านล่างเป็นรุ่น 128 Kawaii Pocket:

ภาพต่อไปนี้เป็นรุ่นวัยรุ่นที่มีพลังและมีชีวิตชีวา 256 คน:

ภาพต่อไปนี้เป็นมาตรฐาน 256*256 ดัชนีพื้นหลังโปร่งใสของผู้ชายรุ่นวัยรุ่น:

HTML5 ได้เปิดตัวโลโก้นี้ซึ่งมีความสำคัญอย่างยิ่ง ฉันคิดว่านี่เป็นเครื่องหมายที่ HTML5 ได้พัฒนาไปสู่ระดับใหม่และการพัฒนาและความคืบหน้าของมันไม่สามารถหยุดยั้งได้เผยให้เห็นความทะเยอทะยานและการครอบงำของ HTML5

โลโก้นี้ดูเหมือนโลโก้หน่วยรักษาความปลอดภัย 360:

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

2. ใช้ CSS3 บริสุทธิ์เพื่อใช้โลโก้นี้

คุณต้องชื่นชมบางคนที่ชอบลองใช้เทคโนโลยีใหม่ ๆ และสร้างสิ่งใหม่ ๆ ตัวอย่างเช่น Eric คราวนี้ไม่นานหลังจากโลโก้ HTML5 ออกมาเขาแสดงโลโก้ HTML ใหม่อย่างชัดเจนพร้อม CSS ที่บริสุทธิ์กว่า Zhou Dongyu

ต้องการดูเอฟเฟกต์หรือไม่? คุณสามารถคลิกที่นี่: การสาธิตโลโก้ใหม่สำหรับการใช้ HTML5 ด้วย CSS

ในแง่ของการใช้งานมีการใช้สิ่งต่าง ๆ ของ CSS3 จำนวนมากซึ่งส่วนใหญ่ใช้เพื่อให้ได้ผลการหมุน จากนั้นองค์ประกอบก็บ้าคลั่งเกี่ยวกับการใช้ตำแหน่งองค์ประกอบสัมบูรณ์ จากนั้นทีละเล็กทีละน้อย เนื่องจากใช้ CSS3 โลโก้นี้จึงถูกทำให้เสียโฉมอย่างจริงจังภายใต้เบราว์เซอร์ IE ดูภาพด้านล่าง (คัดกรองจากเบราว์เซอร์ IE7):

ดังนั้นคุณต้องย้ายไปที่เบราว์เซอร์ที่ทันสมัยเพื่อดูเอฟเฟกต์ หากคุณต้องการจัดอันดับแต่ละเบราว์เซอร์ตามเอฟเฟกต์ควรเป็น: Chrome ≈ Safari> Firefox> Opera

นี่คือสิ่งที่เนื้อหาของการใช้ CSS3 ในเอฟเฟกต์โลโก้นี้คือ:

-webkit-transform: skewx (-5deg);

-moz-transform: skewx (-5deg);

-o-transform: skewx (-5deg);

-ms-transform: skewx (-5deg);

แปลง: skewx (-5deg);

-webkit-transform-Origin: 100% 0;

-moz-transform-Origin: 100% 0;

-O-Transform-Origin: 100% 0;

-MS-Transform-Origin: 100% 0;

Transform-Origin: 100% 0;

ในหมู่พวกเขาคำนำหน้า -ms- ซึ่งฉันมักจะเรียกคำนำหน้า Cat shit, มีการกำหนดเป้าหมายที่เบราว์เซอร์ IE9 ท้ายที่สุดเบราว์เซอร์ต่างประเทศนั้นอยู่ข้างหน้าเรามาก ฉันยังไม่เข้าใจมือเล็ก ๆ ของ IE9!

บทความนี้เป็นจอแสดงผลง่ายๆ รหัส CSS จำนวนมากและการวางตำแหน่งที่แน่นอนของการบินหิมะทั่วท้องฟ้าทำให้เอฟเฟกต์นี้โดยทั่วไปไม่มีโอกาสในการใช้งานในโครงการจริง ดังนั้นฉันขี้เกียจเกินไปที่จะพูดมากขึ้นดังนั้นฉันควรจะทิ้งเวลาไปดูละครญี่ปุ่น "ภาพอาชญากรรมครั้งสุดท้ายของ Ady" และรัก Keiko Kitagawa นั่นคือทั้งหมด

http://www.w3.org/html/logo/

CSS3 ใน HTML5? HTML5 ใน CSS3!

HTML5 และโลโก้ W3C ที่ได้รับการรับรองใหม่