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

আশা করি সবাই ভালো আছেন। তো মুল অংশে যাওয়া যাক কারন "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 এফেক্ট পেতে আমার ব্লগটি দেখতে পারেন।

 

Level 3

আমি সৌরভ। Founder And Author, DarkMagician, Feni। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 8 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 63 টি টিউন ও 61 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 10 ফলোয়ার আছে এবং আমি টেকটিউনসে 5 টিউনারকে ফলো করি।

নিজেকে নিয়ে বলার মত কিছু নেই আমি খুব সাধারন একজন। তবে আমার একটি ছোট্ট ব্লগ রয়েছে চাইলে ঘুরে আসতে পারেন আরো জানতে। DarkMagician


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

ধারুন টিউন করছেন

free internet update, web devlopment, HTML, HTML 5 , CSS, java script, full tutorials পেতে সবসময় আমাদের সাথেই থাকুন।
1.ওয়ার্ড প্রেস
2.জাভা স্ক্রিপ্ট
3.CSS PDF free book download
4.এইচ টি এম এল full বাংলা Tutorials
5.এসইও বাংলা ভিডিও টিউটোরিয়াল
http://forambd24.blogspot.com