আমি কীভাবে খাঁটি সিএসএস ব্যবহার করে একটি "টুলটিপ লেজ" তৈরি করতে পারি?

Question

আমি সবেমাত্র একটি ঝরঝরে সিএসএস ট্রিক এসেছি। ঝাঁকুনি পরীক্ষা করে দেখুন ...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

এটি সামান্য তীর / ত্রিভুজ-জাতীয় প্রভাব তৈরি করে, একটি "টুলটিপ লেজ"। এই আমার মন ঘা! আমি কীভাবে এটি কাজ করে তা জানতে আগ্রহী ?!

আরও, এই প্রভাব তৈরি করার জন্য এই সিএসএস ট্রিকটি বাড়ানোর কোনও উপায় রয়েছে নীচে:

এটি একটি আকর্ষণীয় সমস্যা। এটি কি কেবল সিএসএস ব্যবহার করে করা সম্ভব, আপাতত ছায়া উপেক্ষা করে?

---

আপডেট 1

আমি আমার প্রাথমিক প্রশ্নের সমাধান বের করেছিলাম। হুড়োহুড়ি ...

http://jsfiddle.net/duZAx/7/

এইচটিএমএল

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

সিএসএস

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

এখন, আমি কীভাবে উপরের ছোট্ট চিত্রটি ছায়া সহ খাঁটি সিএসএস ব্যবহার করে এবং এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্য রেখে সঠিকভাবে অনুকরণ করব?

---

আপডেট 2

নীচের উত্তরগুলির সংমিশ্রণের পরে আমার সমাধান এখানে। আমি একাধিক ব্রাউজার জুড়ে এটি পরীক্ষা করে দেখিনি, তবে এটি ক্রোমে দুর্দান্ত দেখায়।

http://jsfiddle.net/UnsungHero97/MZXCj/688/

এইচটিএমএল

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

সিএসএস

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

---

Comments

এটি কোন ব্রাউজারে কাজ করা উচিত?

— ত্রিশডট

এই মুহুর্তে আমি সত্যিই চিন্তা করি না :) আমি কেবল এটি সম্ভব কিনা তা দেখতে চাই! বাস্তবিকভাবে, আমি একটি চিত্র ব্যবহার করব তবে আমি চ্যালেঞ্জটিতে আগ্রহী

— হ্রিস্টো

বাহ্যরেখার জন্য স্তরযুক্ত উপাদান এবং পিক্সেল-নিখুঁত অবস্থান ব্যবহার করে করণীয় হওয়া উচিত। ছায়া ছাড়া নাকি?

— আর্ক

@ আর্কিমিডিক্স ... সম্পূর্ণরূপে একমত, তবে আপনি এটি করতে পারেন?

— Hristo

এটি এত সহজ এখনও দুর্দান্ত, খুব ভাল হিস্টো!

— ওয়েসলি মার্চ

Answer 1

এখানে একটি বাক্স-ছায়া সহ একটি উদাহরণ রয়েছে, সমস্ত সর্বশেষ সংস্করণ ব্রাউজারগুলির এটি সমর্থন করা উচিত

http://jsfiddle.net/MZXCj/1/

এইচটিএমএল:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

সিএসএস:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

Comments

অসাধারণ! আমি মনের মধ্যে একটি বরং অনুরূপ সমাধান ছিল কিন্তু সব যে ব্যাখ্যা আমি :) +1 টি করেনি পর কিছু করতে অলস ছিল

— BoltClock

@ এমডিমুলিনাক্স ... মহাকাব্য! যখন আমি আমার অগ্রাধিকারের সুযোগগুলি ফিরে পেয়েছি, আমি আপনাকে একটি +1 দেব

— হিস্টো

বাহ, দুর্দান্ত! একটি ছোট বাগ: ছায়াটি

— টুলটিপটির

@ আইউলিক্স ... যে বাগটি সহজেই জেড-ইনডেক্সের সাথে ঠিক করা যায় :)

— হিস্টো

Answer 2

