Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস৩ এর মাধ্যমে গ্র্যাডিয়েন্ট ইফেক্ট

1,337 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 0

162 টিউনস 69 টিউমেন্টস 1 ফলোয়ার

সিএসএস৩  মাধ্যমে ফটোশপের মত গ্র্যাডিয়েন্ট  ইফেক্ট যেমন- linear , radial  এসব ধরণের ইফেক্ট ই দেওয়া যায়।এগুলো  আজকে আমার টিউটোরিয়াল এ দেখাব  কিভাবে এই ইফেক্টগুলোর কোড লিখতে হয় ।এক্ষেত্রে সকল ব্রাউজারের জন্য আলাদা আলাদা কোড উল্লেখ করে দিতে হয়।

সকলের জন্য আলাদা আলাদা কোড হলেও সবার জন্য একটি  স্ট্যান্ডার্ড কোড হবে। সেটি নিচে উল্লেখ করা হল-

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]* )</stop></stop></stop></angle></point>

আমি আলাদা আলাদাভাবে ৪টা উদাহরনের  মাধ্যমে  গ্র্যাডিয়েন্ট  ইফেক্ট দেখাব। তার মধ্যে ২টি রংধনুএবং ২টি সাধারণ।
তবে  গ্র্যাডিয়েন্ট  ইফেক্ট  দেওয়ার ক্ষেত্রে শেষ এবং শুরুর বিন্দু উল্লেখ করে দিতে হয়। একটি খুবই দরকারী। আমি নিচের কোডটি ব্যবহার করলাম শেষ এবং শুরুর বিন্দুর কোড হিসেবে-

* old:  color-stop(percentage/amount, color) */
color-stop(0.20, red)

/* current:  color _ percentage/amount */
#dea222 20%

এখন আমাদের প্রজেক্ট এর কোড সমুহ লিখব।

তো চলুন দেখি-

উদাহরণ-১

এর জন্য সিএসএস কোড-

#example1  {
  /* fallback */
  background-color: #063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
  /* chrome 10+, safari 5.1+ */
  background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
  /* firefox; multiple color stops */
  background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
  /* ie 6+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
  /* ie8 + */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
  /* ie10 */
  background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
  /* opera 11.1 */
  background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
  /* The "standard" */
  background-image: linear-gradient(#063053, #395873, #5c7c99);
}

উদাহরণ-২

এর জন্য সিএসএস কোড-

#example2  {
  /* fallback */
  background-color:#063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
  /* chrome 10+, safari 5.1+ */
  background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
  /* firefox; multiple color stops */
  background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
  /* ie10 */
  background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
  /* opera 11.1 */
  background-image: -o-linear-gradient(45deg, #063053, #395873);
  /* The "standard" */
  background-image: linear-gradient(45deg, #063053, #395873);
}

উদাহরণ-৩

এর জন্য সিএসএস কোড-

/* example 3 - linear rainbow */
#example3  {
  /* fallback */
  background-color:#063053;
  /* chrome 2+, safari 4+; multiple color stops */
  background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
  /* chrome 10+, safari 5.1+ */
  background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
  /* firefox; multiple color stops */
  background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
  /* ie10 */
  background-image: -ms-linear-gradient(red, green, blue, purple, orange);
  /* opera 11.1 */
  background-image: -o-linear-gradient(red, green, blue, purple, orange);
  /* The "standard" */
  background-image: linear-gradient(red, green, blue, purple, orange);
}
উদাহরণ-৪

এর জন্য সিএসএস কোড-


#example4 {
  background-image: -moz-radial-gradient(orange, red);
  background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
  background-image: -webkit-radial-gradient(orange, red); /* new syntax */
  background-image: radial-gradient(orange, red);
}

এগুলো <style></style> এর ভিতরে লিখে নিচের কোড গুলো <body></body> অংশে লিখতে হবে।

 

 

<div style="height:40px;margin-bottom:30px;border:1px solid #ccc;" id="example1"></div>
<div style="height:40px;margin-bottom:30px;border:1px solid #ccc;" id="example2"></div>
 <div style="height:40px;margin-bottom:30px;border:1px solid #ccc;" id="example3"></div>
<div style="height:200px;margin-bottom:30px;border:1px solid #ccc;" id="example4"></div>

ডেমোতে দেখে নিতে পারেন প্রজেক্টটি।

আজ এই পর্যন্ত। ধন্যবাদ।

পোস্টটির মূল লেখক: টিউটোহোস্ট টিম সদস্য "নিলুফার ইয়াসমিন"

পোস্টটি ইতোপূর্বে:এখানে প্রকাশিত

Level 0

আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস