في CSS3 ، باستخدام Box-Shadow و Border-Radius مباشرة على الصورة ، لا يمكن للمتصفح أن يقدم جيدًا. ومع ذلك ، إذا كنت تستخدم الصورة كصورة خلفية ، يمكن لمتصفح النمط المضافة أن يجعلها جيدة. سأشرح كيفية إنشاء تأثيرات مختلفة على نمط الصورة باستخدام المربع ، ودعم الحدود والانتقال.
سؤالمن خلال النظر إلى العرض التوضيحي ، لاحظنا أننا وضعنا حدود الحدود والمربع المدمج في السطر الأول من الصورة. يقوم Firefox بإحضار حدود الصورة للصورة ، لكنه لا يجعل الصناديق المدمجة. لا يتم تقديم آثار الكروم ولا رحلات السفاري.
.
الحدود: الصلبة 5px #000 ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
-webkit-box-shadow: inset 0 1px 5px RGBA (0،0،0 ، .5) ؛
-moz-box-shadow: inset 0 1px 5px rgba (0،0،0 ، .5) ؛
box-shadow: inset 0 1px 5px rgba (0،0،0 ، .5) ؛
}
تأثير Firefox :الكروم/سفاري
الحل البديلمن أجل العمل على الحدود والاحتفال بالشادو المدمج بشكل صحيح ، نحتاج إلى تحويل الصورة إلى صورة خلفية.
طريقة ديناميكيةمن أجل القيام بهذا العمل بشكل ديناميكي ، نحتاج إلى استخدام jQuery لإضافة صورة خلفية للف كل صورة. يضيف رمز JS التالي غلاف SPAN لكل صورة ، ومسار صورة الخلفية في المدى هو مسار الصورة.
الكود بسيط نسبيًا ، لا أعتقد أن هناك أي حاجة لشرح ذلك. إذا كنت لا تعرف ، يمكنك التحقق من واجهة برمجة تطبيقات jQuery مباشرة.
<script type = "text/javaScript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javaScript">
$ (وثيقة). ready (function () {
$ ("img"). load (function () {
$ (this) .wrap (function () {
إرجاع '<span style = "الموضع: النسبية ؛ العرض: inline-block ؛ الخلفية: url (' + $ (this) .attr ('src') + ') مركز مركز عدم التكرار ؛ العرض:' + $ (this) .width () + 'px ؛ height:' + $ (this) .height () + 'px ؛" /> '؛
}) ؛
$ (هذا) .css ("العتامة" ، "0") ؛
}) ؛
}) ؛
</script>
الإخراج
الرمز أعلاه سوف يخرج النتائج التالية:
<span style = "الموضع: النسبي ؛ العرض: inline block ؛ الخلفية: url (image.jpg) مركز مركز عدم التكرار ؛ العرض: 150 بكسل ؛ الارتفاع: 150px ؛">>
<img src = "image.jpg" style = "التعتيم: 0 ؛">
</span>
صورة دائريةأضف أننا نستخدم الحدود الحدودية لتحقيق تأثير الصور الدائرية ، كما يلي التأثير:
CSS:
.Circle .Image-wrap {
-webkit-border-Radius: 50em ؛
-Moz-Border-Radius: 50em ؛
الحدود الراديوس: 50em ؛
}
نمط البطاقةفيما يلي صورة على غرار البطاقة ، باستخدام شادوز مربع مضمن متعددة.
CSS:
.Card .Image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inset 0 -1px 0 rgba (0،0،0 ، .4) ؛
-moz-box-shadow: inset 0 0 1px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inset 0 -1px 0 rgba (0،0،0 ، .4) ؛
box -shadow: inset 0 0 1px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inmet 0 -1px 0 rgba (0،0،0 ، .4) ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
أسلوب الإغاثةأدناه هو تأثير الإغاثة.
CSS:
.embossed .image-wrap {
-webkit -box -shadow: inset 0 0 2px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inset 0 -7px 0 rgba (0،0،0 ، .6) ، inset 0 -9px 0 rgba (255 ،
-moz -box -shadow: inset 0 0 2px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inmet 0 -7px 0 rgba (0،0،0 ، .6) ، inset 0 -9px 0 rgba (2555،255 ،
box -shadow: inset 0 0 2px rgba (0،0،0 ، .8) ، inset 0 2px 0 rgba (255،255،255 ، .5) ، inset 0 -7px 0 rgba (0،0،0 ، .6) ، inset 0 -9px 0 rgba (255،25555 ، .3) ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
أسلوب الإغاثة المرنمقارنة بأسلوب النقش ، يضيف النمط الجديد سمة طمس 1 بكسل.
CSS:
.soft-embossed .image-wrap {
-webkit -box -shadow: inset 0 0 4px rgba (0،0،0،1) ، inset 0 2px 1px rgba (255،255،255 ، .5) ، inset 0 -9px 2px rgba (0،0،0 ، .6) ،
-moz -box -shadow: inset 0 0 4px rgba (0،0،0،1) ، inset 0 2px 1px rgba (255،255،255 ، .5) ، inset 0 -9px 2px rgba (0،0،0 ، .6) ،
Box -Shadow: Inset 0 0 4px RGBA (0،0،0،1) ، Inset 0 2PX 1PX RGBA (255،255،255 ، .5) ، Inset 0 -9px 2px RGBA (0،0،0 ، .6) ، inset 0 -12px 2px rgba (255،255 ،
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
نمط قطعاستخدم المربع المدمج المربع لتحقيق تأثير القطع.
CSS:
.
-webkit-box-shadow: 0 1px 0 rgba (255،255،255 ، .2) ، أقحم 0 4px 5px rgba (0،0،0 ، .6) ، inset 0 1px 0 rgba (0،0،0 ، .6) ؛
-moz-box-shadow: 0 1px 0 rgba (255،255،255 ، .2) ، أقحم 0 4px 5px rgba (0،0،0 ، .6) ، inset 0 1px 0 rgba (0،0،0 ، .6) ؛
box-shadow: 0 1px 0 rgba (255،255،255 ، .2) ، inset 0 4px 5px rgba (0،0،0 ، .6) ، inmet 0 1px 0 rgba (0،0،0 ، .6) ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
التشوه والتوهجفي هذا المثال ، نضيف سمة الانتقال إلى عبوة الصور. عندما ينزلق الماوس ، سيتغير من زاوية مستديرة إلى شكل دائري. ثم نستخدم صناديق متعددة من الصناديق لتحقيق التأثير المضيء.
CSS:
.
-بكيت الانتقال: 1S ؛
-الموز ترانس: 1S ؛
الانتقال: 1S ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
.
-webkit-box-shadow: 0 0 20px RGBA (255،255،255 ، .6) ، inset 0 0 20px rgba (255،255،255،1) ؛
-moz-box-shadow: 0 0 20px RGBA (255،255،255 ، .6) ، inset 0 0 20px rgba (255،255،255،1) ؛
box-shadow: 0 0 20px rgba (255،255،255 ، .6) ، inset 0 0 20px rgba (255،255،255،1) ؛
-webkit-border-Radius: 60em ؛
-moz-border-Radius: 60em ؛
الحدود الحدودية: 60em ؛
}
تسليط الضوء على الآثاريتم تحقيق تأثير الضوء عن طريق إضافة: بعد الفئة الزائفة إلى العنصر.
CSS:
.glossy .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ؛
-moz-box-shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ؛
box -shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
.glossy .image-wrap: بعد {
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 50 ٪ ؛
أعلى: 0 ؛
اليسار: 0 ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
الخلفية: -Moz-Linar-Radient (TOP ، RGBA (255،255،255،0.7) 0 ٪ ، RGBA (255،255،255 ، .1) 100 ٪) ؛
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، RGBA (255،255،255،0.7)) ، توقف الألوان (100 ٪ ، RGBA (255،255،255 ، .1)))) ؛
الخلفية: Linear-Radient (TOP ، RGBA (255،255،255،0.7) 0 ٪ ، RGBA (255،255،255 ، .1) 100 ٪) ؛
}
تأثير الانعكاسفي هذا المثال ، ننقل أبرز ما إلى أسفل لتحقيق تأثير الانعكاس.
CSS:
.
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 30 بكسل ؛
أسفل: -31px ؛
اليسار: 0 ؛
-webkit-border-top-left-radius: 20px ؛
-webkit-border-top-right-radius: 20px ؛
-Moz-Border-Radius-Topleft: 20px ؛
-الموز براديوس-توبريت: 20 بكسل ؛
الحدود إلى اليسار اليساري: 20 بكسل ؛
راديوس الصرف الحدودي: 20 بكسل ؛
الخلفية: -Moz-Linar-Radient (TOP ، RGBA (0،0،0 ، .3) 0 ٪ ، RGBA (255،255،255،0) 100 ٪) ؛
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، RGBA (0،0،0 ، .3)) ، توقف اللون (100 ٪ ، RGBA (255،255،255،0))) ؛
الخلفية: الدرجات الخطية (TOP ، RGBA (0،0،0 ، .3) 0 ٪ ، RGBA (255،255،255،0) 100 ٪) ؛
}
.
الموقف: قريب
أعلى: -8px ؛
}
أبرز وانعكاساتفي هذا المثال ، نستخدم: قبل و: بعد الجمع بين النقاط البارزة وتأثيرات الانعكاس.
CSS:
.glossy-Replection .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ، inset 0 1px 0 rgba (255،255،255 ، .6) ؛
-moz-box-shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ، inset 0 1px 0 rgba (255،255،255 ، .6) ؛
box -shadow: inset 0 -1px 0 rgba (0،0،0 ، .5) ، inset 0 1px 0 rgba (255،255،255 ، .6) ؛
-بكيت الانتقال: 1S ؛
-الموز ترانس: 1S ؛
الانتقال: 1S ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
.glossy-Replection .Image-Wrap: قبل {
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 50 ٪ ؛
أعلى: 0 ؛
اليسار: 0 ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
الخلفية: -Moz-Linar-Radient (TOP ، RGBA (255،255،255،0.7) 0 ٪ ، RGBA (255،255،255 ، .1) 100 ٪) ؛
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، RGBA (255،255،255،0.7)) ، توقف الألوان (100 ٪ ، RGBA (255،255،255 ، .1)))) ؛
الخلفية: Linear-Radient (TOP ، RGBA (255،255،255،0.7) 0 ٪ ، RGBA (255،255،255 ، .1) 100 ٪) ؛
}
.glossy-Replection .Image-Wrap: بعد {
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 30 بكسل ؛
أسفل: -31px ؛
اليسار: 0 ؛
-webkit-border-top-left-radius: 20px ؛
-webkit-border-top-right-radius: 20px ؛
-Moz-Border-Radius-Topleft: 20px ؛
-الموز براديوس-توبريت: 20 بكسل ؛
الحدود إلى اليسار اليساري: 20 بكسل ؛
راديوس الصرف الحدودي: 20 بكسل ؛
الخلفية: -Moz-Linar-Radient (TOP ، RGBA (230،230،230 ، .3) 0 ٪ ، RGBA (230،230،230،0) 100 ٪) ؛
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، RGBA (230،230،230 ، .3)) ، توقف اللون (100 ٪ ، RGBA (230،230،230،0)))) ؛
الخلفية: الدرجات الخطية (TOP ، RGBA (230،230،230 ، .3) 0 ٪ ، RGBA (230،230،230،0) 100 ٪) ؛
}
نمط الشريطفي هذا المثال ، نستخدم: بعد تحقيق تأثير الشريط.
CSS:
.tape .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba (0،0،0 ، .7) ، inset 0 2px 0 rgba (255،255،255 ، .3) ، inset 0 -1px 0 rgba (0،0،0 ، .5) ، 0 1px 3px rgba (0،0،0 ، .4) ؛
-moz-box-shadow: inset 0 0 2px rgba (0،0،0 ، .7) ، inset 0 2px 0 rgba (255،255،255 ، .3) ، inset 0 -1px 0 rgba (0،0،0 ، .5) ، 0 1px 3px 3px rgba (0،0،0 ، .4) ؛
box -shadow: inset 0 0 2px rgba (0،0،0 ، .7) ، inset 0 2px 0 rgba (255،255،255 ، .3) ، inmet 0 -1px 0 rgba (0،0،0 ، .5) ، 0 1px 3px rgba (0،0،0 ، .4) ؛
}
.tape .image-wrap: بعد {
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 60px ؛
الارتفاع: 25 بكسل ؛
أعلى: -10px ؛
اليسار: 50 ٪ ؛
الهامش اليساري: -30 بكسل ؛
الحدود: Solid 1PX RGBA (137،130،48 ، .2) ؛
الخلفية: -Moz-Linar-Radient (TOP ، RGBA (254،243،127 ، .6) 0 ٪ ، RGBA (240،224،54 ، .6) 100 ٪) ؛
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0 ٪ ، RGBA (254،243،127 ، .6)) ، توقف اللون (100 ٪ ، RGBA (240،224،54 ، .6))) ؛
الخلفية: الدرجات الخطية (TOP ، RGBA (254،243،127 ، .6) 0 ٪ ، RGBA (240،224،54 ، .6) 100 ٪) ؛
-webkit-box-shadow: inset 0 1px 0 rgba (255،255،255 ، .3) ، 0 1px 0 rgba (0،0،0 ، .2) ؛
}
التشوه والتلوينفي هذا المثال ، نستخدم: بعد العنصر لتحقيق تأثير التدرج الشعاعي عندما يمر الماوس.
CSS:
.
الموقف: قريب
-بكيت الانتقال: 1S ؛
-الموز ترانس: 1S ؛
الانتقال: 1S ؛
-webkit-border-Radius: 20px ؛
-Moz-Border-Radius: 20px ؛
الحدود الحدودية: 20 بكسل ؛
}
.
-بكيت براديوس: 30EM ؛
-moz-border-Radius: 30em ؛
الحدود الحدودية: 30em ؛
}
.
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
أعلى: 0 ؛
اليسار: 0 ؛
-بكيت الانتقال: 1S ؛
-الموز ترانس: 1S ؛
الانتقال: 1S ؛
-بكيت براديوس: 30EM ؛
-moz-border-Radius: 30em ؛
الحدود الحدودية: 30em ؛
}
.
الخلفية: -webkit -regient (شعاعي ، 50 ٪ 50 ٪ ، 40 ، 50 ٪ 50 ٪ ، 80 ، من (RGBA (0،0،0،0)) ، إلى (RGBA (0،0،0،1)))) ؛
الخلفية: -Moz-Radial-Radient (50 ٪ 50 ٪ ، Circle ، RGBA (0،0،0،0) 40px ، RGBA (0،0،0،1) 80px) ؛
}
جولة الحافة الريشيمكننا أيضًا استخدام التدرجات الشعاعية لتوليد أقنعة لتحقيق تأثير الريش.
CSS:
.
الموقف: قريب
-بكيت براديوس: 30EM ؛
-moz-border-Radius: 30em ؛
الحدود الحدودية: 30em ؛
}
.
الموقف: مطلق ؛
محتوى: ' '؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
أعلى: 0 ؛
اليسار: 0 ؛
الخلفية: -webkit -regient (شعاعي ، 50 ٪ 50 ٪ ، 50 ، 50 ٪ 50 ٪ ، 70 ، من (RGBA (255،25555،0)) ، إلى (RGBA (255،255،255،1)))) ؛
الخلفية: -Moz-Radial-Radient (50 ٪ 50 ٪ ، Circle ، RGBA (255،255،255،0) 50px ، RGBA (255،255،255،1) 70px) ؛
}
توافق المتصفحيعمل هذا التنفيذ بشكل جيد في معظم المتصفحات التي تدعم Radius الحدود ، و Box-Shadow ،: قبل و: بعد الميزات (مثل Chrome و Firefox و Safari). في المتصفحات التي لا تدعم ميزات جديدة ، سيتم عرض الصورة الأصلية فقط.
قم بإنشاء تطبيقك الخاص
بمساعدة: قبل و: بعد الفئات الزائفة ، يمكنك إنشاء العديد من الأنماط للصور ، ويمكنك محاولة إنشاء تأثيرات جديدة بنفسك.