আপনার প্রথম প্রশ্নের উত্তর দেওয়ার জন্য এখানে একটি ব্যাখ্যা রয়েছে (আমি আসল সিএসএস অন্যদের কাছে ছেড়ে দেই বলে আমি অলস হয়েছি - দয়া করে তাদের উত্তরগুলিকে উজ্জীবিত করুন যা আপনার মনে হয় ভোটের প্রাপ্য!):

এটি সামান্য তীর / ত্রিভুজ-জাতীয় প্রভাব তৈরি করে, একটি "টুলটিপ লেজ"। এই আমার মন ঘা! আমি কীভাবে এটি কাজ করে তা জানতে আগ্রহী ?!

1. বিভিন্ন প্রান্তের রঙগুলি কিন্তু একই শৈলীর সাথে আপনার সীমানাকে রেন্ডার করার সময় (আপনার ক্ষেত্রে, solid), সংলগ্ন কোণগুলির প্রতিটি জোড়কে বিভাজক করা সীমটি একটি তির্যক রেখা। এটা বেশ কি অনুরূপ ডায়াগ্রাম এখানে এর রচিত groove, ridge, insetএবং outsetসীমানা শৈলী।

   মনে রাখবেন যে সমস্ত ব্রাউজারগুলি একইরকম আচরণ করে এবং যতক্ষণ না আমি মনে করতে পারি তা করে চলেছি, তবে এই আচরণটি CSS2.1 স্পেস বা সিএসএস ব্যাকগ্রাউন্ড এবং সীমান্ত মডিউলগুলিতে পুরোপুরি সংজ্ঞায়িত হয়নি। পরেরটির কোণে রঙ এবং শৈলীের রূপান্তরগুলি বর্ণনা করার একটি বিভাগ রয়েছে এবং বর্ণনায় বোঝা যাচ্ছে যে শূন্য কোণার রেডিয়ির সীমানার জন্য, যে রেখাটি রেন্ডার করা হয়েছে তা আসলে একটি লাইন যা প্যাডিং প্রান্তের কোণে কোণার সাথে মিলিত হয় o সীমানা প্রান্ত (সমান প্রস্থের সীমানার জন্য 45 ডিগ্রি কোণযুক্ত রেখার ফলস্বরূপ), তবে অনুমানটি এখনও সতর্ক করে যে এটি সর্বদা ক্ষেত্রে নাও হতে পারে (বিশেষত যেহেতু এটি শূন্য কোণার রেডিয়াই স্পষ্টভাবে সীমান্তগুলির জন্য অ্যাকাউন্ট করে না)। ^ঘ

2. দ্বারা বিষয়বস্তু (মূল W3C এর) বক্স মডেল , একটি 40x40 এলাকা, 20-পিক্সেল সীমানা থেকে বের করে নির্মিত সন্তুষ্ট মাত্রা 0x0 হিসাবে সংজ্ঞায়িত করা হচ্ছে।

3. চৌকো রেখার সাথে তার চার কোণে যুক্ত একটি বর্গক্ষেত্রকে ভাগ করে নেওয়ার ফলে চারটি ডান ত্রিভুজ দেখা যায় যার ডান কোণগুলি বর্গের মাঝখানে অবস্থিত (নীচে দেখুন)।

4. উপরের, নীচের এবং বাম সীমানাগুলি .tooltiptailউপাদানটির ধারকটির পটভূমিতে মেলানোর জন্য সাদা , অন্যদিকে ডান দিকের সীমানাটি টুলটিপের ব্যাকগ্রাউন্ড রঙের সাথে মিলে নীল রঙের ছায়া:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;
   

সীমানা লেবেলযুক্ত, এবং সীমানা সীমানা আমার বিশ্বস্ত লাইন সরঞ্জাম ব্যবহার করে এটি ফলাফল:

সরঞ্জামদণ্ডের লেজটি পুনঃনির্ধারণ করা কেবলমাত্র চারপাশে টুলটিপের রঙ পরিবর্তন করার বিষয়। উদাহরণস্বরূপ, এটি এমন একটি লেজ দেবে যা টিপের নীচের সাথে সংযুক্ত থাকে:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFizz প্রাকদর্শন

