زينة الصور الفاخرة: عنصر واحد سحري

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

هذا صحيح ، لا ترميز إضافي ولا divs ولا عناصر زائفة. فقط علامة واحدة.

تبدو صعبة ، أليس كذلك؟ ولكن بنهاية هذه المقالة - والآخرين الذين يشكلون هذه السلسلة الصغيرة - سأثبت أن CSS قوية بما يكفي لتعطينا نتائج رائعة ومذهلة على الرغم من محدودية العمل مع عنصر واحد.

لنبدأ بمثالنا الأول

قبل البحث في الكود ، دعنا نعدد إمكانيات تصميم ملف بدون أي عناصر إضافية أو عناصر زائفة. يمكننا ان نستخدم border, box-shadow, outline، وبطبيعة الحال، background. قد يبدو من الغريب إضافة خلفية إلى صورة لأننا لا نستطيع رؤيتها لأنها ستكون خلف الصورة - لكن الحيلة هي إنشاء مساحة حول الصورة باستخدام padding و / أو border ثم نرسم خلفيتنا داخل تلك المساحة.

أعتقد أنك تعرف ما سيحدث بعد ذلك منذ أن تحدثت background، حقا؟ نعم، التدرجات! تعتمد جميع الزخارف التي سنصنعها على الكثير من التدرجات اللونية. اذا كنت تملك تابعني لفترة من الوقت ، أعتقد أن هذا ربما لم يكن مفاجأة لك على الإطلاق. 😁

دعنا نعود إلى مثالنا الأول:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

نحن نحدد padding وشفافية border باستخدام المتغير --s لإنشاء مساحة حول صورتنا تساوي ثلاثة أضعاف هذا المتغير.

لماذا نستخدم كلاهما padding و border بدلا من واحد او الاخر؟ يمكننا الحصول عليها باستخدام واحد منهم فقط ولكني بحاجة إلى هذه المجموعة من أجل التدرج اللوني الخاص بي ، افتراضيًا ، القيمة الأولية لـ background-clip is border-box و background-origin مساوي ل padding-box.

فيما يلي توضيح خطوة بخطوة لفهم المنطق:

في البداية ، ليس لدينا أي حدود على الصورة ، لذا فإن التدرج اللوني لدينا سينشئ جزأين بهما 1px من السماكة. (انا استخدم 3px في هذا العرض التوضيحي المحدد لذلك من السهل رؤيته.) نضيف حدًا ملونًا ولا يزال التدرج اللوني يعطينا نفس النتيجة داخل منطقة المساحة المتروكة (بسبب background-origin) لكنها تتكرر خلف الحدود. إذا جعلنا لون الحدود شفافًا ، فيمكننا استخدام التكرار ونحصل على الإطار الذي نريده.

• outline في العرض التوضيحي له تعويض سلبي. هذا يخلق شكل مربع في الجزء العلوي من التدرج. هذا هو! أضفنا زخرفة جميلة إلى صورتنا باستخدام تدرج واحد و outline. كان بإمكاننا استخدام المزيد من التدرجات! لكنني أحاول دائمًا أن أبقي الكود الخاص بي بسيطًا قدر الإمكان ووجدت أن إضافة ملف outline أفضل بهذه الطريقة.

إليك حل التدرج فقط حيث أستخدمه فقط padding لتحديد المساحة. لا تزال نفس النتيجة ولكن بصيغة أكثر تعقيدًا.

لنجرب فكرة أخرى:

بالنسبة لهذا ، أخذت المثال السابق بإزالة ملف outline، وطبقت أ clip-path لقطع التدرج على كل جانب. ال clip-path القيمة مطولة ومربكة بعض الشيء ولكن هنا توضيح لرؤية نقاطها بشكل أفضل:

أعتقد أنك حصلت على الفكرة الرئيسية. سنقوم بدمج الخلفيات ، والخطوط العريضة ، والقص ، وبعض الإخفاء لتحقيق أنواع مختلفة من الزخارف. سننظر أيضًا في بعض الرسوم المتحركة الرائعة التي تحوم كمكافأة إضافية! ما نظرنا إليه حتى الآن هو مجرد نظرة عامة صغيرة على ما هو قادم!

