CSS3 স্বচ্ছতা + গ্রেডিয়েন্ট

Question

RGBA অত্যন্ত মজা, এবং তাই হয় -webkit-gradient, -moz-gradientএবং আহ ... progid:DXImageTransform.Microsoft.gradient... হ্যা। :)

আরজিবিএ এবং গ্রেডিয়েন্ট দুটি সংযুক্ত করার কোনও উপায় আছে, যাতে বর্তমান / সর্বশেষের সিএসএস স্পেস ব্যবহার করে আলফা স্বচ্ছতার গ্রেডিয়েন্ট থাকে।

Comments

@ জিও1701 এর মন্তব্যটি গৃহীত হওয়া উচিত, কারণ এটি আধুনিক মানের সাথে আরও প্রাসঙ্গিক।

— ডিমিত্রো শেভচেনকো

Answer 1

হ্যাঁ. আপনি ওয়েবকিট এবং মোজ গ্রেডিয়েন্ট উভয় ঘোষণায় rgba ব্যবহার করতে পারেন:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

( এসআরসি )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

( এসআরসি )

স্পষ্টতই আপনি এমনকি IE এ এটি করতে পারেন, একটি বিজোড় "বর্ধিত হেক্স" সিনট্যাক্স ব্যবহার করে। প্রথম জুটি (উদাহরণস্বরূপ 55) অস্বচ্ছতার স্তরকে বোঝায়:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

( এসআরসি )

Comments

এফওয়াইআই, "বর্ধিত হেক্স" 24-বিট আরজিবি রঙ মানের পরিবর্তে কেবল 32-বিট এআরজিবি।

— মাকেকে

আমি এগুলি স্ট্যান্ডার্ড সিএসএসেও কাজ করতে চাই, তবে শেষের দিকে আলফা দিয়ে (আরও প্রাকৃতিক বলে মনে হচ্ছে): #0001"প্রায় স্বচ্ছ কালো" এর জন্য শর্ট হেক্স #ffcc00ffহবে এবং #ffcc00অর্থাত "সম্পূর্ণরূপে অস্বচ্ছ টাঞ্জারিন হলুদ" হবে

— ভেড়া উড়ন্ত

এছাড়াও চেক আউট Colorzilla এ সিএসএস 3 গ্রেডিয়েন্ট জেনারেটর উপর যা চমৎকার প্রিসেট এবং সব ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ বৈচিত্র একটি গুচ্ছ আপনার পছন্দসই গ্রেডিয়েন্ট অর্জন করা হয়েছে

— andrhamm

সুতরাং, আমি এটি পরীক্ষা করে দেখেছি, সমস্ত বড় ব্রাউজারগুলিতে কাজ করে তবে এটি অপেরা, কোনও ক্লুতে কাজ করে না?

— WhoSayIn

কোনও বিষয় নয়, আমি এটি সবেমাত্র পেয়েছি;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));

— হুসেন

Answer 2

নতুন সিনট্যাক্স কিছু সময়ের জন্য সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত হয়েছে (ক্রোম 26, অপেরা 12.1, আইই 10 এবং ফায়ারফক্স 16 থেকে শুরু করে): http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

এটি শীর্ষে শক্ত কালো থেকে শুরু করে নীচে সম্পূর্ণ স্বচ্ছ হয়ে একটি গ্রেডিয়েন্ট রেন্ডার করে।

এমডিএন-তে ডকুমেন্টেশন ।

Comments

.. নীচে পুরোপুরি স্বচ্ছ করতে শীর্ষে শক্ত কালো তৈরি করে

— কমনপাইক

আমি ধরে নিলাম এটি একটি পরামর্শ এবং আসলে কাজ করে না?

— বার্ট

Answer 3

এটি কিছু সত্যিই দুর্দান্ত জিনিস! আমার প্রায় একই রকম প্রয়োজন, তবে সাদা থেকে স্বচ্ছ পর্যন্ত অনুভূমিক গ্রেডিয়েন্টের সাথে। এবং এটি ঠিক কাজ করছে! এখানে আমার কোডটি নেই:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

Comments

রেফারেন্সের জন্য, মাইক্রোসফ্ট প্রয়োগের ক্ষেত্রে গ্রেডিয়েন্টটাইপ = 1 অনুভূমিক, 0 টি উল্লম্ব।

— ব্রুকস

আই 7 এবং আই 8 গ্রেডিয়েন্টগুলি কোনও আলফা রঙ নির্দিষ্ট করে না? এগুলি কি সত্যিই স্বচ্ছ হয়ে যায়?

— KajMagnus

Answer 4

আমার কোডটি এখানে:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

Answer 5

#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

আমি ডাব্লু 3 স্কুলগুলিতে এটি পেয়েছি এবং যখন আমি গ্রেডিয়েন্ট এবং স্বচ্ছতার সন্ধান করছি তখন আমার প্রয়োজনগুলির সাথে উপযুক্ত। আমি ডাব্লু 3 স্কুলগুলিকে উল্লেখ করার জন্য লিঙ্কটি সরবরাহ করছি। আশা করি কেউ যদি গ্রেডিয়েন্ট এবং স্বচ্ছতার সন্ধান করে তবে এটি সহায়তা করবে।

http://www.w3schools.com/css/css3_gradients.asp

এছাড়াও আমি ডাব্লু 3 স্কুলগুলিতে এটি পরীক্ষা করে দেখার জন্য লিঙ্কটি আটকানো অস্বচ্ছতা পরিবর্তন করতে চেষ্টা করেছি

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

আশা করি এটা সাহায্য করবে.

Answer 6

নিম্নলিখিতটি হ'ল আমি একই রঙের জন্য স্বচ্ছ (নীচে) থেকে সম্পূর্ণ অস্বচ্ছ (শীর্ষ) থেকে 20% পর্যন্ত উল্লম্ব গ্রেডিয়েন্ট উত্পন্ন করতে ব্যবহার করছি :

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

Answer 7

আমি এই আরও সাম্প্রতিক উদাহরণ জুড়ে এসেছি। সহজতর ও সর্বাধিক সাম্প্রতিক উদাহরণগুলি ব্যবহার করতে, CSS কে 'গ্রেড' এর নির্বাচক শ্রেণি দেওয়া, (আমি পিছনের সামঞ্জস্যকে অন্তর্ভুক্ত করেছি)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient থেকে