কোনও 'বাক্স-ছায়া-বর্ণ' সম্পত্তি আছে কি?

Question

আমার নিম্নলিখিত সিএসএস রয়েছে:

box-shadow: inset 0px 0px 2px #a00;

পৃষ্ঠাটির রঙগুলি 'ত্বকে চামড়াযুক্ত' করতে এখন আমি সেই রঙটি বের করার চেষ্টা করছি। এই কাজ করার কোন উপায় আছে কি? কেবল রঙ মুছে ফেলা এবং তারপরে একই কীটি আবার ব্যবহার করে মূল নিয়মটিকে ওভাররাইট করে।

এটি বলে মনে হয় না box-shadow-color, কমপক্ষে গুগল কিছুই আপ করে না।

Comments

কোয়েরি শুরুর সময় "-" এর কারণে গুগল কিছুই ফিরিয়ে দেয় :)

— ইলন

Answer 1

নং:

http://www.w3.org/TR/css3-background/#the-box-shadow

আপনি এটি গণনা করা শৈলীর তালিকা পরীক্ষা করে Chrome এবং ফায়ারফক্সে যাচাই করতে পারেন। শর্টহ্যান্ড পদ্ধতি রয়েছে এমন অন্যান্য বৈশিষ্ট্যগুলির (যেমন border-radius) বৈশিষ্টগুলিতে বর্ণের সংজ্ঞা দেওয়া হয়।

বেশিরভাগ অনুপস্থিত "লম্বা হাত" সিএসএসের বৈশিষ্ট্যগুলির মতো, সিএসএস ভেরিয়েবলগুলি এই সমস্যাটি সমাধান করতে পারে:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

Comments

এটি ভেরিয়েবলের দুর্দান্ত ব্যবহার! আসুন আশা করি যে তারা আগামী কয়েক বছরের মধ্যে সমস্ত ব্রাউজারগুলিতে সমর্থিত হবেন: /

— ফ্রেগ্যান্ট

2019 পর্যন্ত সমস্ত বড় ব্রাউজারগুলি সিএসএস ভেরিয়েবলগুলিকে সমর্থন করে ।

— রেলগুন

... আপনি যদি এখনও IE সমর্থন না করেন 😭

— ক্যাম জ্যাকসন

Answer 2

আসলে… আছে! প্রকার, রকম. box-shadowডিফল্ট color, ঠিক যেমন border।

Http://dev.w3.org/.../#the-box-shadow অনুসারে

রঙ ছায়ার রঙ। যদি রঙটি অনুপস্থিত থাকে তবে ব্যবহৃত রঙটি 'রঙ' বৈশিষ্ট্য থেকে নেওয়া হয়।

অনুশীলনে, আপনাকে colorসম্পত্তিটি পরিবর্তন করতে হবে এবং box-shadowকোনও রঙ ছাড়াই ছেড়ে দিতে হবে :

box-shadow: 1px 2px 3px;
color: #a00;

সমর্থন

• সাফারি 6+
• ক্রোম 20+ (কমপক্ষে)
• ফায়ারফক্স ১৩+ (কমপক্ষে)
• IE9 + (IE8 মোটেই সমর্থন করে না box-shadow)

ডেমো

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

নীচের মন্তব্যে উল্লিখিত বাগটি তখন থেকেই ঠিক করা হয়েছে :)

Comments

সিএসএস অ্যানিমেশনগুলিতে ক্রোম 22 (ক্যানারি) এ একটি বাগ রয়েছে যার ফলে বাক্স-ছায়া অ্যানিমেটেড colorসম্পত্তির উত্তরাধিকারী হয় না । কোড.google.com/p/chromium/issues/detail?id=133745

— ডেভিড

ভাল হ্যাক, যদি উপাদানটিতে কোনও পাঠ্য না থাকে।

— ফিনিক্স

হ্যাঁ, অন্যথায় আপনাকে এটিকে জড়িয়ে রাখতে হবে এবং colorসন্তানের উপাদানটিতে পুনরায় আবেদন করতে হবে।

— ফ্রেংতে

আমি নিশ্চিত করতে পারি যে এটি আইই 10 এর জন্য একই।

— ম্যাক্সআর্ট

একটি বুদ্ধিমান এবং প্রাসঙ্গিক উত্তরের জন্য ধন্যবাদ । +10 আপনাকে!

— কুমারহর্ষস

Answer 3

আপনার ত্বক করতে আপনি একটি সিএসএস প্রি-প্রসেসর ব্যবহার করতে পারেন। সঙ্গে Sass আপনি এই অনুরূপ কিছু করতে পারেন:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

যদি এটি সাইট বিস্তৃত থিসিং না হয় তবে ক্লাস ভিত্তিক তাদের প্রয়োজনীয়করণের প্রয়োজন হয় তবে আপনি এটি করতে পারেন: http://codepen.io/jjenzz/pen/EaAzo

Answer 4

আপনি সিএসএস ভেরিয়েবলের সাহায্যে এটি করতে পারেন

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

Answer 5

আপনি ক্রোম এবং ফায়ারফক্সের জন্য ব্যবহার করতে পারেন এমন একটি দ্রুত এবং অনুলিপি / পেস্টটি হ'ল: (রঙ বদলে # এর পরে স্টাফ পরিবর্তন করুন)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

ম্যাট রবার্টসের উত্তর ওয়েবকিট ব্রাউজারগুলির (সাফারি, ক্রোম ইত্যাদির) জন্য সঠিক, তবে আমি ভেবেছিলাম যে কোনও ছায়া তৈরির জন্য প্রোগ্রাম শিখতে বলার পরিবর্তে সেখানকার কেউ দ্রুত উত্তর পেতে পারে।

Answer 6

হ্যাঁ, একটি উপায় আছে

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

Answer 7

হতে পারে এটি নতুন (আমি CSS3 তেও বেশ বকাঝকা), তবে আমার একটি পৃষ্ঠা রয়েছে যা আপনার পরামর্শ অনুসারে সঠিকভাবে ব্যবহার করবে:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. এবং এটি আমার পক্ষে ভাল কাজ করে (কমপক্ষে ক্রোমে)।

Comments

প্রশ্নটি ছিল কেবলমাত্র বাক্সের ছায়ার রঙ কীভাবে পরিবর্তন করা যায় ।

— জুলিয়ান ডি।