সিএসএস কাট আউট টেক্সট কিভাবে করবেন?
পটোশপ দিয়ে আমরা বিভিন্ন টেক্সট ইফেক্ট করে থাকি। তবে, CSS-3 দিয়েও এরকম অনেক ইফেক্ট করা যায়, যার একটি হল, কাটআউট টেক্সট। আমার মনে হয় না কাটআউট টেক্সট খুব বেশি ব্যবহৃত হয়। কিছু কিছু ওয়েবসাইটের স্লাইডারে এধরনের টেক্সট ইফেক্ট দেখা যায়। আমি জানি না, আপনাদের চোখে এটি কেমন লাগবে! কাটআউট টেক্সট আমার দেখতে সুন্দর লাগে। তাই আপনাদের সাথে শেয়ার করেছি। দেখতে ভাল লাগলে একটি লাইক অন্তত আশা করতে পারি। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>CSS Cut Out Text Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
font-family:arial black;
background-image: url("images/coxbazar.jpg");
background-size:100% 100%;
position: relative;
height: 500px;
}
.cut_out {
background-color:#fff;
color:#000;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding:0;
width: 90%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
-webkit-border-radius:10px;
border-radius:10px;
}
@media (min-width: 601px) and (max-width: 1024px) {
.container{height:400px}
}
@media (min-width: 300px) and (max-width: 600px) {
.container{height:300px}
}
</style>
</head>
<body>
<div class="container">
<div class="cut_out">Markup School</div>
</div>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন