ফেসবুক স্টাইল "লাল" বিজ্ঞপ্তিগুলির জন্য সহজ সিএসএস

Question 1

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

বিজ্ঞপ্তিগুলি সুন্দরভাবে প্রদর্শন নিশ্চিত করার সর্বোত্তম ক্রস ব্রাউজার উপায় কী? জাভাস্ক্রিপ্ট ব্যবহারে বিরূপ নয়, তবে খাঁটি সিএসএস অবশ্যই পছন্দনীয়

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

Question 2

এটি অর্জনের সর্বোত্তম উপায় হ'ল পরম অবস্থান ব্যবহার করে :

/* Create the blue navigation bar */
.navbar {
  background-color: #3b5998;
  font-size: 22px;
  padding: 5px 10px;
}

/* Define what each icon button should look like */
.button {
  color: white;
  display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
  position: relative; /* All 'absolute'ly positioned elements are relative to this one */
  padding: 2px 5px; /* Add some padding so it looks nice */
}

/* Make the badge float in the top right corner of the button */
.button__badge {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
 
  padding: 1px 3px;
  font-size: 10px;
  
  position: absolute; /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}

<!-- Font Awesome is a great free icon font. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="navbar">
  <div class="button">
    <i class="fa fa-globe"></i>
    <span class="button__badge">2</span>
  </div>
  <div class="button">
    <i class="fa fa-comments"></i>
    <span class="button__badge">4</span>
  </div>
</div>

স্নিপেট প্রসারিত করুন

Question 3

এখানে গণনা পরিবর্তন হওয়ার জন্য অ্যানিমেশন অন্তর্ভুক্ত করার একটি এখানে রয়েছে।

http://jsfiddle.net/rahilsondhi/FdmHf/4/

<ul>
<li class="notification-container">
    <i class="icon-globe"></i>
    <span class="notification-counter">1</span>
</li>

    .notification-container {
    position: relative;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 15px;

    i {
        color: #fff;
    }
}

.notification-counter {   
    position: absolute;
    top: -2px;
    left: 12px;

    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
}




$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})

JQuery সহ অ্যানিমেশন:

$('button').click(function()
{
    var $counter = $('.notification-counter')
    var val = parseInt $counter.text();
    val++;
    $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500);
});

এটি অ্যানিমেশনের জন্য গ্লোব আইকন এবং jQuery ট্রানজিটের জন্য ফন্ট অসাধারণ ব্যবহার করে।

Question 4

সম্ভবত absoluteপজিশনিং:

<div id="globe" style="height: 30px; width: 30px; position: relative;">
 <img src="/globe.gif" />
 <div id="notification" style="position: absolute; top: 0; right;0;">1</div>
</div>

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

Question 5

মার্কআপ:

<div id="ContainerDiv">
    <div id="MainImageDiv"> //Add the image here or whatever you want </div>
    <div id="NotificationDiv"> </div>
</div>

সিএসএস:

#NotificationDiv {
    position: absolute;
    left: -10 //use negative values to push it above the #MainImageDiv
    top: -4 
    ...
}

Question 6

আমি নিশ্চিত যে নিরঙ্কুশ অবস্থান সম্পর্কিত উত্তরগুলি সঠিক। পরীক্ষার খাতিরে, আমি একটি এসভিজি-একমাত্র সমাধান করার চেষ্টা করেছি। ফলাফলটি আদর্শের থেকে অনেক দূরে, সম্ভবত কোনও একই ধরণের এসভিজি ধাঁধাটির আরও মার্জিত সমাধান জানেন? :)

http://jsfiddle.net/gLdsco5p/3/

<svg width="64" height="64" viewBox="0 0 91 91">
    <rect id="Artboard1" x="0" y="0" width="90.326" height="90.326" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <g id="user-circle-o" transform="matrix(2.69327,0,0,2.69327,7.45723,7.45723)">
            <path d="M14,0C21.734,0 28,6.266 28,14C28,21.688 21.766,28 14,28C6.25,28 0,21.703 0,14C0,6.266 6.266,0 14,0ZM23.672,21.109C25.125,19.109 26,16.656 26,14C26,7.391 20.609,2 14,2C7.391,2 2,7.391 2,14C2,16.656 2.875,19.109 4.328,21.109C4.89,18.312 6.25,16 9.109,16C10.375,17.234 12.093,18 14,18C15.907,18 17.625,17.234 18.891,16C21.75,16 23.11,18.312 23.672,21.109ZM20,11C20,7.687 17.312,5 14,5C10.688,5 8,7.688 8,11C8,14.312 10.688,17 14,17C17.312,17 20,14.312 20,11Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(1,0,0,1,1.36156,0)">
            <circle cx="63.708" cy="18.994" r="9.549" style="fill:rgb(255,0,0);"/>
        </g>
        <g transform="matrix(1.66713,0,0,1.66713,-51.5278,-2.33264)">
            <text  id="counter" x="68.034px" y="15.637px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:7.915px;fill:white;">1</text>
        </g>
    </g>
</svg>