إطار الزاوية فقط

هذا واحد يأخذ أربعة منحدرات. يغطي كل تدرج زاوية واحدة ، وعند التمرير ، نقوم بتوسيعها لإنشاء إطار كامل حول الصورة. دعنا نفصل الكود الخاص بأحد التدرجات:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

سنقوم برسم تدرج بحجم يساوي 50px 50px وضعه في الزاوية العلوية اليسرى (0 0). بالنسبة لتكوين التدرج اللوني ، إليك رسم توضيحي خطوة بخطوة يوضح كيف وصلت إلى هذه النتيجة.

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

#0000 25%, darkblue 0

هذا هو القول في الأساس: "املأ التدرج بلون شفاف حتى 25% من المنطقة ، ثم املأ المساحة المتبقية darkblue.

ربما كنت تحك رأسك فوق 0 القيمة. إنه اختراق بسيط لتبسيط بناء الجملة. في الواقع ، يجب أن نستخدم هذا للتوقف بشدة بين الألوان:

#0000 25%, darkblue 25%

هذا منطقي أكثر! اللون الشفاف ينتهي عند 25% و darkblue يبدأ بالضبط حيث تنتهي الشفافية ، متوقفًا بشدة. إذا استبدلنا الثاني بـ 0، سيقوم المتصفح بالمهمة نيابةً عنا ، لذا فهي طريقة أكثر فاعلية قليلاً للقيام بذلك.

في مكان ما المواصفات، انها تقول:

إذا توقف اللون or تلميح الانتقال له موضع أقل من الموضع المحدد لأي توقف لوني أو تلميح انتقال قبله في القائمة ، قم بتعيين موضعه ليكون مساويًا لأكبر موضع محدد لأي نقطة توقف لونية أو تلميح انتقال قبله.

0 دائمًا ما تكون أصغر من أي قيمة أخرى ، لذلك سيقوم المتصفح دائمًا بتحويلها إلى أكبر قيمة تأتي قبلها في الإعلان. في حالتنا ، هذا الرقم هو 25%.

الآن ، نطبق نفس المنطق على جميع الزوايا وننتهي بالكود التالي:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

لقد أدخلت متغيرات CSS لتجنب بعض التكرار لأن جميع التدرجات تستخدم نفس تكوين اللون.

بالنسبة لتأثير التمرير ، كل ما أفعله هو زيادة حجم التدرجات لإنشاء الإطار الكامل:

img:hover {
  background-size: 51% 51%;
}

نعم إنه كذلك 51% بدلا من 50% - هذا يخلق تداخلاً صغيراً ويتجنب الفجوات المحتملة.

لنجرب فكرة أخرى باستخدام نفس الأسلوب:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

لماذا يفعل --_i و --_p المتغيرات لها شرطة سفلية في أسمائها؟ الشرطات السفلية هي جزء من اصطلاح التسمية الذي أستخدمه للنظر في المتغيرات "الداخلية" المستخدمة لتحسين الكود. إنها ليست شيئًا مميزًا ولكني أريد أن أحدث فرقًا بين المتغيرات التي نضبطها للتحكم في الإطار (مثل --b, --c، وما إلى ذلك) وتلك التي أستخدمها لجعل الشفرة أقصر.

قد يبدو الرمز محيرًا وليس من السهل فهمه لكني كتبت ملف سلسلة من ثلاثة أجزاء حيث أفصل هذه التقنية. أوصي بشدة بقراءة المقالة الأولى على الأقل لفهم كيف وصلت إلى الكود أعلاه.

فيما يلي توضيح لفهم القيم المختلفة بشكل أفضل:

كشف الإطار

لنجرب نوعًا آخر من الرسوم المتحركة حيث نكشف عن الإطار الكامل عند التمرير:

رائع ، أليس كذلك؟ وإذا نظرت عن كثب ، ستلاحظ أن الخطوط تختفي في الاتجاه المعاكس عند إخراج الماوس مما يجعل التأثير أكثر وضوحًا! لقد استخدمت تأثيرًا مشابهًا في مقالة سابقة.

لكن هذه المرة ، بدلاً من تغطية كل العناصر ، أقوم بتغطية جزء صغير فقط من خلال تعريف a height للحصول على شيء مثل هذا:

هذا هو الحد العلوي لإطارنا. نكرر نفس العملية على كل جانب من الصورة ولدينا تأثير التمرير الخاص بنا:

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

كما ترى ، أقوم بتطبيق نفس التدرج أربع مرات ولكل منها موقع مختلف لتغطية جانب واحد فقط في كل مرة.

واحدة أخرى؟ لنذهب!

هذا يبدو معقدًا بعض الشيء ويتطلب بالفعل بعض الخيال لفهم كيف يقوم تدرجان مخروطيان بسحب هذا النوع من السحر. إليك عرض توضيحي لتوضيح أحد التدرجات اللونية:

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

لكن لماذا صنعت عرض التدرج 200%؟ انت تعتقد 100% سيكون كافيا ، أليس كذلك؟

100% يجب أن يكون كافيًا لكنني لن أكون قادرًا على تحريك التدرج اللوني كما أريد إذا حافظت على مساوٍ لعرضه 100%. هذا غريب آخر يتعلق بالكيفية background-position يعمل. أنا أغطي هذا في مقالة سابقة. أنا أيضا نشر إجابة في Stack Overflow التعامل مع هذا. أعلم أن القراءة كثيرة ، لكنها تستحق وقتك حقًا.

الآن بعد أن شرحنا منطق التدرج اللوني ، فإن الثاني سهل لأنه يقوم بنفس الشيء تمامًا ، ولكنه يغطي الحواف اليسرى والسفلى بدلاً من ذلك. كل ما يتعين علينا القيام به هو تبديل بعض القيم وقد انتهينا:

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

كما ترى ، كلا التدرجين متطابقان تقريبًا. أنا ببساطة أقوم بتبديل قيم الحجم والموقع.

دوران الإطار

هذه المرة لن نرسم إطارًا حول صورتنا ، بل نضبط مظهر الصورة الحالية.

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

دعونا نرى كيف يتم عمل الرسوم المتحركة الخاصة بالتدرج العلوي:

أنا ببساطة أقوم بتحديث موضع التدرج اللوني المتكرر. لا شيء يتوهم حتى الآن! لنفعل الشيء نفسه بالنسبة للجانب الأيمن:

هل بدأت ترى الحيلة؟ يتقاطع كلا التدرجين عند الزاوية لخلق الوهم حيث يتم تغيير الخط المستقيم إلى زاوية. دعنا نزيل المخطط التفصيلي ونخفي الفائض لرؤيته بشكل أفضل:

الآن ، نضيف اثنين من التدرجات اللونية لتغطية الحواف المتبقية وقد انتهينا:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

إذا أخذنا هذا الرمز وقمنا بتعديله قليلاً ، فيمكننا الحصول على رسوم متحركة رائعة أخرى:

هل يمكنك معرفة المنطق في هذا المثال؟ هذا هو واجبك المنزلي! قد يبدو الرمز مخيفًا ولكنه يستخدم نفس المنطق مثل الأمثلة السابقة التي نظرنا إليها. حاول عزل كل تدرج لوني وتخيل كيف يتحرك.

اختتام

هذا كثير من التدرجات في مقال واحد!

من المؤكد وقد حذرتك! ولكن إذا كان التحدي هو تزيين صورة بدون عناصر إضافية وعناصر زائفة ، فلن يتبقى لنا سوى عدد قليل من الاحتمالات والتدرجات هي الخيار الأقوى.

لا تقلق إذا كنت ضائعًا بعض الشيء في بعض التفسيرات. أوصي دائمًا ببعض مقالاتي القديمة حيث أخوض في مزيد من التفاصيل مع بعض المفاهيم التي قمنا بإعادة تدويرها لهذا التحدي.

سأغادر مع عرض توضيحي أخير لأوقفك حتى المقالة التالية في هذه السلسلة. هذه المرة ، أنا أستخدم radial-gradient() لإنشاء تأثير تحوم مضحك آخر. سأسمح لك بتشريح الكود لمعرفة كيفية عمله. اسألني أسئلة في التعليقات إذا واجهتك مشكلة!