কীভাবে সিএসএস ব্যবহার করে সৌন্দর্য পূর্ণ প্রদীপ্ত সামাজিক যোগাযোগের আইকন তৈরি করা যায় ।



 সিএসএস ব্যবহার ব্যবহারের মাধ্যমে সৌন্দর্য পূর্ণ প্রদীপ্ত সামাজিক যোগাযোগের আইকন তৈরি করা যেতে পারে। হুম, তা শেখানোর জন্য এই টিউটোরিয়াল ।

হ্যালো, বন্ধুরা আজকে আপনাদের সাথে শেয়ার করব কীভাবে সিএসএস ব্যবহার করে সৌন্দর্য পূর্ণ প্রদীপ্ত সামাজিক যোগাযোগের আইকন তৈরি করবেন। এবং আপনাদের উপহার হিসেবে সোর্স কোড তো পাচ্ছেন নিচে । সোর্স কোড কাস্টমাইজেশন এর মাধ্যমে আপনি কিছু পরিবর্তন করতে পারবেন। এই বিষয়টি তো পুরোপুরি আপনার উপর নির্ভর করবে । আর যদি আপনি এই সবে নতুন হন তাহলে আজকের এই টিউটোরিয়াল এর মাধ্যমে তা পরিষ্কার ভাবে শিখতে পারবেন ।

চলুন তাহলে শিখে নিই । আমি শেখানোর আগে আপনাদের উপহার হিসেবে সোর্স কোড টি দিলাম । আমি সোর্স কোডের নিচে সম্পূর্ণ ব্যাখ্যা তৈরি করেছি । নিচে যেয়ে ব্যাখ্যা দেখতে পারেন ।


Source Code:
🍃





আশাকরি, আপনারা এইচটিএমএল ফাইলের কমন বা সাধারণ গঠন সম্পর্কে জানেন । না জানলে কমেন্ট বক্স এ আমাকে জানাতে পারেন । আমি সেই বিষয় নিয়ে লিখত টিউটোরিয়াল বা আর্টিকেল বা কন্টেন্ট লেখব।

 সিএসএস ব্যবহার করে সৌন্দর্য পূর্ণ প্রদীপ্ত সামাজিক যোগাযোগের আইকন তৈরি করার জন্য । প্রথমত আমাদের সিএসএস সামাজিক আইকন আমদানি বা import করতে হবে ।
তার জন্য আমরা চাইলে স্টাইল ট্যাগের মাঝে আমদানি করতে পারি অথবা হেড ট্যাগে রেল হিসেবে ও করতে পারি । নিচে দুটি উদাহরণ দেওয়া হল -

১. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


অবশ্যই হেড ট্যাগে মধ্যে এটি দিতে হবে । অথবা


২. @import url(' https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');


অবশ্যই স্টাইল ট্যাগে মধ্যে আমদানি করতে হবে  ।


এখন আমরা এইচটিএমএল তৈরি করব -


<body> <div class="container"> <i class="fa fa-apple" id="apple"></i> <i class="fa fa-twitter" id="twitter"></i> <i class="fa fa-github-square github" id="github"></i> <i class="fa fa-facebook-square" id="facebook"></i> </div>

</body>


অবশ্যই বডি ট্যাগে মধ্যে রাখতে হবে ।


আশাকরি আপনারা জানেন যে, একটি সিএসএস কীভাবে এইচটিএমএল এ সংযো করতে হয় । না জানলে আমি ব্যাখ্যা দিতেছি - একটি সিএসএস এইচটিএমএল এ সংযোগ করতে ক্লাস এর ভিতর রাখতে হয় । যেমন : <div class="সিএসএস"></div>

এটি যদি বুঝে থাকি, তাহলে আমারা এখন সিএসএস তৈরি করব-


*{margin: 0; padding: 0;}  body { height: 100vh; width: 100vw; background: #18191f;}.container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw;}#apple,#twitter,#github,#facebook { font-size: 8em; background-color: #18191f; color: #fff; box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080, 2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080; border-radius: 29px; padding: 11px 19px; margin: 0 40px; animation: animate 3s linear infinite; text-shadow: 0 0 50px red, 0 0 100px red, 0 0 150px red, 0 0 200px red;}#twitter { animation-delay: 0.3s;}#facebook { animation-delay: 0.7s;}#github { animation-delay: 0.1s;}@keyframes animate { from {filter: hue-rotate(0deg);} to { filter: hue-rotate(360deg); }}



শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সামাজিক আইকন প্রদীপ্ত করতে পারবেন ।



My Talk:

ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন ।   তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব ।  আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি   আমি এটি আমার বিশ্বাস। 



🍃

    My Talk:

    Thank you for reading this blog.
    Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!