---

¹ _{আপনি যদি মান মেনে চলার জন্য স্টিকার হন তবে আপনি এই সমস্তটিকে একটি হ্যাক হিসাবে বিবেচনা করতে পারেন।}

Comments

জঘন্য দ্রুত টাইপিং, একই কথা বলার কথা ছিল ... +1

— ইজউই

ঠিক আছে, আমি স্পষ্টভাবে প্রশ্ন পড়া পড়া। এমনকি বলেছিল "I'm not worried about the shadow yet"।

— থার্ডডট

@ বোল্টক্লক ... যখন আমি আমার অগ্রাধিকারের সুযোগগুলি ফিরে পেয়েছি, আমি আপনাকে একটি +1 দেব

— হিস্টো

@ বলটকলক, ব্রাউজারগুলির মধ্যে আচরণগুলি কি সামঞ্জস্যপূর্ণ? এবং ডাব্লু 3 সি অনুসারে এই আচরণটি কতটা স্ট্যান্ডার্ড ?

— পেসারিয়ার

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

— বোল্টক্লক

Answer 3

আমি কেবলমাত্র একটি divউপাদান দিয়ে এই সরঞ্জামটিপটি করি ।

এইচটিএমএল:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

সিএসএস:

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

ডেমো

ব্যাখ্যা:

আমি অন্যান্য উদাহরণের মতো সীমানা সহ আমার স্বাভাবিক ডিভিও করেছি। লেজটি সিএসএসের একটি সহজ সংমিশ্রণ:

• আমি ছদ্ম নির্বাচকটি ব্যবহার করি: এর আগে (: খুব ভাল কাজ করার পরে)
• লেজটি দৃশ্যমান করার জন্য আমি একটি সাদা জায়গার সাথে সামগ্রীটি বাধ্য করি।
• টুলটিপের পাশের কোণটি ঠিক করতে আমি 45 ডিগ্রি থেকে আমার বাক্সটি ঘোরান
• আকার এবং অবস্থানের জন্য কোনও আশ্চর্য নয়।
• আমি চাই 2 পক্ষের একটি সীমানা যুক্ত করি।
• এবং অবশেষে আমি বাইরের সীমানায় ছায়া যুক্ত করব।

Comments

@ হিস্টো আইইয়ের জন্য আমি আসলে কীভাবে করণীয় তা জানি না তবে একটি নিবন্ধ দেখুন: সামুলি.হকনিমি.ইম.২ তবে এর চেহারাটি আলাদা হতে পারে ... "সাহস! সাহস!"

— ইয়োন

@ ডাবলইও: আই-র সম্পর্কিত ... আমার যদি এই আইই সামঞ্জস্যপূর্ণ করা প্রয়োজন তবে আমি কেবল চিত্রগুলি এবং শর্তসাপেক্ষ স্টাইলশিট ব্যবহার করব :)

— হিস্টো

Answer 4

ছায়া ছাড়াই টুলটিপ

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

ফিডল ডেমো

---

ছায়ার সাথে (ওয়েবকিটটিতে কিছুটা অদ্ভুত লাগছে ... এটি অনুমান করার মতো আমার ধারণা):

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

ডেমো 1 , ডেমো 2

Comments

@ আর্কিমিডিক্স ... শীতল :) এখন আমি এটি করার 2 উপায় জানি, ভাল 3 যদি আপনি ছবি ব্যবহার করে গণনা করেন। ছায়া প্রভাব জন্য যেতে যত্ন?

— হিস্তো

@ আর্চিমিডিক্স ... দুর্দান্ত দেখাচ্ছে! যখন আমি আমার উত্সাহ প্রাপ্ত সুযোগগুলি ফিরে পেয়েছি, আমি আপনাকে একটি +1 দেব

— হিস্টো

আমার দ্বিতীয় সমাধানের মতো দুর্দান্ত - আমি আই 6 এর সীমান্তের কিছুটা স্বচ্ছতাও ঠিক করতে পেরেছি - তীরের মোড়কটির আইমান 6 প্রদর্শিত করতে এখনও একটি সমাধান দরকার।

