সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো অবস্থানের সরণ নির্দিষ্ট করার পদ্ধতি।
⚒️সিএসএস অবস্থানের সরণ নির্দিষ্ট করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ offset - অফসেটের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ offset-anchor - অফসেটের নোঙর বিন্দু নির্ধারণ করা
- ➡️ offset-distance - অফসেটের দূরত্ব নির্ধারণ করা
- ➡️ offset-path - অফসেটের পথ নির্ধারণ করা
- ➡️ offset-position - অফসেটের অবস্থান নির্ধারণ করা
- ➡️ offset-rotate - অফসেটের ঘূর্ণন নির্ধারণ করা
offset - অফসেটের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
height: 80px;
background: orange;
offset: path("M 20 100 C 100 0, 200 0, 280 100") 20px / auto 0deg;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>offset-anchor - অফসেটের নোঙর বিন্দু নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
background: orange;
offset-path: path("M 50 100 C 100 0, 200 0, 250 100");
offset-distance: 50%;
offset-anchor: 0% 50%;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>offset-distance - অফসেটের দূরত্ব নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
background: orange;
offset-path: path("M 20 100 C 100 0, 200 0, 280 100");
offset-distance: 50%;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>offset-path - অফসেটের পথ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
background: orange;
offset-path: path("M 20 100 C 100 0, 200 0, 280 100");
offset-distance: 50%;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>offset-position - অফসেটের অবস্থান নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
background: orange;
offset-position: 100px 100px;
offset-path: none;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>offset-rotate - অফসেটের ঘূর্ণন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
background: orange;
offset-path: path("M 20 100 C 100 0, 200 0, 280 100");
offset-distance: 50%;
offset-rotate: 45deg;
}
</style>
</head>
<body>
<div></div>
</body>
</html>সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| offset | অফসেটের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| offset-anchor | অফসেটের নোঙর বিন্দু নির্ধারণ করতে ব্যবহৃত হয়। |
| offset-distance | অফসেটের দূরত্ব নির্ধারণ করতে ব্যবহৃত হয়। |
| offset-path | অফসেটের পথ নির্ধারণ করতে ব্যবহৃত হয়। |
| offset-position | অফসেটের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। |
| offset-rotate | অফসেটের ঘূর্ণন নির্ধারণ করতে ব্যবহৃত হয়। |