البحث في الموقع

كنت في الماضي قد قمت بإنشاء العديد من مثل هذا التأثير باستخدام الفوتوشوب، ولكن مع ظهور CSS3 وجلبها للكثير من الخصائص المدهشة فقد قررت أن أقوم بدرس حول كيفية إنشاء ذلك التأثير بمساعدة واستخدام التدرجات (gradients) والمرشحات (filters) الموجودة في CSS3. سوف نستخدم التدرجات (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 على أي صورة. كيف يعمل كل شيء نبدأ تنسيقات CSS باستعمال خاصية `box-shadow` واعطائها القيمة (inset 0px 0px 100px rgba(0,0,20,1 مما يخلق توهجًا داخليًا بلون أزرق داكن وذلك لمحاكاة الصورة باهتة الحواف. ولكن هناك مشكلة وهو أن التأثير الذي تصنعه خاصية box-shadow لن يظهر لأنه سيكون موجودًا أسفل الصورة وسوف يتمدد على العرض الكامل للصفحة وهو ما لا نريده، ولحل تلك المشكلة سوف نضيف للصورة الخصائص position: relative و z-index: -1 حتى نجعل التأثير يظهر فوقها، كما أننا سوف نعطي الخاصية display: table للعنصر الأب حتى نمنع تمدده على كامل الصفحة ويكتفي فقط بالتمدد على أبعاد الصورة. لاحظ أننا استعملنا تدرجين؛ الأول (linear-gradient(top, rgba(255,145,0,0.2) 0%, rgba(255,230,48,0.2) 60% وسوف يعطي تدرجًا عموديًا من اللون البرتقالي إلى اللون الأصفر، وتسمح لنا قيم rgba بتقليل شفافية الألوان حتى نسمح للتدرج بالظهور وكأنه عبارة عن غشاء شفاف فوق الصورة. أمّا بالنسبة للتدرج الثاني (linear-gradient(20deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 35% فقد أضفناه للعنصر الأب (وسم div) ويتدرج من لون أحمر ذو شفافية 50% إلى نفس اللون ولكن بشفافية 0% وبزاوية 20 درجة لمحاكاة تأثير تسرب الضوء الجميل. تعمل التأثيرات حتى الآن بشكل جيد ولكن الصورة تبدو مسطحة كثيرًا، لذلك سوف نستعمل مرشحات 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.