Dolphin.com.bd
Create your Own Website => CSS style => Topic started by: bbasujon on January 11, 2012, 05:22:04 AM
-
ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন।
১. Linear Gradient
(http://d2o0t5hpnwv4c1.cloudfront.net/770_CSS3PowerTools/gradient.png)
এইটাতে ওপরে একটা এবং নিচে একটা রং।
ব্যবহৃত CSS:
-webkit-gradient(linear, left top, left bottom, from(red), to(white));
-moz-linear-gradient(red, white)
২. Reflected Gradient
(http://d2o0t5hpnwv4c1.cloudfront.net/770_CSS3PowerTools/gradient2.png)
এখানে তিনটি রং এর ব্যাবহার ঘটেছে।
ব্যবহৃত 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
(http://d2o0t5hpnwv4c1.cloudfront.net/770_CSS3PowerTools/radial_gradient.png)
এটার মাঝে এবং পাসে দুইটা রং ব্যাবহার করা যাবে। মাঝেটার গোল আকারের হবে।
ব্যবহৃত CSS:
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
-moz-radial-gradient(white, red)
আমি আপাতত এই তিনটা Gradients স্টাইল শিখেছি। তাই আপাতত এইখানেই টিউটোরিয়াল শেষ।