আসসালামু আলাইকুম

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সকলেই ভাল আছেন। আমিও আল্লাহর রহমতে ভালো আছি এবং সুস্থ আছি আলহামদুলিল্লাহ।

আজকে আমি আপনাদের সাথে আলোচনা করব কিভাবে এইচটিএমএল সিএসএস দিয়ে টেক্সট মাস্ক তৈরি করবেন।
ডেমো না দেখিয়ে আপনাদের বোঝানো মুশকিল যে এটা কি। তাই নিচে ডেমো এর লিঙ্ক দিয়ে দিলাম এখান থেকে দেখে আসতে পারেন।

Demo Link:

Click Here To See

আপনি চাইলে নিচের HTML, CSS কোড কপি করতে পারেন। সেক্ষেত্রে আপনার নিজের ইমেজ ব্যবহার করতে হবে।
আর যদি সম্পূর্ণ কপি করতে চান তাহলে সোর্সকোড উপরের লিঙ্ক থেকে ডাউনলোড করে নিতে পারেন।

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Text Mask</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">

<body>

<section class="banner">
	<h1>TRICK BD</h1>
</section>
</body> </head>

CSS:

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

*{
	box-sizing: border-box;
}

.banner{
	background-color: #000000;
	height: 100vh;
	display: flex;
	align-items: center; /*vertical center*/
	justify-content: center; /* horizontal center*/
}

.banner h1{
	margin:0;
color:transparent; font-size: 180px; background-image:url('img/rfxu1nokaX.jpg'); background-size: cover; background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; transition:background-position 1s ease; } .banner h1:hover{ background-position: 0 -50%; }

সম্পূর্ণ পোস্টটি পড়ার জন্য আপনাকে ধন্যবাদ।

11 thoughts on "TrickBD টেক্সটের ভিতর অ্যানিমেশন ছবি যুক্ত করুন HTML CSS দিয়ে। কেউ লেখাতে চাপ দিলেই ইমেজ এনিমেশন হবে!!!"

    1. Rider Author Post Creator says:
      Thank You..!!! ?
  1. muradhasanmedia7 Contributor says:
    post ar aga matha kichui bujlam na …
  2. King Author says:
    বুঝলাম নাহ।।একটু বিস্তারিত লেখতেও পারতেন।
  3. Al Sayeed Author says:
    post beshi valo hoy nai
    ar, background-image:url(‘img/rfxu1nokaX.jpg’); ekhane image er full link na dile to kaj korbe na
  4. Lipon Islam Author says:
    Post er to kicui bujhlam na. ar demo link koi ?
  5. এইটা কি ছিল….!

    যিনি লিখেছেন একমাত্র তিনিই জানেন…!

    মানুষরে কি আপনার মতো বুদ্ধিমান ভাবছেন …..?

  6. Levi Author says:
    কোডগুলো দেয়ার জন্য যে html কোড ইউজ করেছেন সেগুলো দেয়া যাবে?

Leave a Reply