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