কম্পিউটার টিউটোরিয়াল

CSS3 দিয়ে ট্রান্সপারেন্ট বক্সে টেক্সট তৈরি করার পদ্ধতি


উদাহরণ

CSS3-এ ট্রান্সপারেন্ট বক্সে টেক্সট সেট করার কোড নিচে দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.transparentBox {
    background: url("https://i.picsum.photos/id/249/1000/300.jpg") repeat;
    border: 2px solid black;
}
.transparentText {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
}
.transparentText p {
    margin: 5%;
    font-weight: bolder;
    color: #000000;
    font-size: 20px;
}
</style>
</head>
<body>
<h1>Text in transparent box example</h1>
<div class="transparentBox">
<div class="transparentText">
<p>This is some random text inside the transparent box</p>
</div>
</div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS3 দিয়ে ট্রান্সপারেন্ট বক্সে টেক্সট তৈরি করার পদ্ধতি


  1. CSS3 Word Break (Word Breaking Rules) নির্দিষ্ট করা

  2. CSS দিয়ে টেক্সট ধারক একটি কমেন্ট বক্স (Comment Box) তৈরি করা

  3. Mac-এ টেক্সট শর্টকাট ব্যবহার করার পদ্ধতি

  4. ওয়ার্ডে টেক্সট মিরর করার পদ্ধতি