গুগলের ইমেজবিহীন বোতামগুলি

Question

গুগলের নতুন চিত্রবিহীন বোতামগুলি সম্পর্কে সম্প্রতি কয়েকটি নিবন্ধ হয়েছে:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

Gmail এ এই নতুন বোতামগুলি কীভাবে কাজ করে তা আমি সত্যিই পছন্দ করি। আমি কীভাবে আমার সাইটে এই বা অনুরূপ বোতামগুলি ব্যবহার করতে পারি? অনুরূপ চেহারা এবং অনুভূতি সহ কোনও ওপেন সোর্স প্রকল্প রয়েছে?

আমি যদি জিকুয়েরি / এক্সএইচটিএমএল / সিএসএস ব্যবহার করে এই জাতীয় নিজস্ব বোতাম প্যাকেজটি রোল করতে চাই, তবে আমি কোন উপাদানগুলি ব্যবহার করতে পারি? আমার প্রাথমিক চিন্তাগুলি হ'ল:

1. <input type="button">চেহারা উন্নত করতে CSS সহ স্ট্যান্ডার্ড (নকশার নিবন্ধটি বেশিরভাগ CSS / imges সম্পর্কে জড়িত about

2. "অনক্লিক" ইভেন্টের বোতামটিতে একটি কাস্টম ডায়ালগ আনার জন্য জকোয়ারি জাভাস্ক্রিপ্ট আনতে হবে যার <a>মধ্যে ট্যাগ রয়েছে এবং ফিল্টারিংয়ের জন্য একটি অনুসন্ধান বার থাকবে? সেই পপআপের জন্য কোনও টেবিল বিন্যাসটি কি বুদ্ধিমান হতে পারে?

ওয়েবে বিপরীত প্রকৌশল জিনিসগুলিতে আমি ভয়ানক, এই বোতামগুলি বিপরীতে ইঞ্জিনিয়ার সাহায্য করতে আমি কী কী সরঞ্জাম ব্যবহার করতে পারি? ফায়ারফক্সের ওয়েব বিকাশকারী সরঞ্জামদণ্ড ব্যবহার করে আমি বোতামের পপআপ সংলাপগুলিতে ব্যবহৃত সিএসএস বা জাভাস্ক্রিপ্ট সত্যিই দেখতে পাচ্ছি না (এটি ছোট করা হলেও)। আমি তাদের দেখার জন্য এবং কিছু ধারণা পেতে কোন ব্রাউজারের সরঞ্জাম বা অন্যান্য পদ্ধতি ব্যবহার করতে পারি?

আমি গুগলের কোনও আইপি চুরি করতে চাইছি না, কেবল কীভাবে অনুরূপ বোতামের কার্যকারিতা তৈরি করতে পারি তার একটি ধারণা পান।

Answer 1

- সম্পাদনা - আমি মূল পোস্টে লিঙ্কটি দেখতে পেলাম না। দুঃখিত! আসল প্রশ্নটি প্রতিবিম্বিত করতে আবার লিখতে চেষ্টা করবে

StopDesign এই একটি চমৎকার পোস্ট হয়েছে এখানে । [সম্পাদনা 20091107] এগুলি ক্লোজার লাইব্রেরির অংশ হিসাবে প্রকাশ করা হয়েছিল : বোতামের ডেমো দেখুন ।

মূলত তিনি যে কাস্টম বোতামগুলি দেখায় সেগুলি সিএসএসের একটি বিট ব্যবহার করে তৈরি করা হয়।

তিনি প্রভাবটি পেতে মূলত 9 টি টেবিল ব্যবহার করেছেন:

তবে পরে একই প্রভাব অর্জনের জন্য তিনি উপরের এবং নীচের সীমানায় একটি সাধারণ 1px বাম এবং ডান মার্জিন ব্যবহার করেছিলেন।

গ্রেডিয়েন্টটি তিনটি স্তর ব্যবহার করে নকল হয়:

সমস্ত কোড কাস্টম বোতাম 3.1 পৃষ্ঠায় পাওয়া যাবে । (যদিও চিত্র ব্যতীত গ্রেডিয়েন্ট কেবল ফায়ারফক্স এবং সাফারিতে কাজ করছে)

ধাপে ধাপে নির্দেশাবলীর

1 - নিম্নলিখিত সিএসএস প্রবেশ করান:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - এটিকে কল করতে নিম্নলিখিত উপায়গুলির মধ্যে একটি ব্যবহার করুন (উপরের লিঙ্কগুলিতে আরও পাওয়া যাবে)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

বা

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

Answer 2

এটি তাদের "সংরক্ষণাগার" বোতামটি ফায়ারব্যাগের মতে।

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

সিএসএস আমি এর জন্য সংগঠিত / আটকানো যত্নের চেয়ে বেশি। সম্ভবত এটি কেবল আমারই, তবে যখন মার্কআপ / সিএসএস এই ভারী হয়ে ওঠে, আমি মনে করি আমি বরং কোনও চিত্র (বা ব্যাকগ্রাউন্ড হিসাবে একটি দম্পতি চিত্র ব্যবহার করব would আরও ভাল, স্প্রাইটস)। এছাড়াও, এই বোতামটির জন্য একটি চিত্র একক কে-এর চেয়ে কম হবে

আমি যতটা গুগলকে ভালবাসি, এটাকে কিছুটা ওভারকিল মনে হচ্ছে।

---

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

প্রশ্ন দেখুন: একটি চিত্রবিহীন বোতামটি ব্যবহার করার সুবিধা কী কী?

Answer 3

তবে আপনি এটি করার সিদ্ধান্ত নিচ্ছেন, নিশ্চিত করুন যে আপনি পৃষ্ঠাটি প্রথমে ডিফল্ট দিয়ে রেখেছেন:

<input type="submit" value="submit" />

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

ব্যবহারযোগ্যতা প্রথম আসা উচিত!

Comments

কেন? <button type="submit">পরিবর্তে এটি ব্যবহার করুন , কারণ এতে শিশু উপাদান থাকতে পারে এবং আপনার পছন্দ মতো স্টাইল করা যেতে পারে।

— চোখের পলকহীনতা

Answer 4

আমি বিকাশযুক্ত এই jquery প্লাগইনটি ব্যবহার করতে পারি। বোতামগুলি যেকোন জায়গায় যথাযথভাবে কাজ করে এবং এটি প্লাগইন হওয়ায় এগুলি সেটআপ এবং কনফিগার করা সহজ।

http://swizec.com/code/styledButton/

Answer 5

২০১১-এর জন্য এই পোস্টটি আপডেট করা হচ্ছে:

গুগল ২০১১ সালের জুলাইয়ে তার পরিষেবাদি জুড়ে একটি নতুন ডিজাইন চালু করেছে The নতুন গুগল বোতামগুলি এখানে পুনরায় তৈরি করা হয়েছে: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

নতুন বোতামগুলি দেখতে দেখতে:

Comments

+1 এই পোস্টের বর্তমান উত্তরগুলির মতো চিত্র বা অতিরিক্ত উপাদান ব্যবহার করে নকল গ্রেডিয়েন্টের চেষ্টা করার পরিবর্তে যেখানে সম্ভব গ্রেডিয়েন্টগুলি ব্যবহার করুন এবং পুরানো ব্রাউজারগুলিতে যুক্তিসঙ্গত রঙে ফিরে যান।

— মাইকমেকানা

Answer 6

আপনি বোতামে সিএসএস দেখতে ফায়ারফক্সের জন্য ফায়ারবগ প্লাগইন ব্যবহার করে দেখতে পারেন।

Answer 7

আপনি যে সবচেয়ে বড় সমস্যাটি যাচ্ছেন তা হ'ল এটি ব্রাউজারগুলিতে কাজ করা হবে।

আমার মনে হয় আপনার সত্যিকারের এটি দরকার কিনা আপনার দৃ strongly়তার সাথে বিবেচনা করা উচিত ... গুগল এ ধরণের কিছু সংখ্যক বোতাম এবং ভাষার প্রয়োজনীয়তার কারণে এ জাতীয় কিছু তৈরি করে for আমি সন্দেহ করি যে বেশিরভাগ সাইট এবং অ্যাপ্লিকেশনগুলি একটি চিত্র ব্যবহার করে ঠিক তত ভাল হবে।

ওপেন সোর্স উপাদানটি একটি ভাল ধারণা, যদিও: সম্পদ এবং প্রচেষ্টা ব্যাপকভাবে ছড়িয়ে দিন।

Answer 8

এখানে বেশিরভাগ কাজের সম্ভবত নকশা হবে না - এই পোস্টগুলি ইতিমধ্যে গ্রেডিয়েন্ট প্রভাবগুলির জন্য একটি দুর্দান্ত হা-টু।

সমস্যাটি সমস্ত ব্রাউজারগুলিতে কাজ করছে বা বিশেষত আই 6 এবং আই 7 এর আবর্জনার গাদা।

আমি মনে করি আপনি একটি স্ট্যান্ডার্ড বোতামের সাহায্যে সঠিক পথে আছেন যা jQuery এর সাথে পুনরায় লিখিত হয় - এইভাবে আপনি এখনও পর্দার পাঠকদের জন্য অ্যাক্সেসযোগ্য হবেন এবং সত্যিই পুরানো ব্রাউজারগুলিতে সুন্দরভাবে হ্রাস পেতে পারেন।

এইচটিএমএলের জন্য আমি মনে করি যে আপনার সেরা বেটটি প্রতিটি ব্রাউজারের সাথে জিএমএল পরিদর্শন করা এবং এটি কি এইচটিএমএল উত্পাদিত হয় তা দেখার জন্য - আমি আশা করি এটি আইআই 6, আই 7, (তাদের কুইর্কস মোডের প্রয়োজন কিনা তার উপরও নির্ভর করে) সম্পূর্ণ আলাদা হবে and ।

Comments

আমি আন্তরিকভাবে সন্দেহ করি যে গুগল বাটন রেন্ডারিংয়ের জন্য ব্রাউজারের আই আই স্নিফিং করছে।

— পলকহীনতা

Answer 9

এগুলি ক্লোজার লাইব্রেরির অংশ হিসাবে প্রকাশিত হয়েছিল : বোতামের ডেমো দেখুন

Answer 10

ওয়েব ডেভেলপার টুলবার CSS মেনুটির আপনাকে বলতে হবে কি CSS একটি আইটেম প্রয়োগ করা হয় অধীনে একটি দৃশ্য শৈলী তথ্য রয়েছে। সেই মেনুতে সম্পাদনা সিএসএস বৈশিষ্ট্যও রয়েছে যা আপনাকে পৃষ্ঠাটিতে কীভাবে প্রভাব ফেলবে তা দেখতে ফ্লাইতে সিএসএস পরিবর্তন করতে দেয়।

Comments

এই ধরণের জিনিসটির জন্য আমি ফায়ারব্যাগটি অত্যন্ত দরকারী বলে মনে করি - সিএসএস কী প্রয়োগ হয় এবং লাইভ পরিবর্তনগুলি তা দেখে।

— থেলিমা

আমি ফায়ারব্যাগও ব্যবহার করি তবে এটির নিজস্ব ইঞ্জিন থাকার কারণে এটি কিছুটা ভারী হতে পারে। সরঞ্জাম দণ্ডটি অনেক বেশি হালকা ওজন এবং আমার মতে ব্যবহার করা সহজ।

— মাইক্রফ্ট

Answer 11

ক্লোজার লাইব্রেরিতে লিঙ্কযুক্ত পোস্টটি প্রয়োগ হয় না। ক্লোজার লাইব্রেরির অংশ হিসাবে যা প্রকাশিত হয়েছিল তা গ্রেডিয়েন্টগুলির সাথে বোতাম ব্যবহার করে ।

তালিকাভুক্ত অন্যান্য সমাধানগুলি অকেজো। আপনি সেখান থেকে যেতে পারবেন না এবং প্রতিটি ব্রাউজারে এই বোতামগুলি কাজ করতে পারেন জিমেইলে তাদের কাজ করে। বোম্যান তার সাইটে যা দেখায় তা কার্যকরী কোড নয়।