কম্পিউটার

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল কাটআউট/নকআউট পাঠ্য তৈরি করবেন?


CSS এর সাথে প্রতিক্রিয়াশীল নকআউট পাঠ্য তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
   .image-container {
      background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
      background-size: cover;
      position: relative;
      height: 300px;
   }
   .text {
      background-color: rgb(0, 0, 0);
      color: rgb(255, 255, 255);
      font-size: 10vw;
      font-weight: bold;
      margin: 0 auto;
      padding: 10px;
      width: 50%;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      mix-blend-mode: multiply;
   }
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Cutout Text Example</h1>
<div class="image-container">
<div class="text">FOREST</div>
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল কাটআউট/নকআউট পাঠ্য তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি উজ্জ্বল লেখা তৈরি করবেন?

  2. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল প্রশংসাপত্র তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ব্লগ লেআউট তৈরি করবেন?

  4. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল কলাম কার্ড তৈরি করবেন?