ভৌতিক এফেক্ট টেক্সট যে ভাবে তৈরী করবেন আপনার সাইটের জন্য টিউটোরিয়াল দেখুন শিখুন এবং তৈরী করুন।

আশা করি সবাই ভালো আছেন। তো মুল অংশে যাওয়া যাক কারন “Time is Money , Money is Time”.
আজকের সিএসএস টা একটু ভিন্ন ভাবে আপনাদের মাঝে তুলে ধরার চেস্টা করলাম ।

আমরা অনেক ছবি বা অ্যানিমেশন ভৌতিক Text Effect দেখে থাকি যা অনেক আকর্ষনীয় লাগে আমার কাছে তাই নিজে আরম্ভ করলাম ভৌতিক text বানানো সিএসএস এর সাহায্যে । এবং যে এফেক্ট টি তৈরী করলাম তা আপনাদের মাঝে শেয়ার করলাম ভালো লাগলে জানাবেন আর কোন পরামর্শ থাকলে তা জানবেন ……।। অপেক্ষায় রইলাম ।

প্রথমতঃ

নিচের কোডটি আপনি আপনার সাইটের </body> ট্যাগ খুজে বের করে </body> ট্যাগটির উপরে Paste করবেন।

PHP:

---

<style>

@import url(https://fonts.googleapis.com/css?family=Denk+One);

@dark-gray: #212121;

@red: 255;
@green: 0;
@blue: 0;

body {
  background-color: @dark-gray;
}

h1 {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  font-family: 'Denk One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 2em;
  
  position: absolute;
  left: 50%;
  top: 35%;






  margin-left: -180px;
  
  -webkit-animation: horror-animation 5s infinite;
  -moz-animation: horror-animation 5s infinite;
  -o-animation: horror-animation 5s infinite;
  animation: horror-animation 5s infinite;
}

@-webkit-keyframes horror-animation {.mixi-frames;}
@-moz-keyframes horror-animation {.mixi-frames;}
@-o-keyframes horror-animation {.mixi-frames;}
@keyframes horror-animation {.mixi-frames;}

.mixi-frames () {
	0% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.1); left: 51%; top: 36%;}
	5% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.2); left: 50%; top: 35%;}
  10% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.3); left: 49%; top: 34%;}
	15% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.4); left: 50%; top: 35%;}
  16% {text-shadow: 0 0 5px @dark-gray; left: 50%}
  17% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.4); left: 50%;}
	20% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.5); left: 49%}
  25% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.6); left: 49%}
 	30% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.7); left: 50%}
	35% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.8); left: 50%}
  36% {text-shadow: 0 0 5px @dark-gray; left: 50%}
  37% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.8); left: 50%}
  40% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.9); left: 51%}
	45% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.8); left: 51%}
	50% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.7); left: 51%}
	55% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.6); left: 50%}
  56% {text-shadow: 0 0 5px @dark-gray; left: 50%}
  57% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.6); left: 52%}
  60% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.5); left: 50%}
	65% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.4); left: 50%}
	70% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.3); left: 49%}
  75% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.2); left: 49%}
  76% {text-shadow: 0 0 5px @dark-gray; left: 50%}



  77% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.2); left: 49%}
 	80% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.1); left: 49%}
	85% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.2); left: 51%}
  86% {text-shadow: 0 0 5px @dark-gray; left: 50%}
  87% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.2); left: 51%}
  90% {text-shadow: 0 0 5px rgba(@red,@green,@blue,0.3); left: 51%}
	95% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.4); left: 51%} 
 	100% {text-shadow: 0 0 10px rgba(@red,@green,@blue,0.5); left: 50%} 
}

</style>

আমি শুধু <h1> মানে হেডিং এর জন্য তৈরী করেছি তাই </h1> আপনি h1 ট্যাগেই এই Effect টি দেখতে পারবেন।

আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি হরর টেক্সট Effect তৈরী করতে চান।

PHP:

---

<h1>Horror Style Text Effect By Cyber Prince</h1>

নিচে থেকে ডেমো টি দেখে নিতে বা ডাউনলোড করে নিতে পারেন।

My Recording 00_00_06-00_00_27~1.mp4

সৌজন্যেঃসাইবার প্রিন্স।

এরকম দারুন সব CSS3 এফেক্ট পেতে আমার ব্লগটি দেখতে পারেন।