Gradient is used with CSS

[bbasujon]

ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন।

১. Linear Gradient



এইটাতে ওপরে একটা এবং নিচে একটা রং।

ব্যবহৃত CSS:
-webkit-gradient(linear, left top, left bottom, from(red), to(white));
-moz-linear-gradient(red, white)
২. Reflected Gradient



এখানে তিনটি রং এর ব্যাবহার ঘটেছে।
ব্যবহৃত CSS:
-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
-moz-linear-gradient(left top, red, white, red);
৩. Reflected Gradients


এটার মাঝে এবং পাসে দুইটা রং ব্যাবহার করা যাবে। মাঝেটার গোল আকারের হবে।
ব্যবহৃত CSS:
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
-moz-radial-gradient(white, red)

আমি আপাতত এই তিনটা Gradients স্টাইল শিখেছি। তাই আপাতত এইখানেই টিউটোরিয়াল শেষ।