বিভিন্ন চিত্রের ব্যাকগ্রাউন্ডে পাঠ্য খুব বেশি পাঠযোগ্য নয়


30

আমি কীভাবে নিম্নলিখিতগুলি উন্নত করতে পারি সে সম্পর্কে কিছুটা নকশা সহায়তা বা পরামর্শ চেয়ে এখানে এসেছি:

শিরোনামের মতো বলে, আমার ব্যাকগ্রাউন্ড হিসাবে বিভিন্ন চিত্রগুলিতে একাধিক পাঠ্য প্রদর্শিত একটি ব্যানার রয়েছে। এখন, যেহেতু বেশিরভাগ চিত্রগুলি অন্ধকার, তাই আমি ফন্টের রঙটি সাদা হিসাবে সেট করেছি। তবে তারপরেও কয়েকটি পাঠ্য বেশ কয়েকটি চিত্রের মতো খুব বেশি পঠনযোগ্য নয়:

মান

যেহেতু আমি সিএসএসের সাথে কাজ করছি, আমি বিভিন্ন বিকল্পের চেষ্টা করেছি যেমন:

পাঠ্য শ্যাডো যুক্ত করা হচ্ছে:

পাঠ্য ছায়া সহ

সিএসএস:

text-shadow: 3px 3px 0px #000;

পাঠ্যের চারপাশে একটি অর্ধ-স্বচ্ছ বাক্স তৈরি করার চেষ্টাও করেছেন:

আধা স্বচ্ছ পটভূমি সহ

ডেমো

আমি মনে করি বাক্সটি জায়গাটির বাইরে দেখায়।

যে কেউ সিএসএস জানে তার জন্য আমি একটি বেড়া তৈরি করেছি । যদি তা না হয় তবে অনুগ্রহ করে একা আপনার কল্পনার উপর ভিত্তি করে আমাকে পরামর্শ করুন।

PS: আপনি যদি অন্যরকম ফন্ট ব্যবহার করতে পারেন তবে এটি আরও ভালভাবে দাঁড়াতে সহায়তা করবে।


4
আপনার পাঠ্যের উপর একটি নরম কালো বাহ্যিক আভা (সমস্ত দিকের ছায়া) কখনও কখনও আপনি এর পিছনে কিছু রেখেছেন এমনভাবে না তাকিয়ে এটি আরও বৈপরীত্য দেওয়ার পক্ষে যথেষ্ট হতে পারে।
জন

@ জন আমিও জ্বলনের বিষয়ে চিন্তাভাবনা করেছি, তবে প্রচুর আভাসের প্রভাব না পড়ে, পাঠযোগ্য নয় পাঠ্যের সমস্যাটি রয়ে গেছে এবং যেহেতু আমি একটি কর্পোরেট ওয়েবসাইটে কাজ করছি, তাই আমি এটিকে হস্তক্ষেপ করার সিদ্ধান্ত নিয়েছিলাম যেহেতু এটি পেশাদারিহীন দেখবে। যদিও পরামর্শের জন্য ধন্যবাদ!
আইআইবি

2
আমি কতটা সূক্ষ্ম কথা বলছিলাম তা জোর দেওয়া উচিত ছিল। 20-30% এবং প্রশস্ত ছড়িয়ে পড়ার মতো যেখানে আপনি এটি খুব কমই লক্ষ্য করবেন। যদি এটি কোনও আভাসের মতো লাগে বা আপনি কোনও রূপান্তর দেখতে পান - এটি খুব অন্ধকার। চারপাশের চিত্রটি কিছুটা গাer় সুরে ম্লান হয়ে যাওয়ার জন্য যথেষ্ট পরিমাণে ব্যবহার করুন যেখানে এটি অক্ষরটি পূরণ করে।
জন

@ জন হুম আকর্ষণীয় মনে হচ্ছে, আমি এটিও চেষ্টা করে দেখছি।
আইআইবি

উত্তর:


22

ইতিমধ্যে দুর্দান্ত উত্তরের বিকল্প হিসাবে, পাঠ্যের পিছনে 50% অস্বচ্ছতা সহ একটি কালো ডিভ যুক্ত করার পদ্ধতি কীভাবে?

এখানে চিত্র বর্ণনা লিখুন

এটি ফন্টটি মূলত কোনও ছবিতেও কাজ করতে দেয়।

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

EXAMPLE টি


@ আইএনএইচহিসচিজবার্গার কোন সমস্যা নেই! ব্যানার ইমেজগুলির মতো ওয়েবসাইটের কাজ করার ক্ষেত্রেও আমি একই সমস্যার মুখোমুখি হয়েছি এবং বেশিরভাগ সময় এটি কার্যকরভাবে কাজ করার কারণে এটি এটিকে কাছাকাছি নেওয়ার সবচেয়ে আনন্দদায়ক উপায় বলে মনে করি।
শনিবারে

17

আমি ফন্টকে সাহসী করে তোলার পরামর্শ দিচ্ছি (কেবলমাত্র ওজনের পরিবর্তন, ফন্ট নিজেই নয়) এবং ছায়াকে সম্মান জানাতে যাতে এটি অক্ষরের সমস্ত প্রান্তটি সংজ্ঞায়িত করে:

উদাহরণ 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

আপনি একটি সুনির্দিষ্ট রূপরেখা পাশাপাশি একটি অস্পষ্টতা তৈরি করতে একাধিক পাঠ্য-ছায়াকে একত্রিত করতে পারেন :

উদাহরণ 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

সময় দেয়ার জন্য ধন্যবাদ! আমি আপনার text-shadowদ্বারা প্রদত্ত সরবরাহগুলি স্যাটার্নস আইয়ের সমাধান সহ ব্যবহার করার পরিকল্পনা করেছি ।
আইআইবি

@ আমি কোনও বাক্স করিনি কারণ আপনি না বলেছিলেন। "পাঠ্যের চারপাশে একটি অর্ধ-স্বচ্ছ বাক্স তৈরি করার চেষ্টাও করেছি I বাক্সটি জায়গাটির বাইরে দেখায় বলে আমি মনে করি।" তবে আপনার সাইট, আপনার কল ...
অ্যান্ড্রু লিচ

এটি সত্য, তবে শনিবারের সমাধান দেখে আমি বুঝতে পেরেছিলাম যখন আকার এবং রঙ পরিবর্তন করা হয়েছিল it শব্দের ভুল পছন্দের জন্য দুঃখিত পরবর্তী সময় আমার আরও ভাল ব্যাখ্যা করা উচিত।
আইআইবি

3

এটি একটি কালো স্বচ্ছ পটভূমি এবং কিছু প্যাডিং দিন

পটভূমি-রঙ: rgba (0,0,0,0.5);

প্যাডিং: 0.5 মি;

এই সংখ্যাগুলির সাথে কেবল কিছুটা খেলুন তবে এটি আপনাকে ব্যবহারযোগ্য ফলাফল দেয়।


আপনার সময় জন্য ধন্যবাদ! আমি বুঝতে পেরেছি যে আপনার যদি এমন একটি ক্ষেত্রে থাকে যেখানে আভ্যন্তরীণ উপাদানটির বাইরের অংশে আলাদা ধরণের অস্বচ্ছতা থাকা প্রয়োজন তবে opacityসম্পত্তি এই ক্ষেত্রে সহায়তা করবে না যেখানে background-colorসম্পত্তির অস্বচ্ছতা সেট করে কাজ করে। এখানে
আইআইবি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.