نبرد CSS: مهارت های خود را آزمایش کنید

اخیرا Virtual Coffee @virtualcoffee) من را با نبردهای CSS در CSS Battle.Dev معرفی کرده است. این سایتی است که مهارت های CSS شما را به چالش می کشد. آنها یک تصویر را به شما نشان می دهند و شما آن را تا حد امکان از نو خلق می کنید.

در Virtual Coffee ما این کارها را در زوم انجام می دهیم و برخی از اعضا صفحه نمایش خود را به اشتراک می گذارند. ما در مورد استراتژی های حل پازل بحث می کنیم. آنقدر آن را دوست داشتم که در اوقات فراغتم بیشتر کار کرده ام.

نبردهای CSS

همانطور که در بالا ذکر شد، CSS Battle یک چالش برای بازسازی یک تصویر با استفاده از CSS و HTML است. امتیاز شما به عنوان شما ساخت.

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

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

برپایی

شروع یک نبرد.

صفحه اصلی سه ستون است، ویرایشگر متن، خروجی کد شما و تصویر هدف. در بالای خروجی کد، چند ابزار مفید، “Slide & Compare” و “Diff” وجود دارد، که بعداً در مورد آنها بیشتر توضیح خواهیم داد.

نتیجه نهایی.

مثال نبرد

این دکمه فشاری چالش شماره 3 است، آن را اینجا ببینید

این کد شروع برای هر چالش با دستورالعمل در نظرات است. فراموش نکنید که نظرات را حذف کنید، آنها به تعداد کاراکتر شما اضافه شده اند و شما می خواهید تعداد کمی داشته باشید.

<div></div>
<style>
  div {
    width: 100px;
    height: 100px;
    background: #dd6b4d;
  }
</style>

<!-- OBJECTIVE -->
<!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->

<!-- SCORING -->
<!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->

<!-- IMPORTANT: remove the comments before submitting -->

من یک تایمر پومودورو را برای 25 دقیقه تنظیم کردم تا مدتی را مسدود کنم. اولین کاری که انجام می دهم تغییر رنگ پس زمینه است. رنگ ها در زیر پنجره Target فهرست شده اند. سپس یک مستطیل برای شکل اصلی درست کنید.

  body{
    background:  #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rec{
    width: 300;
    height: 150;
    background: #243D83;
  }

CSS Battle ابزارهایی دارد که به شما کمک می کند تصویر مورد نظر را مطابقت دهید. یکی از آنها نوار لغزنده ای است که آن را در پنجره خروجی کد حرکت می دهید که هدف را نشان می دهد و به شما کمک می کند تا تصویر خود را تنظیم کنید.

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

بعد یک دایره بزرگ آبی تیره با حاشیه بزرگ ساختم. حاشیه دایره آبی روشن بیرونی است. از آنجایی که رنگ حاشیه با رنگ کلی پس زمینه یکسان است، آنها با هم ترکیب می شوند.

<div class="rec">
  <div class="cir"></div></div>
</div>
<style>
  .rec{
    width: 300;
    height: 150;
    background: #243D83;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cir{
    width: 150;
    height: 150;
    border-radius: 50%;
    background: #243D83;
    border: 50px solid #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

سپس دایره مرکزی را اضافه کردم، یک div با کلاس نقطه.

<div class="rec">
  <div class="cir"><div class="dot"></div></div>
</div>
.dot{
  width: 50;
  height: 50;
  border-radius: 50%;
  background: #EEB850;
}

کمتر از 11:25 طول کشید تا به اینجا رسیدیم. این شامل زمان توقف برای گرفتن عکس از صفحه است. فراموش کرده بودم که می‌خواهم برای خودم زمان بگذارم و در حین حرکت یادداشت‌برداری می‌کردم.

من روی دکمه ارسال کلیک کردم و امتیاز 600.01 با 100% تطابق و 1094 کاراکتر را گرفتم. متوجه شدم نظرات را حذف نکرده بودم. بنابراین من تعداد شخصیت بالاتری داشتم.

پس از حذف متن، امتیاز به 600.77 با 656 کاراکتر تغییر کرد. بخشی از امتیاز تعداد کاراکتر است، مانند گلف است، هر چه کمتر بهتر است.

در اینجا ابزار تفاوت 100٪ مطابقت را نشان می دهد. همه چیز هماهنگ است.

نکاتی برای کاهش تعداد شخصیت

توجه داشته باشید که ارتفاع و عرض کد واحد ندارند. برای برخی از خواص به آنها نیاز ندارید. همچنین می توانید برچسب های بسته شدن را کنار بگذارید، فضای سفید و تورفتگی ها را حذف کنید.

خواندن کد را سخت می کند اما مرورگر به آنها نیازی ندارد.

هنگامی که نحوه بازی کردن را یاد گرفتید، قبل از شروع کدنویسی، دستورالعمل نظر داده شده را حذف کنید. وگرنه فراموش میکنی

نبرد و اهداف روزانه

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

شما می توانید یک تابلوی رهبر فقط از دوستان خود تنظیم کنید.

سپس آنها یک هدف روزانه دارند. فقط برای 24 ساعت باز است و هیچ تابلوی لیدری وجود ندارد که هر چه امتیاز می دهید.

به طور پیش فرض، می توانید هدف امروز را بازی کنید. اگر عضو PLUS هستید، می‌توانید تمام اهداف روزانه گذشته را نیز بازی کنید
شما نمی توانید امتیاز خود را در یک هدف روزانه گذشته بهبود بخشید. اگر کاربر PLUS هستید، همچنان می توانید بازی کنید و در هر هدف روزانه گذشته امتیاز بگیرید. – نبرد CSS

یک حساب کاربری PLUS 5 دلار در ماه است، اگر برای یک سال یکبار پرداخت کنید، 3 دلار است.

یک بخش یادگیری CSS از آموزش ها وجود دارد. آنها از صفحه نمایش بازی برای آموزش اصول CSS استفاده می کنند. این برای یادگیری CSS است نه برای یادگیری بازی.

اندیشه ها

این یک روش جالب برای تمرین CSS است. این یک تمرین سرگرم کننده برای تمرین مهارت های کدنویسی است. با تشکر از @meg و گروه Frontend Friday Folks Fighting در Virtual Coffee برای معرفی.

CSS Battles را در CSSBattle.dev امتحان کنید

-$JarvisScript git push