— ইজেউই

Answer 5

ক্রসব্রোজার পদ্ধতির:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

এটি আই 7 + থেকে কাজ করে (আই 6 এ ব্যবহার করে ( filter: chroma(color=white);) ব্যবহার করে তবে তীরের চারপাশে কালো সীমানা প্রদর্শন করবে না)।

আই 6 ফিক্স:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

এটি আইও by দ্বারা বর্ণিত কুরুচিপূর্ণ কালো ট্রান্সপারেসিকে পরিণত করবে যা আপনি ক্রোমা ফিল্টারটিতে নির্দিষ্ট করেছেন (আমি সাদা করেছি তাই এটি ব্যাকগ্রাউন্ডে অদৃশ্য হয়ে যায়)।

---

সিএসএস 3 পদ্ধতি:

আপনি এটি CSS3 রোটেশন দিয়ে করতে পারেন তবে CSS3 অনুবর্তী ব্রাউজারগুলিতে ব্যর্থ হবেন:

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

Comments

@ ইশওয়ে ... দুর্দান্ত !!! আপনি কি CSS3 রোটেশন, টিউটোরিয়ালগুলির লিঙ্ক এবং অন্যান্য সংস্থান সম্পর্কিত আরও কিছু তথ্য সরবরাহ করতে সক্ষম হবেন?

— হিস্টো

@hristo - সেখানে IE তে ঘূর্ণন জন্য DX ফিল্টার - কিন্তু সমস্যা হলো মাত্র 4 মান লাগে - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

— easwee

@ ইশওয়ে ... আমি আইই সম্পর্কে খুব বেশি চিন্তিত নই, বিশেষত আইই 6.. এটি উল্লেখ করার জন্য ধন্যবাদ। যে কোনও আইই বাগগুলি সহজেই শর্তসাপেক্ষে কাটিয়ে উঠতে পারে :)

— হিস্টো

@ ক্রিস্টো সিএসএস 3 রোটেশন কেবল আইই 9 তে সমর্থিত - সুতরাং আপনাকে এখনও আই 77-8 র যত্ন নিতে হবে যা এখনও কোডের মান। তবে এটি একটি শুরু।

— ইজেউই

@ ইশওয়ে ... দুর্দান্ত। যদি আমার এটির প্রয়োজন হয় এবং এটি আইই-সামঞ্জস্যপূর্ণ করা প্রয়োজন হয় তবে আমি একটি চিত্র এবং শর্তসাপেক্ষ স্টাইলশিট ব্যবহার করব :) আপনি কি সিএস 3 ঘূর্ণন, টিউটোরিয়াল এবং অন্যান্য সংস্থানগুলির লিঙ্কগুলিতে আরও কিছু তথ্য সরবরাহ করতে সক্ষম হবেন?

— হিস্তো

Answer 6

আপনি সিএসএসের সিউডো-উপাদানগুলির পরে: এবং এর আগে: এর ব্যবহার করতে পারেন। উদাহরণস্বরূপ,: এর আগে একটি ত্রিভুজ সন্নিবেশ করানোর জন্য এবং: পরে একটি আয়তক্ষেত্র সন্নিবেশ করানোর জন্য ব্যবহার করা যেতে পারে। এই দুটিয়ের সংমিশ্রণ একটি বুদ্বুদ সরঞ্জাম টিপ তৈরি করে

যেমন:

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

একটি অনলাইন সরঞ্জাম http://www.careerbless.com/services/css/csstooltipcreator.php এ উপলব্ধ

Comments

কেন একটি কাস্টম বৈশিষ্ট্য এবং না, বলুন title?

— বোলটলক

আমি বলব এটি aria-labelএকটি সরঞ্জামদণ্ডের জন্য আরও উপযুক্ত কাস্টম বৈশিষ্ট্য। এর সাথে title, আপনি ব্রাউজারের ডিফল্ট টুলটিপ রেন্ডারিং (যেভাবেই দৃষ্টিশক্তি ব্যবহারকারীদের জন্য) পান।

— rink.attendant.6