আমি ফটোশপ মক-আপে একটি বোতাম শৈলীর অনুলিপি দেওয়ার চেষ্টা করছি যার গায়ে দুটি ছায়া রয়েছে। প্রথম ছায়াটি একটি অভ্যন্তরীণ হালকা বাক্সের ছায়া (2px), এবং দ্বিতীয়টি নিজেই বোতামের বাইরে ড্রপ ছায়া (5px)।
ফটোশপে এটি সহজ - অভ্যন্তরীণ ছায়া এবং ড্রপ ছায়া। সিএসএসে আমি স্পষ্টতই এক বা অন্যটি পেতে পারি তবে একই সাথে উভয়ই নয়।
আপনি যদি কোনও ব্রাউজারে নীচের কোডটি চেষ্টা করেন তবে দেখতে পাবেন যে বাক্স-ছায়া ইনসেট বক্স-ছায়াকে ওভাররাইড করে।
এখানে ইনসেট বাক্সের ছায়া রয়েছে:
box-shadow: inset 0 2px 0px #dcffa6;এবং এটি আমি বোতামের ড্রপ শেডোর জন্য চাই:
box-shadow: 0 2px 5px #000;প্রসঙ্গে, এখানে আমার পূর্ণ বোতাম কোডটি (গ্রেডিয়েন্ট এবং সমস্ত সহ):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}