কোণার আকৃতির সাথে আমরা আসলে কী করতে পারি?

আমি যখন প্রথম কোডটি নিয়ে গোলমাল শুরু করি তখন গোলাকার কোণগুলির জন্য পাঁচটি ব্যাকগ্রাউন্ড চিত্র বা একটি প্রয়োজন চিত্র স্প্রাইট সম্ভবত ফটোশপে তৈরি করা হয়েছে, তাই কখন border-radius দৃশ্যে এসেছিল, আমি প্রত্যেকে মনে করি প্রত্যেকে ভেবেছিলাম যে এটি এখন পর্যন্ত সেরা জিনিস। ওয়েব ডিজাইনগুলি তখন খুব বর্গক্ষেত্র ছিল, তাই আছে border-radius দুর্দান্ত শীতল ছিল, এবং এটি আমাদের অনেক সময় সাশ্রয় করেছিল।

ক্রিস ‘ border-radius ২০০৯ থেকে নিবন্ধযা লেখার সময় 16 বছর বয়সী (অপেক্ষা করুন, কত বছর বয়সী আমি?!), “ওল্ড কনকিউরার ব্রাউজার” সহ পুরানো ওয়েব ব্রাউজারগুলির জন্য বিক্রেতার উপসর্গ অন্তর্ভুক্ত রয়েছে (-khtml-border-radius)। বেঁচে থাকার কি সময়!

আমরা আজকাল বৃত্তাকার কোণ সম্পর্কে অনেক কম উত্তেজিত। প্রকৃতপক্ষে, তীক্ষ্ণ কোণগুলি প্রত্যাবর্তন করেছে এবং এখন ঠিক তেমন জনপ্রিয়, যেমন কাঠবিড়ালি (বর্গ-ইশ চেনাশোনা বা সার্কেল-ওয়াই স্কোয়ারগুলি, আপনার বাছাই করুন), যা ঠিক কী corner-shape সিএসএস সম্পত্তি আমাদের তৈরি করতে সক্ষম করে (আরও অনেক শীতল ইউআই প্রভাব ছাড়াও যা আমি আপনাকে আজ দিয়ে চলব)।

লেখার সময়, শুধুমাত্র Chrome 139 এবং উপরে সমর্থন corner-shapeযা অবশ্যই ব্যবহার করা উচিত border-radius সম্পত্তি বা/এবং সম্পর্কিত যে কোনও স্বতন্ত্র বৈশিষ্ট্য (অর্থাত্, border-top-left-radius, border-top-right-radius, border-bottom-right-radiusএবং border-bottom-left-radius):

ব্যবহার করে স্নিপড কোণগুলি corner-shape: bevel

এই স্নিপড কোণ ইউআই ডিজাইনারদের আলিঙ্গন করায় আরও বেশি জনপ্রিয় হয়ে উঠছে ব্রুটালিস্ট নান্দনিকতা।

উপরের উদাহরণে, এটি ব্যবহার করার মতো সহজ corner-shape: bevel স্নিপড কোণার প্রভাব এবং তারপরে border-bottom-right-radius: 16px আকারের জন্য।

corner-shape: bevel;
border-bottom-right-radius: 16px;

আমরা একই জিনিস করতে পারি এবং এটি সত্যিই একটি সাইবারপঙ্ক নান্দনিকতার সাথে কাজ করে:

স্লান্টেড বিভাগগুলি ব্যবহার করে corner-shape: bevel

স্লান্টেড বিভাগগুলি একটি ভিজ্যুয়াল এফেক্ট যা আরও বেশি জনপ্রিয়, সম্ভবত কোথাও যাচ্ছে না এবং আবারও উপাদানগুলিকে বাক্সগুলির মতো অনেক কম দেখতে সহায়তা করে।

যদিও আমরা ডুব দেওয়ার আগে, এটি মনে রাখা গুরুত্বপূর্ণ যে প্রতিটি সীমানা রেডিয়াইয়ের প্রতিটি অক্ষের একটি ‘পয়েন্ট’ (ভেক্টর পরিভাষা ব্যবহার করার জন্য) সহ দুটি আধা-মেজর অক্ষ, একটি অনুভূমিক অক্ষ এবং একটি উল্লম্ব অক্ষ রয়েছে। উপরের উদাহরণে, উভয়ই সেট করা আছে 16pxসুতরাং উভয় পয়েন্ট সেই পরিমাণ দ্বারা তাদের নিজ নিজ অক্ষ বরাবর সরানো, দূরে তাদের কোণ থেকে অবশ্যই, এবং তারপরে বেভেলড লাইনটি তাদের মধ্যে আঁকা। নীচের স্লান্টেড বিভাগে উদাহরণে, তবে, আমাদের প্রতিটি অক্ষের জন্য একটি আলাদা পয়েন্ট মান সরবরাহ করতে হবে, এর মতো:

