تزئینات تصویری فانتزی: ماسک ها و جلوه های شناور پیشرفته

به قسمت 2 این مجموعه سه قسمتی خوش آمدید! ما همچنان در حال تزئین تصاویر بدون هیچ عنصر اضافی و شبه عناصر هستیم. امیدوارم قبلاً برای هضم وقت گذاشته باشید قسمت 1 زیرا ما به کار با شیب های زیادی برای ایجاد جلوه های بصری عالی ادامه خواهیم داد. همچنین قصد داریم CSS را معرفی کنیم mask ویژگی برای تزئینات پیچیده تر و جلوه های شناور.

بیایید به اولین مثالی که با هم روی آن کار می کنیم بپردازیم…

تمبر پستی

باور کنید یا نه، تنها چیزی که برای ایجاد اثر CSS تمبر پستی نیاز است، دو گرادیان و یک فیلتر است:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

همانطور که در آن دیدیم مقاله قبلی، اولین قدم ایجاد فضای اطراف تصویر با padding بنابراین می توانیم یک گرادیان پس زمینه بکشیم و آن را در آنجا ببینیم. سپس از ترکیبی از radial-gradient() و linear-gradient() برای بریدن آن دایره های اطراف تصویر.

در اینجا یک تصویر گام به گام است که نحوه پیکربندی گرادیان ها را نشان می دهد:

به استفاده از round ارزش در مرحله دوم برای این ترفند بسیار مهم است زیرا اطمینان می دهد که اندازه گرادیان تنظیم می شود تا در همه طرف ها کاملاً تراز باشد، صرف نظر از عرض یا ارتفاع تصویر.

از جانب مشخصات: تصویر هر چند وقت یکبار که در ناحیه موقعیت یابی پس زمینه جا می شود تکرار می شود. اگر چندین بار مناسب نباشد، مجدداً مقیاس می شود تا مناسب باشد.

قاب گرد

بیایید به دکوراسیون تصویر دیگری که از دایره ها استفاده می کند نگاه کنیم…

در این مثال از a نیز استفاده شده است radial-gradient()، اما این بار من حلقه هایی ایجاد کرده ام دور و بر تصویر به جای افکت برش. توجه داشته باشید که من نیز از آن استفاده می کنم round ارزش دوباره مشکل‌ترین بخش در اینجا، شکاف شفاف بین فریم و تصویر است، جایی که من به CSS می‌رسم. mask ویژگی:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

پوشاندن به ما اجازه می دهد تا ناحیه تصویر را نشان دهیم - به لطف آن linear-gradient() در آنجا - و همچنین 20px در اطراف هر طرف آن - به لطف conic-gradient(). 20px چیزی جز متغیر نیست --s که اندازه قاب را مشخص می کند. به عبارت دیگر، ما باید شکاف را پنهان کنیم.

در اینجا منظورم چیست؟

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

مرز شفاف درونی

برای این یکی، ما یک قاب ایجاد نمی کنیم، بلکه چیزی متفاوت را امتحان می کنیم. ما قصد داریم یک مرز داخلی شفاف ایجاد کنیم داخل تصویر ما احتمالاً در یک سناریوی دنیای واقعی چندان مفید نیست، اما تمرین خوبی با ماسک های CSS است.

مشابه مثال قبلی، ما بر دو شیب تکیه می کنیم: الف linear-gradient() برای قسمت داخلی و الف conic-gradient() برای قسمت بیرونی ما یک فاصله بین آنها برای ایجاد افکت حاشیه شفاف می گذاریم.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

شاید متوجه شده باشید که شیب مخروطی این مثال دارای نحو متفاوتی با مثال قبلی است. هر دو قرار است یک شکل را ایجاد کنند، پس چرا با هم متفاوت هستند؟ به این دلیل است که می توانیم با استفاده از سینتکس های مختلف به یک نتیجه برسیم. این ممکن است در ابتدا گیج کننده به نظر برسد، اما یک ویژگی خوب است. شما مجبور نیستید پیدا کنید la راه حل برای رسیدن به یک شکل خاص شما فقط باید یک راه حل پیدا کنید که برای شما کار می کند، از بین بسیاری از احتمالات موجود.

در اینجا چهار راه برای ایجاد مربع بیرونی با استفاده از گرادیان وجود دارد:

راه‌های بیشتری برای رفع این مشکل وجود دارد، اما شما متوجه موضوع می‌شوید.

هیچ رویکرد Best™ وجود ندارد. من شخصاً سعی می کنم کدی را پیدا کنم که کوچکترین و بهینه ترین کد را داشته باشد. برای من، هر راه حلی که به گرادیان کمتر، محاسبات کمتر و مقادیر تکراری کمتر نیاز دارد، مناسب ترین راه حل است. گاهی اوقات من یک نحو پرمخاطب تر را انتخاب می کنم زیرا به من انعطاف بیشتری برای تغییر متغیرها و اصلاح چیزها می دهد. با تجربه و تمرین همراه است. هرچه بیشتر با گرادیان ها بازی کنید، بیشتر می دانید که چه نحوی و چه زمانی باید استفاده کنید.

