Photoshop Question posted in
The official user guide can be found here.

CSS notification style badge over image – Photoshop

I’m attempting to place a ‘notification’ style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.

Through the magic of Photoshop, here is what I am trying to accomplish.
enter image description here

Here is my CSS code.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

I would like to be able to place any small about of text in the badge and it expand the red circle to fit.

Here is my HTML code.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>
Tags:

3

Answers


  1. 0

    Here’s a fiddle I made with the sample code:

    https://jsfiddle.net/un2p8gow/

    • I changed the notify-badge span into a div. I saw no reason it had to be a span.

    • I changed the position to relative. Edit – you could actually keep the attribute position: absolute; provided you know what you’re doing with it. Guy in the comments was right.

    • You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.

    You can tweak it further but in a vacuum this is what you want.

    Login or Signup to reply.
  2. 0

    The idea here is to overlay an absolute container on top of a relative one. Here’s a similar example:

    <div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

    The CSS:

    .image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

    This is going to put our text right up on top of the image nicely, but it doesn’t accomplish the box we want to achieve behind the text. For that, we can’t use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.

    <h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

    Then use that span to style and text:

    h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

    For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.

    Login or Signup to reply.
  3. 0

    Bunch of different ways you can accomplish this. This should get you started:

    .item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
    <div class="item">
        <a href="#">
            <span class="notify-badge">NEW</span>
            <img src="https://picsum.photos/200"  alt="" />
        </a>
    </div>
</div>

    Addendum (from the Asker @user-44651)

    (moved from the question)

    Here is the result of applying this answer.

    enter image description here

    Adding margin-top:-20px; to .item fixed the alignment issue.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search