সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো মার্কার তৈরি করার পদ্ধতি।
⚒️সিএসএস মার্কার তৈরি করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ marker - মার্কারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ marker-start - শুরুর মার্কার নির্ধারণ করা
- ➡️ marker-mid - মধ্যবর্তী মার্কার নির্ধারণ করা
- ➡️ marker-end - শেষ মার্কার নির্ধারণ করা
marker - মার্কারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
marker: url(#arrow);
}
</style>
</head>
<body>
<svg width="300" height="120" viewBox="0 0 300 120">
<defs>
<marker id="arrow"
markerWidth="10"
markerHeight="10"
refX="5"
refY="5"
orient="auto">
<path d="M0,0 L10,5 L0,10 Z"></path>
</marker>
</defs>
<path d="M30 60 L270 60"></path>
</svg>
</body>
</html>
marker-start - শুরুর মার্কার নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
marker-start: url(#arrow);
}
</style>
</head>
<body>
<svg width="300" height="120">
<defs>
<marker id="arrow"
markerWidth="10"
markerHeight="10"
refX="5"
refY="5"
orient="auto">
<path d="M0,0 L10,5 L0,10 Z"></path>
</marker>
</defs>
<path d="M30 60 L270 60"></path>
</svg>
</body>
</html>
marker-mid - মধ্যবর্তী মার্কার নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
marker-mid: url(#circle);
}
</style>
</head>
<body>
<svg width="300" height="150">
<defs>
<marker id="circle"
markerWidth="10"
markerHeight="10"
refX="5"
refY="5">
<circle cx="5" cy="5" r="4"></circle>
</marker>
</defs>
<path d="M30 100 L100 30 L170 100 L240 30"></path>
</svg>
</body>
</html>
marker-end - শেষ মার্কার নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
fill: none;
stroke: black;
stroke-width: 3;
marker-end: url(#arrow);
}
</style>
</head>
<body>
<svg width="300" height="120">
<defs>
<marker id="arrow"
markerWidth="10"
markerHeight="10"
refX="5"
refY="5"
orient="auto">
<path d="M0,0 L10,5 L0,10 Z"></path>
</marker>
</defs>
<path d="M30 60 L270 60"></path>
</svg>
</body>
</html>
সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| marker | মার্কারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| marker-start | শুরুর মার্কার নির্ধারণ করতে ব্যবহৃত হয়। |
| marker-mid | মধ্যবর্তী মার্কার নির্ধারণ করতে ব্যবহৃত হয়। |
| marker-end | শেষ মার্কার নির্ধারণ করতে ব্যবহৃত হয়। |