corner-shape: bevel;
border-bottom-right-radius: 100% 50px;

প্রথম পয়েন্ট বরাবর সরানো হয় 100% অনুভূমিক অক্ষের যেখানে দ্বিতীয় পয়েন্টটি ভ্রমণ করে 50px উল্লম্ব অক্ষের, এবং তারপরে বেভেলড লাইনটি তাদের মধ্যে আঁকা হয়, আপনি উপরে যে স্লেন্টটি দেখেন তা তৈরি করে।

যাইহোক, প্রতিটি অক্ষ এবং সীমান্ত ব্যাসার্ধের জন্য বিভিন্ন মান থাকা ঠিক কীভাবে শীতল সীমান্ত ব্যাসার্ধ ব্লবস তৈরি করা হয়।

বিক্রয় ট্যাগ ব্যবহার করে corner-shape: round bevel bevel round

আপনি প্রায় প্রতিটি ই-কমার্স ওয়েবসাইটে এই বিক্রয় ট্যাগগুলি দেখতে পাচ্ছেন, চিত্র হিসাবে বা বৃত্তাকার কোণগুলির সাথে এবং বিন্দু অংশটি নয় (অন্যান্য কৌশলগুলি কেবল সমস্যার পক্ষে উপযুক্ত নয়)। তবে এখন আমরা দুটি ভিন্ন ধরণের ব্যবহার করে সঠিক আকারটি তৈরি করতে পারি corner-shape একবারে, পাশাপাশি সীমানা ব্যাসার্ধের মানগুলির পুরো সেট:

আপনার প্রয়োজন corner-shape: round bevel bevel round শুরু করতে। নিম্নলিখিত হিসাবে শীর্ষ-বাম থেকে শুরু করে ক্রমটি ঘড়ির কাঁটার দিকে প্রবাহিত হয়:

• শীর্ষ-বাম
• শীর্ষ-ডান
• নীচে ডান
• নীচে-বাম

ঠিক যেমন border-radius। তুমি ক্যান কিছু মান বাদ দিন, যার ফলে এগুলি অন্যান্য মান থেকে অনুমান করা হয়, তবে উভয়ই অনুমান যুক্তি এবং ফলস্বরূপ মান সিনট্যাক্সের অভাবের স্বচ্ছতার অভাব রয়েছে, তাই আমি কেবল এটি এড়াতে পারি, বিশেষত যেহেতু আমরা আরও জটিল অন্বেষণ করতে চলেছি border-radius::

corner-shape: round bevel bevel round;
border-radius: 16px 48px 48px 16px / 16px 50% 50% 16px;

ফরোয়ার্ড স্ল্যাশের বাম (/) আমাদের উপরে উল্লিখিত ক্রমের প্রতিটি কোণার অনুভূমিক-অক্ষের মান রয়েছে এবং ডানদিকে /উল্লম্ব-অক্ষের মান। সুতরাং, স্পষ্টতই, প্রথম এবং পঞ্চম মানগুলি একই কোণার সাথে মিলে যায়, যেমনটি দ্বিতীয় এবং ষষ্ঠ এবং আরও অনেক কিছু করে। যদি এটি পড়তে আরও সহজ হয় তবে আপনি শর্টহ্যান্ড আনপ্যাক করতে পারেন:

border-top-left-radius: 16px;
border-top-right-radius: 48px 50%;
border-bottom-right-radius: 48px 50%;
border-bottom-left-radius: 16px;

এখনও অবধি, সীমানা ব্যাসার্ধ সিনট্যাক্সটি পুরোপুরি বুঝতে আমাদের দরকার নেই। তবে এখন আমাদের আছে corner-shapeএটি অবশ্যই এটি করার মতো।

প্রকৃত মান হিসাবে, 16px এর সাথে সম্পর্কিত round কোণগুলি (এটি বুঝতে সহজ) যখন 48px 50% মানগুলির জন্য হয় bevel এর অর্থ হ’ল কোণগুলি থেকে ‘আঁকা’ 48px অনুভূমিকভাবে 50% উল্লম্বভাবে, এ কারণেই এবং কীভাবে তারা একটি বিন্দুতে চলে যায়।

