مربع الظل
مع CSS3 يمكنك إنشاء تأثيرات الظل!
CSS3 تأثيرات الظل
مع CSS3 يمكنك إضافة الظل إلى النص والعناصر.
في هذا الفصل سوف تتعلم حول الخصائص التالية:
-
text-shadow -
box-shadow
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- يحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 الظل النص
وCSS3 text-shadow الملكية تنطبق الظل إلى النص.
في أبسط استخدامه، يمكنك فقط تحديد الظل الأفقي (2px) وظلال العمودي (2px):
تأثير الظل النص!
المقبل، إضافة لون إلى الظل:
تأثير الظل النص!
ثم، إضافة طمس الأثر في الظل:
تأثير الظل النص!
يظهر المثال التالي نص أبيض مع الظل الأسود:
تأثير الظل النص!
يوضح المثال التالي الظل النيون الوهج الأحمر:
تأثير الظل النص!
الظلال متعددة
لإضافة الظل أكثر من واحد إلى النص، يمكنك إضافة قائمة مفصولة بفواصل من الظلال.
يظهر المثال التالي النيون توهج الظل الأحمر والأزرق:
تأثير الظل النص!
يظهر المثال التالي نص أبيض مع أسود، أزرق، أزرق غامق، والظل:
تأثير الظل النص!
مثال
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
انها محاولة لنفسك » CSS3 box-shadow الملكية
وCSS3 box-shadow ممتلكات تنطبق الظل لعناصر.
في أبسط استخدامه، يمكنك فقط تحديد الظل الأفقي والرأسي الظل:
المقبل، إضافة لون إلى الظل:
المقبل، إضافة طمس الأثر في الظل:
يمكنك أيضا إضافة الظلال إلى :: قبل وبعد :: الزائفة الطبقات، لإنشاء تأثير مثيرة للاهتمام:
مثال
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} انها محاولة لنفسك » بطاقات
مثال باستخدام box-shadow الملكية لإنشاء بطاقات ورقة تشبه:
1
1 يناير 2016
Hardanger، النرويج
مثال
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
تحاول ذلك (بطاقة النص) » تحاول ذلك (بطاقة صورة)» اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
خصائص الظل CSS3
يسرد الجدول التالي خصائص CSS3 الظل:
| الملكية | وصف |
|---|---|
| box-shadow | ويضيف واحد أو أكثر من الظلال إلى عنصر |
| text-shadow | ويضيف واحد أو أكثر من الظلال إلى نص |