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

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

প্রথমতঃ

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

PHP:

<style>

@import url(http://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 এফেক্ট পেতে আমার ব্লগটি দেখতে পারেন।