CSS เงา: วิธีการทำ

โดยไม่ต้องมืดมีแสงโดยไม่ต้องเฉดสีรูปแบบไม่มี แม้พื้นฐานเครื่องมือแต่งหน้าสำหรับผู้หญิงที่เรียกว่า "เงา". หากคุณต้องการที่จะนำความสวยงามให้กับหน้าเว็บของคุณคุณจำเป็นต้องวางเน้นขวา - เพิ่ม CSS เงาซึ่งเป็นสิ่งจำเป็น

เนื้อหาที่นำเสนอดังต่อไปนี้จะช่วยให้คุณเรียนรู้วิธีการติดตั้งที่ร่มหรือเพื่อป้องกันภาพโดยใช้ CSS รหัส

CSS เงา วากยสัมพันธ์

ที่จริงกล่องเงาที่กล่อง - บล็อกและเงา - นี้เป็นเงาตัวเอง

รหัสเขียนในวงเล็บ:

{กล่องเงา: 11px 22px 33px 44px # 333333;}

สายบอกเราว่าหน่วยที่ถูกกำหนดเป็นมาตรฐานที่มีรัศมีเงาพิกเซล ข้อมูลจะถูกถอดรหัสดังต่อไปนี้:

• 11px - เงาชดเชยเทียบกับบล็อกบนแกน X (ค่าบวก (20px) จะเปลี่ยนไปเงาขวาลบ (-37px) - ไปทางซ้าย);
• 22px - displacements เงาเกี่ยวกับแกน Y ของบล็อก (ค่าบวก (5px) นำไปสู่การเปลี่ยนแปลงของสีลงลบ (-17px) - ถึง);
• 33px - พารามิเตอร์เบลอนี้สูงกว่าจำนวนที่แข็งแกร่งผล;
• 44px - รัศมีของเงาและเป็นสัดส่วนโดยตรง;
• # 333333 - สีซึ่งเป็นภาพวาดในที่ร่ม

สามพารามิเตอร์ที่ผ่านมาเป็นตัวเลือกและสามารถก็จะถูกตัดออกในสตริงคือ {กล่องเงา: 10px 13px; } - .. เช่นสายไม่ได้ไม่ถูกต้อง (สีเงาเป็นเหมือนสีของข้อความในบล็อก)

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

พิจารณาตัวอย่างเป็นตัวอย่างบางส่วนก็มีลักษณะเหมือนเงา CSS บล็อกตามการเข้ารหัส:

1. {กล่องเงา: 25 พิกเซล 25 พิกเซล;} - CSS เงาชดเชยแกน 25 พิกเซล
2. {กล่องเงา: 25 พิกเซล 25 พิกเซล 10px;} - CSS เงาชดเชยแกน 25 พิกเซลและขอบเบลอของภาพ 10 พิกเซล
3. {กล่องเงา: 25 พิกเซล 25 พิกเซล 10px 5px;} - CSS เงาชดเชยแกน 25 พิกเซล, เบลอขอบ 10 พิกเซลและรัศมีที่กำหนดไว้ 5 พิกเซล
4. {กล่องเงา: 25 พิกเซล 25 พิกเซล 10px 5px # 9e9e9e;} - CSS เงาชดเชยแกน 25 พิกเซล, เบลอขอบ 10 พิกเซล, ระบุรัศมี 5 พิกเซลและสี

เงา

เพื่อสร้างความสวยงามมากขึ้น, สง่างามและเป็นต้นฉบับเฉดสีที่มีผลกระทบที่แตกต่างกัน คุณสามารถทำให้เงาภายใน มันเป็นรหัสพอที่จะระบุพารามิเตอร์ของ "แทรก" คำอธิบายเพิ่มเติมของพารามิเตอร์ที่จะไปตามปกติ:

{กล่องเงา: ภาพประกอบ 4px 2px 6px # 9e9e9e;}

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

{กล่องเงา: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}

ภาพเงา

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

วิธีการแก้ปัญหาที่ง่ายที่สุดและถูกต้อง syntactically ปัญหานี้ - การสร้างหน่วย, พื้นหลังในภาพของคุณจะ Kotormo ถัดไปคุณจะทำให้สีที่จำเป็นสำหรับหน่วยและพวกเขาจะปรากฏบนภาพพื้นหลัง:

• .block1 {กล่องเงา: ภาพประกอบ 0 0 11px 9px # 9e9e9e; ความกว้าง: 480px; ความสูง: 360px; พื้นหลัง:: url (images / charlize_theron_2.jpg) 0 0 ไม่ซ้ำ;}

ในตัวอย่างนี้เราจะสร้างเงาภายในโดยไม่มีการชดเชยของแกนที่มีรัศมีเบลอสีที่กำหนดความสูงและความกว้างของบล็อกและพื้นหลัง (พื้นหลัง) ได้รับการแต่งตั้ง kuartinku เป็นผลให้เราได้รับภาพของเงาด้านใน

เห็นด้วยที่จะสร้างเงาใช้ CSS รหัส - มันสวยเรียบง่าย แต่น่าตื่นเต้นและที่สำคัญที่สุด - การออกกำลังกายที่มีประโยชน์