সীমানা সম্পর্কে – হ্যাঁ, পয়েন্টটি অংশগুলি যদি তারা থাকত তবে তারা দেখতে সুন্দর লাগবে সামান্য বৃত্তাকার, তবে ব্যবহার borderএস এবং outlineএই উপাদানগুলির উপর এস ব্রাউজারগুলি কীভাবে কোণগুলি আঁকেন তার কারণে অনাকাঙ্ক্ষিত (তবে আমি সন্দেহ করি) ফলাফল দেয় স্তন্যপান।

একই পদ্ধতি ব্যবহার করে তীর crumbs

হ্যাঁ, একই জিনিস।

আমাদের কাছে মূলত নেতিবাচক মার্জিন সহ একটি গ্রিড সারি রয়েছে, তবে আমরা ‘ইনসেট’ তীর তৈরি করতে বা সীমানা/রূপরেখা ব্যবহার করতে পারি না, তাই আমাদের একটি প্রভাব তৈরি করতে হবে যেখানে নির্দিষ্ট তীরগুলির নকল সীমানাগুলি পরের দিকে রক্তক্ষরণ করে। এটি তীরগুলিতে ঠিক একই আকারটি বাসা বাঁধার এবং তারপরে প্রভাবের জন্য কিছু প্রয়োগ করে করা হয় padding-right: 3pxকোথায় 3px হ’ল সীমান্তের মান। নীচের কোড মন্তব্যগুলি আরও বিশদে এটি ব্যাখ্যা করা উচিত (সম্পূর্ণ কোড ইন ইন কলম যদিও বেশ আকর্ষণীয়, যদিও):

<nav>
  <ol>
    <li>
      <a>Step 1</a>
    </li>
    <li>
      <a>Step 2</a>
    </li>
    <li>
      <a>Step 3</a>
    </li>
  </ol>
</nav>

ol {
  /* Clip n’ round */
  overflow: clip;
  border-radius: 16px;

  li {
    /* Arrow color */
    background: hsl(270 100% 30%);

    /* Reverses the z-indexes, making the arrows stack */
    /* Result: 2, 1, 0, ... (sibling-x requires Chrome 138+) */
    z-index: calc((sibling-index() * -1) + sibling-count());

    &:not(:last-child) {
      /* Arrow width */
      padding-right: 3px;

      /* Arrow shape */
      corner-shape: bevel;
      border-radius: 0 32px 32px 0 / 0 50% 50% 0;

      /* Pull the next one into this one */
      margin-right: -32px;

    }

    a {
      /* Same shape */
      corner-shape: inherit;
      border-radius: inherit;

      /* Overlay background */
      background: hsl(270 100% 50%);
    }
  }
}

টুলটিপস ব্যবহার করে corner-shape: scoop

এই টুলটিপ স্টাইলটি তৈরি করতে, আমি একটি ব্যবহার করেছি পপওভার, অ্যাঙ্কর অবস্থান (টুলটিপের সাথে সম্পর্কিত ক্যারেটকে অবস্থান করতে), এবং corner-shape: scoop। ক্যারেট শেপটি উপরের উদাহরণগুলিতে ব্যবহৃত তীর আকারের সমান, তাই স্যুইচ করতে নির্দ্বিধায় scoop থেকে bevel আপনি যদি ক্লাসিক ত্রিভুজ সরঞ্জামটি পছন্দ করেন।

একটি দ্রুত ওয়াকথ্রু:

<!-- Connect button to tooltip -->
<button popovertarget="tooltip" id="button">Click for tip</button>

<!-- Anchor tooltip to button -->
<div anchor="button" id="tooltip" popover>Don’t eat yellow snow</div>

#tooltip {
  /* Define anchor */
  anchor-name: --tooltip;

  /* Necessary reset */
  margin: 0;

  /* Center vertically */
  align-self: anchor-center;

  /* Pin to right side + 15 */
  left: calc(anchor(right) + 15px);

  &::after {
    /* Create caret */
    content: "";
    width: 5px;
    height: 10px;
    corner-shape: scoop;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;

    /* Anchor to tooltip */
    position-anchor: --tooltip;

    /* Center vertically */
    align-self: anchor-center;

    /* Pin to left side */
    right: anchor(left);

    /* Popovers have this already (required otherwise) */
    position: fixed;
  }
}

