কিভাবে CSS3 সঙ্গে দ্রুত এবং সহজে গ্লা প্রভাব যোগ করুন

জোরদার জন্য একটি ওয়েব পৃষ্ঠা উপাদান একটি গ্লা যোগ করুন

আপনার ওয়েব পৃষ্ঠায় একটি উপাদান যোগ করা একটি নরম বাইরে গ্লাস উপাদান ভিউয়ার স্ট্যান্ড আউট করতে কারণ। একটি গুরুত্বপূর্ণ বস্তুর বাইরের প্রান্তের চারপাশে একটি উজ্জ্বলতা প্রয়োগ করার জন্য CSS3 এবং HTML ব্যবহার করুন। প্রভাব ফটোশপের একটি বস্তুর সাথে যুক্ত একটি বহিরাগত গ্লাসের মতো।

প্রথমে গ্লাইয়ের এলিমেন্ট তৈরি করুন

গ্লাস প্রভাব কোনো রঙ পটভূমিতে করা যেতে পারে, কিন্তু তারা গাঢ় পৃষ্ঠতলের উপর সেরা দেখায়, কারণ তারপর গ্লাস আরো ঝিল্লি মনে হয়। এই বৃত্তাকার-কোণায় আয়তক্ষেত্রাকার বাক্সের উদাহরণে, একটি ডিভি উপাদানটি একটি কালো পটভূমি সহ অন্য DIV উপাদানে স্থাপন করা হয়। বাইরের ডিভিটিটি গ্লাভের জন্য প্রয়োজনীয় নয়, তবে একটি সাদা ব্যাকগ্রাউন্ডের আলোকে দেখতে খুব কঠিন।

DIV একটি বর্গ একটি বর্গ দিন:

এলিমেন্টের আকার এবং রঙ সেট করুন

আপনি উপাদানটি নির্বাচন করার পরে একটি গ্লাস দিয়ে আলিঙ্গন করতে যাচ্ছেন, এগিয়ে যান এবং আপনি যে ধরণের শৈলীগুলি চান, যেমন পটভূমির রঙ, আকার এবং ফন্টগুলি যোগ করুন এই উদাহরণ হল একটি নীল আয়তক্ষেত্র; আকার 147px দ্বারা 90px দ্বারা সেট করা হয়; এবং পটভূমির রঙটি # 1f5afe, একটি রাজকীয় নীল রঙে সেট করা আছে। এটি কালো ধারক উপাদান মাঝখানে উপাদান স্থাপন একটি মার্জিন অন্তর্ভুক্ত।

<শৈলী>
.গ্লাস {
মার্জিন: স্বয়ংক্রিয়;
প্রস্থ: 147 পিএক্স;
উচ্চতা: 90 পিএক্স;
ব্যাকগ্রাউন্ড-রঙ: # 1f5afe;
}

কোণার রাউন্ড

গোলাকার কোণে একটি আয়তক্ষেত্র তৈরি করা CSS3 সহ সহজ। সীমায়-ব্যাসার্ধ শৈলী সম্পত্তি আপনার গ্লা বর্গ যোগ করুন। সর্বোচ্চ সঙ্গতির জন্য -webkit- এবং -moz-prefixes ব্যবহার করতে ভুলবেন না।

-ওয়েবকিট-সীমানা-ব্যাসার্ধ: 15px;
-মোজ-সীমানা-ব্যাসার্ধ: 15 পিএক্স;
সীমান্ত-ব্যাসার্ধ: 15 পিএক্স;

একটি বক্স শ্যাডো সঙ্গে গ্লা যোগ করুন

একটি স্বচ্ছতা বাক্স ছায়া দিয়ে তৈরি হয়। যেহেতু আপনি এটি পুরো উপাদানকে আকৃষ্ট করতে চান এবং ছায়ার মতো একপাশে গ্লাসকে প্রজেক্ট করেন না, আপনি অনুভূমিক ও উল্লম্ব দৈর্ঘ্য 0px তে সেট করুন। এই উদাহরণে, ব্লার ব্যাসার্ধ 15 পিক্সে নির্ধারিত হয় এবং ব্লারটি 5 পিক্সে ছড়িয়ে পড়ে, তবে আপনি এই সেটিংস দিয়ে ভেলভেট করতে পারেন যাতে আপনি কতটা বিস্তৃত এবং বিস্তৃত হতে চান তা দেখান। রং RGB (255,255,190) হল RGBa আলফা স্বচ্ছতার সাথে একটি হলুদ রং 75% -RGBA (255,255,190, .75)। আপনার প্রজেক্টের জন্য সেরা কাজ করে এমন একটি উজ্জ্বল রং চয়ন করুন। কোণগুলি বৃত্তাকার হিসাবে, সর্বোত্তম সামঞ্জস্যের জন্য ব্রাউজার প্রিফিক্স (-ওয়েবকিট-এবং -মোজ-) ব্যবহার করতে ভুলবেন না।

-বিবিকিট-বক্স-ছায়া: 0 পিএক্স 0 পিএক্স 15 পিএক্স 5 পিএক্স রেগবা (২5, ২5, ২5, 190, .75);
-মোজ-বক্স-ছায়া: 0 পিএক্স 0 পিএক্স 15 পিএক্স 5 পিএক্স রেগবা (২5, ২5, ২5, 190, .75);
বাক্স-ছায়া: 0 পিএক্স 15 পিএক্স 5 পিএক্স RGBA (255, 255, 190, .75);

গ্লাইসিং বাক্স পরীক্ষা করুন

এক বা একাধিক ব্রাউজারে ঝলকানো বক্স পরীক্ষা করুন এবং আপনার ওয়েব পৃষ্ঠার জন্য সর্বোত্তম কাজ করে এমন আলোক প্রভাব দিতে প্রয়োজনীয় কোনো সমন্বয় করুন।