بیایید به مرز شفاف درونی خود برگردیم و به جلوه شناور بپردازیم. اگر متوجه نشدید، یک افکت شناور جالب وجود دارد که آن حاشیه شفاف را با استفاده از a حرکت می دهد font-size فوت و فن. ایده این است که تعریف شود --d متغیر با مقدار 1em. این متغیر فاصله مرز از لبه را کنترل می کند. ما می توانیم به این شکل تبدیل کنیم:

--_d: calc(var(--d) + var(--s) * 1em)

... CSS به روز شده زیر را به ما می دهد:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

La font-size در ابتدا برابر است با 0 ،بنابراین 1em نیز برابر است با 0 و --_d برابر باشد با --d. هر چند در شناور، font-size برابر با مقداری است که توسط an تعریف شده است --o متغیری که افست مرز را تعیین می کند. این به نوبه خود، به روز رسانی می شود --_d متغیر، جابجایی مرز با افست. سپس یک متغیر دیگر اضافه می کنم، --s، برای کنترل تابلویی که تصمیم می گیرد مرز به داخل یا خارج حرکت کند.

La font-size اگر بخواهیم خصوصیاتی را متحرک کنیم که در غیر این صورت غیرقابل حرکت هستند، ترفند واقعا مفید است. ویژگی های سفارشی تعریف شده با @property می تواند این را حل کند اما حمایت از آن در زمانی که من این را می نویسم هنوز وجود ندارد.

قاب آشکار

انیمیشن افشاگری زیر را در قسمت اول این مجموعه ساختیم:

می‌توانیم همین ایده را در نظر بگیریم، اما به جای حاشیه با رنگ ثابت، از یک گرادیان مانند زیر استفاده می‌کنیم:

اگر هر دو کد را با هم مقایسه کنید، متوجه تغییرات زیر خواهید شد:

1. من از همان پیکربندی گرادیان از مثال اول در داخل استفاده کردم mask ویژگی. من به سادگی شیب ها را از قسمت منتقل کردم background دارایی به mask ویژگی.
2. a اضافه کردم repeating-linear-gradient() برای ایجاد مرز گرادیان

خودشه! من از اکثر کدهایی که قبلاً دیده بودیم - با تغییرات بسیار کوچک - دوباره استفاده کردم و یک تزیین تصویر جالب دیگر با افکت شناور دریافت کردم.

/* Solid color border */

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

  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;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    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,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

بیایید یک انیمیشن فریم دیگر را امتحان کنیم. این یکی کمی مشکل است زیرا دارای یک است انیمیشن سه مرحله ای:

اولین قدم انیمیشن بزرگتر کردن لبه پایینی است. برای این، ما تنظیم می کنیم background-size از linear-gradient():

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

برای مرحله دوم، یک گرادیان دوم برای نشان دادن لبه های چپ و راست اضافه می کنیم. اما این بار، ما آن را با استفاده از آن انجام می دهیم background-position:

ما می‌توانیم در اینجا توقف کنیم، زیرا از قبل با دو شیب یک اثر خوب داریم، اما اینجا هستیم تا محدودیت‌ها را پشت سر بگذاریم، بنابراین بیایید برای رسیدن به مرحله سوم یک ماسک اضافه کنیم.

ترفند این است که لبه بالایی را پنهان کنیم تا زمانی که پایین و کناره ها را نشان دهیم و سپس آن را به روز کنیم mask-size (و یا mask-position) برای نشان دادن قسمت بالایی. همانطور که قبلاً گفتم، ما می‌توانیم تنظیمات گرادیان زیادی را برای رسیدن به همان اثر پیدا کنیم.

در اینجا یک تصویر از گرادیان هایی است که من استفاده خواهم کرد:

من از دو شیب مخروطی با عرض برابر استفاده می کنم 200%. هر دو شیب منطقه را پوشش می دهند و تنها قسمت بالایی را بدون پوشش می گذارند (آن قسمت بعدا نامرئی خواهد شد). هنگام شناور، هر دو شیب را می لغزید تا آن قسمت را بپوشانم.

در اینجا یک تصویر بهتر از یکی از شیب ها ارائه شده است تا به شما ایده بهتری از آنچه در حال وقوع است ارائه دهد:

حالا این را داخل mask اموال و ما تمام شد! اینم کد کامل:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

من همچنین چند متغیر برای بهینه سازی کد معرفی کرده ام، اما باید فعلاً به این کار عادت کنید.

در مورد انیمیشن چهار مرحله ای چطور؟ بله امکانش هست!

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

پسگفتار

این برای قسمت 2 از این مجموعه سه قسمتی در مورد تزئینات تصویر خلاقانه تنها با استفاده از عنصر ما اکنون در مورد اینکه چگونه گرادینت ها و ماسک ها را می توان برای ایجاد جلوه های بصری عالی و حتی انیمیشن ها - بدون دستیابی به عناصر اضافی یا شبه المان ها - با هم ترکیب کرد. بله مجرد برچسب کافی است!

ما یک مقاله دیگر در این مجموعه داریم. تا آن زمان، در اینجا یک نسخه نمایشی جایزه با جلوه شناور جالب وجود دارد که در آن از آن استفاده می کنم mask برای جمع آوری یک تصویر شکسته