আপনি যদি বরং এগুলি হোভার-ট্রিগার করা হত তবে আসন্ন আগ্রহের আভোকার এপিআই আপনি যা খুঁজছেন তা কি।

ব্যবহার করে বাস্তববাদী হাইলাইটিং corner-shape: squircle bevel

দ্য <mark> এলিমেন্ট, শব্দার্থক হাইলাইটিংয়ের জন্য ব্যবহৃত, একটি হলুদ ব্যাকগ্রাউন্ডের সাথে ডিফল্ট, তবে এটি হাইলাইটার প্রভাব তৈরি করে না। সিএসএসের নিম্নলিখিত দুটি লাইন যুক্ত করে, যা আমি সম্পূর্ণ এলোমেলো মানগুলির সাথে পরীক্ষা করে আবিষ্কার করেছি, আমরা এটিকে আরও হাতের vaved াকা হাইলাইটের মতো দেখতে পারি:

mark {
  /* A...squevel? */
  corner-shape: squircle bevel;
  border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;

  /* Prevents background-break when wrapping */
  box-decoration-break: clone;
}

আমরাও ব্যবহার করতে পারি squircle নিজেই সেই অভিনব-বৃত্তাকার অ্যাপ আইকনগুলি তৈরি করতে, বা সেগুলি বোতাম/কার্ড/ফর্ম নিয়ন্ত্রণ/ইত্যাদি ব্যবহার করুন। আপনি যদি ভাবেন যে ‘পুরাতন’ সীমান্ত ব্যাসার্ধটি কিছুটা বাসি দেখতে শুরু করেছে:

একই পদ্ধতি ব্যবহার করে হাতে আঁকা বাক্সগুলি

একই জিনিস, কেবল বড়। হ্যান্ড-আঁকা বাক্সের মতো ধরণের দেখতে?

স্বীকার করা যায়, এই প্রভাবটি বৃহত্তর স্কেলে এতটা দুর্দান্ত দেখাচ্ছে না, সুতরাং আপনি যদি সত্যিই বাহ এবং আরও কিছু অনুরূপ কিছু তৈরি করতে চান তবে রেড ডেড রিডিম্পশন নান্দনিক, এই border-image পদ্ধতির আরও ভাল হবে।

সাথে একটি পটভূমি ক্লিপ করুন corner-shape: notch

খাঁজযুক্ত সীমানা রেডিয়ি কুৎসিত এবং আমি অন্যথায় শুনতে পাব না। আমি মনে করি না আপনি তাদের একটি ভিজ্যুয়াল এফেক্ট তৈরি করতে ব্যবহার করতে চান, তবে আমি শিখেছি যে আপনি যদি অপ্রাসঙ্গিক অক্ষটি সেট করেন তবে তারা ব্যাকগ্রাউন্ড ক্লিপিংয়ের জন্য দরকারী 50% এবং পাশের অক্ষটি যা আপনি যে পরিমাণ পরিমাণে এটি ক্লিপ করতে চান তা দিয়ে আপনি ক্লিপ করতে চান। সুতরাং আপনি যদি ক্লিপ করতে চান 30px বাম দিক থেকে ব্যাকগ্রাউন্ড বন্ধ উদাহরণস্বরূপ, আপনি চয়ন করবেন 30px অনুভূমিক অক্ষ এবং জন্য 50% উল্লম্ব অক্ষের জন্য (জন্য -left-radius কেবলমাত্র বৈশিষ্ট্য, অবশ্যই)।

corner-shape: notch;
border-top-left-radius: 30px 50%;
border-bottom-left-radius: 30px 50%;

উপসংহার

তো corner-shape আসলে একটি হেলুভা অনেক মজা। এটি অবশ্যই আমার প্রত্যাশার চেয়ে আরও বেশি ব্যবহার রয়েছে এবং কিছু পরীক্ষায় সন্দেহ নেই যে আপনি আরও কিছু নিয়ে আসবেন। এই বিষয়টি মাথায় রেখে, আমি এটি আপনার কাছে সিএসএস-ট্রিক্সারদের সাথে গোলমাল করার জন্য রেখে দেব (মনে রাখবেন, আপনার ক্রোম 139 বা তার বেশি ব্যবহার করা দরকার)।

বিভাজন উপহার হিসাবে, আমি আপনাকে এই খুব শীতল তবে সম্পূর্ণ অকেজো সিএসএস টিআইই যোদ্ধা দিয়ে রেখে দিয়েছি, যা দিয়ে তৈরি corner-shape এবং অ্যাঙ্কর অবস্থান: