ওয়েব ডেভেলপারের জন্য উপকারি কতগুলো CSS কোড

আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি তারা সবাই চাই ওয়েবসাইটকে সুন্দর করতে। সেজন্য বিভিন্ন রকম ওয়েব সাইট ডিজাইন টুলস,জাভাস্ক্রিপ্ট,জেকোয়ারী,সিএসএস ইত্যাদি ব্যবহার করে থাকি। অনলাইনে এরকম অনেক টুল পাওয়া যায় যেগুলো ব্যাবহার করে যেমনঃ অ্যানিমেশন ফাইল, হেডার, হোভার ইফেক্ট, ফন্টস স্টাইল এবং বিভিন্ন টাইপের লোডার ইত্যাদি ব্যাবহার করে আমরা ওয়েবসাইটকে দৃষ্টিনন্দন ও ক্রিয়েটিভ করে তুলতে পারি। বেশিরভাগ সময় অনলাইনে এগুলো ব্যাবহারের দিকনির্দেশনা স্টেপ বাই স্টেপ করে দেয়া থাকে।

নিচের সিএসএস কোডগুলোর মধ্য কতগুলো কোড আছে যেগুলো আপনারা ফ্রি ডাউনলোড করে ওয়েবপেজে বিভিন্ন স্টাইল দিয়ে ব্যাবহার করতে পারবেন। এই কোডগুলো আপানারা শুধু HTML ফাইলে পেস্ট করে ডাইরেক্ট ব্যাবহার করতেপারবেন। এই কোডগুলো ব্যাবহারের জন্য JavaScripts বা query জানার দরকার নেই।

Hover Effect   

 

এই সিএসএস কোড ব্যাবহার করে বিভিন্ন ধরনের সুন্দর সুন্দর হোভার ইফেক্ট দেওয়া যায়। আপনি চাইলে ইমেজ, ইমেজগুলোর রং, এমনকি আকারও আপনি পরিবর্তন করতে পারবেন। ইফেক্ট গুলো বক্স এর আকার বা ভারটিকেলি অথবা হরিজেনটলি ভাবে প্রদর্শিত হয়। সাইট টি দেখতে চাইলে এর ঠিকানা http://tympanus.net/Development/HoverEffectIdeas/

 Animated Text Fills

Animated Text Fills এই টুলটি ব্যাবহার করলে টেক্সট এর কিছু অংশ নির্বাচন করে এটির মধ্যে কিছু অ্যানিমেশন যোগ করা যায়। এটা হতে পারে অ্যানিমেটেড stoke প্যাটার্ন বা রং পরিবর্তন অথবা অ্যানিমেটেড আকারে। সাইট টি এর ঠিকানা http://tympanus.net/Tutorials/AnimatedTextFills/

Material UI

Material UI একটি সম্পূর্ণ CSS ফ্রেমওয়ার্ক। সেই সাথে এটি গুগলের নকশা করা react components। ডেভেলপাররা সরাসরি এই লাইব্রেরীতে গিয়ে Google material design সম্পর্কে আরও অনেক কিছু শিখতে পারে এবং কোডগুলো ব্যাবহার করতে পারে। এটি একটি NPM প্যাকেজ। এদের স্টাইলশিটগুলো ইনলআইনে ডিফাইন করা। দুইটি থেকে যেকোনো একটি বাছাই করুন। সাইট এর ঠিকানা http://material-ui.com/#/

Tumblr –Style COG Loaders

এই কোডটি  ব্যাবহার করলে tumblr  স্টাইলে অ্যানিমেটেড হয়ে লোড হয়। ডেভেলপাররা তাদের পছন্দমতো মেথড ব্যাবহার করে ইমেজ লোড করার কাজে ব্যাবহার করতে পারবে। সাইট টি দেখতে চাইলে এর ঠিকানা http://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/

Jeet

গ্রিড সিস্টেমে লেখার কোড এটি। ডেভেলপারদের বার কলাম নিয়ম ফলো করার দরকার নেই। ডেভেলপারগণ খুব সহজে এবং কম কোড দিয়ে, গ্রিডের সাহায্য দ্রুত তাদের কাজ করতে পারেন। সাইট টি দেখতে চাইলে এর ঠিকানা http://jeet.gs/ 

Item Transition Inspirations

নাম দেখেই বোঝা যাচ্ছে এটি transitions এর জন্য কোড। এটি দিয়ে এককথায় অসাম টাইপের transitions বানানো যায়। এখানে বিশাল লিস্ট  যেমন, সাফল, স্নেক, কভেরফ্লো, ফেরিস হুইল, ভারতিকেল স্কেল এবং আরও অনেক টাইপের যা ডেভেলপারগণ নিজেদের চাহিদা মতো পছন্দ করতে পারে। এখানে ছোট কম্পোনেট, ফুল উয়িদথ এবং ট্রান্সপারেন্ট এই তিনটি উপায়ে transitions ইফেক্ট ডিসপ্লে করা যায়।  সাইটের এর ঠিকানা http://tympanus.net/Development/ItemTransitions/

Loading Effects

 

এখানে কিছু ক্রিয়েটিভ লোডইং ইফেক্ট এর উদাহরণ আছে। এই কোড ব্যাবহার করে ডেভেলপাররা এই ধরনের ইফেক্ট তৈরি করতে পারবে। তবে এটির একটি আসুবিধা সব ব্রাউজারে এটি সাপোর্ট করেনা।  http://tympanus.net/Development/CreativeLoadingEffects/

 

Textured Text

এখানে ডেভেলপারগণ CSS দিয়ে textured texts বানানোর টেকনিক পাবে। আট অথবা নয়টি স্টাইল থেকে ডেভেলপাররা তাদের টেকনিকটি বাছাই করতে পারবে।

Single Element CSS Spinners

এখান থেকে ডেভেলপাররা কিছু CSS spinners পাবে যা ডাউনলোদের সময় কে দেখাতে ডেভলপাররা ব্যাবহার করতে পারে।  http://projects.lukehaas.me/css-loaders/

CSS responsive tabbed navigation

এই কোড দিয়ে রেস্পন্সিভ ট্যাব ন্যাভিগেশন যা স্ক্রিন সাইজ হতে পারে সেরকম ডেভেলপাররা তাদের সাইটে যোগ করতে পারবে। http://codyhouse.co/demo/responsive-tabbed-navigation/index.html#0

comments

CSSfeatured