CSS-الظل: كيفية جعل

دون الظلام هناك أي ضوء من دون الظل أي شكل. حتى الأساسية أداة الماكياج للمرأة يسمى "الظل". إذا كنت ترغب في جلب الجمال إلى صفحاتك، تحتاج إلى وضع التركيز الصحيح - اضافة CSS الظل حيث هناك حاجة إليها.

والمواد الواردة أدناه مساعدتك على تعلم كيفية تثبيت الظل أو لمنع الصور باستخدام CSS رمز.

CSS-الظل. بناء الجملة

في الواقع مربع الظل، حيث مربع - كتلة والظل - وهذا هو في حد ذاته الظل.

قانون مكتوب في الأقواس:

{مربع الظل: 11px 22px 33px 44px # 333333؛}.

خط يخبرنا بأن يتم تعيين وحدة ستاندرد مع دائرة نصف قطرها الظل بكسل. يتم فك البيانات على النحو التالي:

• 11px - نسبة إلى كتلة على المحور X (القيمة الإيجابية (20px تعويض الظل) سيتحول إلى الظل الصحيح، سلبية (-37px) - إلى اليسار)؛
• 22px - نزوح الظل فيما يتعلق Y-محور كتلة (الرصاص قيمة إيجابية (5px) إلى التحول من الظل أسفل سلبي (-17px) - متابعة).
• 33px - هذه المعلمة طمس، وارتفاع عدد وقوة التأثير.
• 44px - دائرة نصف قطرها من الظلال، ويتناسب طرديا.
• # 333333 - اللون، التي رسمت في الظل.

المعلمات الثلاث الأخيرة اختيارية ويمكن ببساطة أن حذفت في السلسلة، أي {مربع الظل: 10px 13px؛ } - .. مثل هذا الخط غير صحيحة (لون الظل مطابق للون النص في كتلة).

وهكذا، وخلق الظلال على صفحات موقعك ليس صعوبة، ولكن العديد من الآثار لطيفة تبحث يمكنك خلق! جعل طفلك فريدة من نوعها، الفذة، لأن التصميم هو المهم، كل التفاصيل، كل التفاصيل. هنا، على ما يبدو، لا شيء خاص، لكنه أكثر إثارة للاهتمام وجذابة.

النظر في بعض الأمثلة التوضيحية، يبدو كظل CSS-كتلة وفقا لالترميز:

1. {صندوق الظل: 25px 25px؛} - تعويض CSS الظل محاور 25 بكسل.
2. {صندوق الظل: 25px 25px 10px؛} - CSS-الظل تعويض محاور 25 بكسل وعدم وضوح حواف 10 بكسل.
3. {صندوق الظل: 25px 25px 10px 5px؛} - CSS-الظل تعويض محاور 25 بكسل، طمس حواف 10 بكسل ودائرة نصف قطرها محدد سلفا من 5 بكسل
4. {صندوق الظل: 25px 25px 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 10px 5px # ffa500}.

صور الظل

بالإضافة إلى وحدات على الموقع سيكون بالتأكيد الصور والصور والخلفيات - كل هذه العناصر أيضا تبدو أكثر إثارة للاهتمام مع الظلال. يمكنك رسم الصور في محررات قبل صورة ولصقها على صفحة بالفعل مع الظلال. ولكن، أولا، أنه ليس من الممكن دائما لأسباب مختلفة، بما في ذلك بسبب الافتقار إلى المهارات في العمل مع الرسومات، وثانيا، يتم إضافة أي تلاعب صورة له، "الوزن"، ومثل هذه الصورة قد يبطئ جيدا أسفل تحميل الصفحة. في هذه الحالة، يمكنك جعل الصور CSS-الظل.

الحل الأكثر بسيطة والصحيح نحويا لهذه المشكلة - إنشاء وحدة، فإن الخلفية في الصورة Kotormo. بعد ذلك، يمكنك جعل الظل اللازمة للوحدة وهي ظاهرة على خلفية صورة:

• .block1 {مربع الظل: أقحم 0 0 11px 9px # 9e9e9e. العرض: 480px؛ الطول: 360px؛ خلفية: رابط (صور / charlize_theron_2.jpg) 0 0 عدم تكرار؛}

في هذا المثال، فإننا نخلق الظل الداخلي مع أي تعويض من المحاور، مع دائرة نصف قطرها طمس، اللون المحدد، الطول والعرض من الكتلة، وخلفية (خلفية) عين kuartinku. ونتيجة لذلك، نحصل على صورة الظل الداخلي.

توافق على إنشاء الظلال باستخدام CSS رمز - انها بسيطة جدا، ولكن مثيرة، والأهم من ذلك - ممارسة مفيدة.