কিভাবে তৈরি: CSS রংবহণ

রংবহণ কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন:

এই উদাহরণে, রংবহণটি button ইলেমেন্টের অংশ হয়:

<button class="btn">A button for something cool <span class="ribbon">NEW</span></button>

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

আপনাদের নিজেদের করুন

উদাহরণ ব্যাখ্যা:

এই উদাহরণে, CSS-কে একটি বাটনে একটি রংবহণ ইফেক্ট যোগ করার জন্য ব্যবহার করা হয়। এই রংবহণটি বাটন ইলেমেন্টের ভিতরে একটি নির্দিষ্ট শৈলীর সঙ্গে সংযুক্ত স্প্যান ইলেমেন্ট দ্বারা প্রদর্শিত হয়। এই স্প্যান ইলেমেন্টটি বাটনের ডান উপরের কোণে অবস্থান করে, এবং 20 ডিগ্রি উপরে স্পিরাল করা হয়, যার ফলে একটি রংবহণ ইফেক্ট তৈরি হয়। রংবহণের প্রক্ষেপণ রং এবং লেখার রংও বাটনের সঙ্গে ভিন্ন রংয়ে সজ্জিত হয়, যার ফলে বিজ্ঞাপনীয় দৃশ্যশৈলী বৃদ্ধি করা হয়。