تزیینات تصویری فانتزی: جادوی تک عنصری

همانطور که عنوان می گوید، ما قصد داریم تصاویر را تزئین کنیم! مجموعه ای از مقالات دیگر وجود دارد که در مورد این موضوع صحبت می کنند، اما آنچه ما در اینجا پوشش می دهیم کمی متفاوت است زیرا بیشتر یک چالش است. چالش؟ یک تصویر را فقط با استفاده از برچسب و هیچ چیز دیگر

درست است، بدون نشانه گذاری اضافی، بدون div، و هیچ شبه عناصر. فقط یک تگ

سخت به نظر می رسد، درست است؟ اما در پایان این مقاله - و سایر مواردی که این سری کوچک را تشکیل می دهند - ثابت خواهم کرد که 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) اما پشت مرز تکرار می شود. اگر رنگ حاشیه را شفاف کنیم می توانیم از تکرار استفاده کنیم و به قاب مورد نظر خود می رسیم.

La 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() برای ایجاد یک افکت شناور خنده دار دیگر. من به شما اجازه می‌دهم کد را تجزیه و تحلیل کنید تا نحوه عملکرد آن را بررسی کنید. اگر گیر کردید در نظرات از من سؤال بپرسید!