วิธีสร้างโลโก้ Gmail ด้วย CSS3
สองสามเดือนที่ผ่านมาฉันแสดงวิธีสร้างโลโก้ฟีด RSS ด้วย CSS3 ฉันคิดว่ามันสนุกที่จะสร้างบางสิ่งที่ซับซ้อนขึ้นเล็กน้อย ในโพสต์ของวันนี้ฉันจะแสดงให้คุณเห็นว่าจะสร้างได้อย่างไร แต่มีโลโก้ Gmail สองแบบโดยใช้ CSS3.
ทางลัดไปยัง:
- Gmail logo CSS tutorial # 1 | ดูตัวอย่าง
- โลโก้ Gmail สอน CSS # 2 | ดูตัวอย่าง
โลโก้ Gmail # 1
โลโก้แรกนี้เรียบง่ายและสร้างได้ง่าย โดยไม่ต้องกังวลใจต่อไปนี่คือขั้นตอน เริ่มจากการเริ่มโปรแกรมแก้ไขโค้ดที่คุณโปรดปรานและใส่รหัส HTML ต่อไปนี้แล้วบันทึกเป็น โลโก้ gmail.html.
โลโก้ Gmail CSS
เพิ่มสไตล์ CSS ต่อไปนี้ระหว่าง เพื่อรีเซ็ตค่า CSS เริ่มต้น.
.gmail-logo, .gmail-logo *, .gmail-logo *: ก่อนหน้านี้. gmail-logo *: หลัง margin: 0; padding: 0; พื้นหลัง: โปร่งใส ชายแดน: 0; เค้าร่าง: 0; จอแสดงผล: บล็อก; แบบอักษร: ปกติ 0/0 serif ปกติ;
รหัส CSS ต่อไปนี้ให้พื้นหลังสีแดงของโลโก้ Gmail และด้านที่โค้งมน.
.gmail-logo margin: 110px auto; พื้นหลัง: rgb (201, 44, 25); ความกว้าง: 600px; ความสูง: 400px; border-top: 4px solid rgb (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
จากนั้นเราดำเนินการสร้างกล่องสีขาวภายในพื้นหลังสีแดง.
.gmail-logo .gmail-box ล้น: ซ่อนอยู่; ลอย: ด้านซ้าย; ความกว้าง: 440px; ความสูง: 400px; กำไรขั้นต้น: 0 0 0 80px; พื้นหลัง: สีขาว; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
ในการสร้างเอฟเฟกต์ "M" สีแดงเราจะสร้างกล่องที่มีเส้นขอบสีแดงก่อน.
.gmail-logo .gmail-box: ก่อน ตำแหน่ง: ญาติ; เนื้อหา: "; ดัชนี z: 1; พื้นหลัง: สีขาวลอย: ซ้าย; ความกว้าง: 320px; ความสูง: 320px; ชายแดน: 100px rgb ที่เป็นของแข็ง (201, 44, 25) ขอบ: -310px 0 0 -40px; ชายแดน - รัศมี: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: หมุน (45deg); -webkit- แปลง: หมุน (45deg); -o-transform: หมุน (45deg) );
จากนั้นเราก็ซ่อนด้านที่มากเกินไปโดยให้ "M" ที่สมบูรณ์เป็นสีแดง.
.gmail-logo .gmail-box ล้น: ซ่อนอยู่;
ทีนี้, ขอขอบสีแดงสองเส้น, ดูซองจดหมาย.
.gmail-logo .gmail-box: หลังจาก content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : หมุน (45deg); -webkit- แปลง: หมุน (45deg); -moz- แปลง: หมุน (45deg);
เราเกือบเสร็จแล้ว ลองเพิ่มการไล่ระดับสีลงในซองจดหมายสีแดง.
.gmail-logo: หลัง content: "; position: relative; z-index: 2; content:"; ลอย: ด้านซ้าย; ขอบด้านบน: -404px; ความกว้าง: 600px; ความสูง: 408px; จอแสดงผล: บล็อก; พื้นหลัง: -moz-linear-gradient (ด้านบน, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1) ) 100%); พื้นหลัง: -o-linear-gradient (บน, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1) ) 100%); พื้นหลัง: -webkit-gradient (เชิงเส้นด้านบนซ้ายล่างซ้ายสีหยุด (0%, rgba (255, 255, 255, 0.3)), / * color-stop (30%, rgba (255, 255, 255 , 0.2)), * / color-stop (100%, rgba (255, 255, 255, 0.1)));
สุดท้าย แต่ไม่ท้ายสุดขอให้สีที่แตกต่างกันเมื่อวางเมาส์ไว้ เพิ่ม HTML DOCTYPE ต่อไปนี้ก่อน
และสไตล์ CSS ต่อไปนี้มาก่อน
.gmail-logo: hover background: # 313131; border-color: # 313131; / เคอร์เซอร์: ตัวชี้; * / .gmail-logo: hover .gmail-box: ก่อน border-color: # 313131; .gmail-logo: hover .gmail-box: หลังจาก border-color: # 313131; ขอบล่างสี: # fff; ชายแดนขวาสี: # fff;
ดูตัวอย่าง | ดาวน์โหลดไฟล์ต้นฉบับ
โลโก้ Gmail # 2
ต่อไปเราจะสร้างโลโก้ Gmail จากมุมมองอื่นโดยมีเอฟเฟกต์ 3 มิติเล็กน้อย เราจะเริ่มต้นด้วยมาร์กอัพ HTML พื้นฐาน.
โลโก้ Gmail 2
เนื่องจากโลโก้มีมุมมองที่แตกต่างเราจะเริ่มต้นด้วยการหมุนมันเล็กน้อยและสร้างเลเยอร์ที่ต้องการ (ซึ่งเราจะเรียกพวกมันว่า องค์ประกอบ) ในลำดับ.
# gmail-logo2 margin: 0 auto; จอแสดงผล: บล็อก; ความกว้าง: 380px; ความสูง: 290px; -moz-เปลี่ยน: หมุน (6deg); -webkit-เปลี่ยน: หมุน (6deg); -o-เปลี่ยน: หมุน (6deg); เปลี่ยน: หมุน (6deg); # gmail-logo2 .element1 display: block; ความกว้าง: 380px; ความสูง: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; จอแสดงผล: บล็อก; ความกว้าง: 380px; ความสูง: 290px; กำไรขั้นต้น: -290px 0 0 0;
การออกแบบ .element1 :: ก่อน
# gmail-logo2 .element1 :: before content: "; position: relative; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -moz-transform: หมุน (3deg); -webkit-transform: หมุน (3deg); -o-transform: หมุน (3deg); แปลง: หมุน (3deg); แปลง: หมุน (3deg); รัศมีรัศมี: 22px 0 0 20px; -moz -bore-radius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10 , 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
การออกแบบ .element1 :: หลังจาก
# gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 238px; -moz-transform: หมุน (3deg); -webkit- เปลี่ยน: หมุน (3deg); -o-transform: หมุน (3deg); แปลง: หมุน (3deg); เปลี่ยนรัศมี: 0 18px 26px 0; -webkit -border-radius: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10 , 0), -6px 7px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0 ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);
การออกแบบ .element2 :: ก่อน
# gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: หมุน (6.8deg); -webkit- แปลง: หมุน (6.8deg); -o- แปลง: หมุน (6.8deg); แปลง: หมุน (6.8deg); กล่องเงา: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box - เงา: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
การออกแบบ .element2 :: หลังจาก
# gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25); width: 310px; height: 12px; box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10 , 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0 ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
การออกแบบ .element3 :: ก่อน
# gmail-logo2 .element3 :: before content: "; position: relative; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-transform: หมุน (3deg); -webkit- เปลี่ยน: หมุน (3deg); -o- แปลง: หมุน (3deg); แปลง: หมุน (3deg);
การออกแบบ .element3 :: หลังจาก
# gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 22px; height: 236px; -moz-transform: หมุน (3.0deg); -webkit- เปลี่ยน: หมุน (3.0deg); -o-transform: หมุน (3.0deg); แปลง: หมุน (3.0deg); กล่องเงา: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb ( 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
การออกแบบ .element4 :: ก่อน
# gmail-logo2 .element4 :: before content: "; position: relative; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 192px; -moz-transform: หมุน (-49deg); -webkit-transform: หมุน (-49deg); -o-transform: หมุน (-49deg); แปลง: หมุน (-49deg); กล่องเงา: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0 ); -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);
การออกแบบ .element4 :: หลังจาก
# gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 54px; height: 186px; รัศมี - รัศมี: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: หมุน (53deg); -webkit- แปลง: หมุน (53deg); -o- แปลง: หมุน (53deg); แปลง: หมุน (53deg);
การออกแบบ .Element5 :: ก่อน
# gmail-logo2 .element5 :: before content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: หมุน (55deg); -o-transform: หมุน (55deg); -webkit-transform: หมุน (55deg); แปลง: หมุน (55deg);
การออกแบบ .Element5 :: หลังจาก
# gmail-logo2 .element5 :: หลัง ตำแหน่ง: ญาติ; เนื้อหา: "; ระยะห่าง: 115px 0 0 150px; float: left; display: block; พื้นหลัง: rgb (201, 44, 25); ความกว้าง: 2px; ความสูง: 150px; -moz-transform: หมุน (-50deg); - webkit-transform: หมุน (-50deg); -o-transform: หมุน (-50deg); transform: หมุน (-50deg);
การปรับระดับความสำคัญของ ดัชนี z.
# gmail-logo2 .element1 :: before z-index: 3; # gmail-logo2 .element1 :: หลัง z-index: 1; / * # gmail-logo2 .element2 :: ก่อนหน้า * / # gmail-logo2 .element2 :: after z-index: 2; # gmail-logo2 .element3 :: before z-index: 5; # gmail-logo2 .element3 :: หลัง z-index: 1; # gmail-logo2 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: หลังจาก z-index: 3; / * # gmail-logo2 .element5 :: before # gmail- logo2. องค์ประกอบ 5 :: after * /
เราเกือบเสร็จแล้ว โลโก้ Gmail ของคุณควรมีลักษณะดังนี้:
สุดท้ายให้สีที่แตกต่างกันเมื่อวางเมาส์ไว้.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1); # gmail-logo2: hover .element1 :: before box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element1 :: หลังจาก box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 0pgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4) -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4) -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4) # gmail-logo2: hover .element2 :: before box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element3 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element4 :: before box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 , 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4);
ดูตัวอย่าง | ดาวน์โหลดไฟล์ต้นฉบับ
หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Irham Kendeni สำหรับ Hongkiat.com Irham หรือที่รู้จักกันในนาม Indaam เป็นผู้ออกแบบและพัฒนาเว็บไซต์จากประเทศอินโดนีเซีย เขายังรักการพัฒนาธีม CSS และ WordPress.
