إنشاء تأثير retro على الصور باستعمال CSS فقط


عمر الوريكات

كنت في الماضي قد قمت بإنشاء العديد من مثل هذا التأثير باستخدام الفوتوشوب، ولكن مع ظهور CSS3 وجلبها للكثير من الخصائص المدهشة فقد قررت أن أقوم بدرس حول كيفية إنشاء ذلك التأثير بمساعدة واستخدام التدرجات (gradients) والمرشحات (filters) الموجودة في CSS3.

Figure1-retro.thumb.jpg.80cd6e771c8b604d

سوف نستخدم التدرجات (gradients) والمرشحات (filters) الخاصة بلغة CSS لدمج العديد من الألوان المتداخلة لإنشاء التأثير المطلوب. إنّ دعم المتصفحات للمرشحات جيد جدًا فهو مدعوم في جميع المتصفحات الحديثة ما عدا متصفحات Internet Explorer ومتصفح Opera mini (أنقر هنا لمعلومات أكثر عن دعم المتصفحات).

كيف تقوم بإنشاء التأثير باستعمال CSS فقط

<div class="retro">
  <img src="images/retrofy-me.jpg" alt="Retro is cool!" />
</div>

حتى نقوم بإنشاء التأثير سنحتاج إلى صورة، لذلك قم بإضافة صورة باستخدام وسم `<img>`. وبما أنّ بعض تأثيرات CSS تعتمد على وجود عنصر حاوي من نوع block فسوف تكون الصورة موجودة داخل وسم `<div>` (يمكنك استخدام `<p>` بدلًا من `<div>` فكلاهما من نوع block ولكني أفضل استخدام div).

.retro {
  -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
  box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
  background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
  display: table;
}

.retro img {
  -webkit-filter: sepia(20%) brightness(10%) contrast(130%);
  filter: sepia(20%) brightness(10%) contrast(130%);
  position: relative;
  z-index: -1;
}

يمكنك استعمال تنسيقات CSS الموجودة في الأعلى لإنشاء تأثير retro على أي صورة.

كيف يعمل كل شيء

Figure2.thumb.jpg.c96bf5c7a173db5d2b349c

نبدأ تنسيقات CSS باستعمال خاصية `box-shadow` واعطائها القيمة (inset 0px 0px 100px rgba(0,0,20,1 مما يخلق توهجًا داخليًا بلون أزرق داكن وذلك لمحاكاة الصورة باهتة الحواف. ولكن هناك مشكلة وهو أن التأثير الذي تصنعه خاصية box-shadow لن يظهر لأنه سيكون موجودًا أسفل الصورة وسوف يتمدد على العرض الكامل للصفحة وهو ما لا نريده، ولحل تلك المشكلة سوف نضيف للصورة الخصائص position: relative و z-index: -1 حتى نجعل التأثير يظهر فوقها، كما أننا سوف نعطي الخاصية display: table للعنصر الأب حتى نمنع تمدده على كامل الصفحة ويكتفي فقط بالتمدد على أبعاد الصورة.

Figure3_(1).thumb.jpg.742565ccd8ea283386

لاحظ أننا استعملنا تدرجين؛ الأول (linear-gradient(top, rgba(255,145,0,0.2) 0%, rgba(255,230,48,0.2) 60% وسوف يعطي تدرجًا عموديًا من اللون البرتقالي إلى اللون الأصفر، وتسمح لنا قيم rgba بتقليل شفافية الألوان حتى نسمح للتدرج بالظهور وكأنه عبارة عن غشاء شفاف فوق الصورة.

Figure4_(1).thumb.jpg.ec7958b605b520f485

أمّا بالنسبة للتدرج الثاني (linear-gradient(20deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 35% فقد أضفناه للعنصر الأب (وسم div) ويتدرج من لون أحمر ذو شفافية 50% إلى نفس اللون ولكن بشفافية 0% وبزاوية 20 درجة لمحاكاة تأثير تسرب الضوء الجميل.

Figure5_(1).thumb.jpg.dde7c077b2706c1edb

تعمل التأثيرات حتى الآن بشكل جيد ولكن الصورة تبدو مسطحة كثيرًا، لذلك سوف نستعمل مرشحات CSS  كالتالي: (filter: brightness(10%) contrast(130%) sepia(20% للتعديل على الصورة قليلًا حتى تبدو أفضل، فخاصية brightness ستزيد سطوع الصورة بمقدار 10%، وخاصية التباين contrast تقوم بتدكين المناطق الداكنة وتفتيح المناطق الفاتحة، أمّا خاصية sepia فتضيف للصورة درجة من اللون البني المائل للصفار وبقيمة 20% حتى نحافظ على الألوان الأصلية للصورة.

خاتمة

كما رأيت، فبدمج خاصية gradient مع خاصية filter يمكننا إنشاء تأثيرات جميلة وعصرية وتشبه بدرجة كبيرة تلك التي يمكننا إنشاؤها باستخدام برنامج الفوتوشوب.

ترجمة -وبتصرّف- للمقال Create a Trendy Retro Photo Effect Purely with CSS لصاحبه Iggy.



2 اشخاص أعجبوا بهذا


تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن