How you would style counter badge for example facebook notification? the value is not necessary one digit. It can be one or two. Also in my attempt I don't see how I can center the value.
#counter {
display: block;
width: 18px;
height: 18px;
padding: 2px;
position: absolute;
font-size: 12px;
left: 0;
top: 10px;
background: red;
border-radius: 3px;
text-align: center;
color: #fff;
}
<span id="counter">12</span>
Try to change the value to 1 digit, it doesn't look center again. It's slightly off.
#counter {
display: block;
padding: 2px 4px;
position: absolute;
font-size: 12px;
left: 0;
top: 10px;
background: red;
border-radius: 3px;
text-align: center;
color: #fff;
line-height:18px;
}
<span id="counter">111</span>
#counter {
display: block;
width: 18px;
height: 18px;
padding: 2px;
position: absolute;
font-size: 12px;
left: 0;
top: 10px;
background: red;
border-radius: 3px;
text-align: center;
color: #fff;
line-height:18px;
}
<span id="counter">1</span>
Related
I have a background with an image, in this bakground I have 3 images with 3 numbers. I would like for each number, center the number with the image.
I am stuck with the property margin-left
.background-picture-red{
height: 130px;
width: 100%;
position: absolute;
background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}
.picture01{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 50px;
z-index: 1;
position: relative;
}
.picture01-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 50px;
margin-top: 100px;
position: absolute;
}
.picture02{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 60px;
z-index: 1;
position: relative;
}
.picture02-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 50px;
margin-top: 100px;
position: absolute;
}
.picture03{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 70px;
z-index: 1;
position: relative;
}
.picture03-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
<div class="background-picture-red">
<img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
<span class="picture01-title">138</span>
<img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
<span class="picture02-title">258</span>
<img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
<span class="picture03-title">303</span>
</div>
Here is a working example where I added to each title:
margin-left: -43px;
transform:translateX(-50%);
margin-left: -43px : because your image size is 86px so -43px will be placed in the middle of the image
translateX(-50%) : so the text will be centered depending of its own size
.background-picture-red{
height: 130px;
width: 100%;
position: absolute;
background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}
.picture01{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 50px;
z-index: 1;
position: relative;
}
.picture01-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
.picture02{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 60px;
z-index: 1;
position: relative;
}
.picture02-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
.picture03{
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
background-color: rgba(224,0,0,0.30);
float:left;
margin-top: 10px;
margin-left: 70px;
z-index: 1;
position: relative;
}
.picture03-title{
font-family: 'Questrial', sans-serif;
font-size: 16px;
color: white;
margin-left: -43px;
transform:translateX(-50%);
margin-top: 100px;
position: absolute;
}
<div class="background-picture-red">
<img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
<span class="picture01-title">138</span>
<img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
<span class="picture02-title">258</span>
<img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
<span class="picture03-title">303</span>
</div>
But maybe you should use flexbox to do that kind of thing.
I need two texts to be stacked like this using CSS:
I tried this code:
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.special-order>span {
display: inline-block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.special-order>span {
background: #000000;
color: #f58220;
display: block;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I’m getting some space between the two texts. Help me with this.
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
span.special {
background: #000000;
color: #f58220;
display: block;
font-weight: 700;
line-height: 1.3;
padding: 0 4px;
border: 1px solid white;
border-radius: 2px;
}
.order {
display: inline-block;
font-weight: 600;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1;
border-radius: 1px;
}
<div class="sp-order">
<span class="special">Special </span>
<span class="order">Order</span>
</div>
You can try this :
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span:first-child {
display:block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.sp-order>span:last-child {
background: #000000;
color: #f58220;
padding: 0 2px;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Just change your second CSS selector to .sp-order>span
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span {
background: #000000;
color: #f58220;
display: block;
padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
background: #ddd;
color: #fa0;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: jsfiddle.net/f5jczunf/
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
<div id="block">
<span class="number">150</span>
<br/>Calories
</div>
Maybe this small example can help.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
<div class="label">
<span class="title">Title</span>
<span class="bottom">Bottom</span>
</div>
https://jsfiddle.net/9xs2wcbL/1/
Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>
I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/
here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>
I'm creating icons using only CSS3. So far so good, but I've run into a problem with the simplest one.
I just want to have an "!" centered in a circle, but its position isn't consistent. Sometimes it's a pixel higher, a pixel to the left, or both.
I have no idea what's causing this.
Here's a fiddle.
.nos {
position: relative;
height: 12px; width: 12px;
border: 2px solid #e04006;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
display: block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute;
padding-left: 18px;
display: block;
font-size: 14px; line-height: 16px; text-decoration: underline;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
margin: 0;
height: 16px; width: 16px;
display: block;
font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold;
}
Remove the height: 16px; width: 16px; from .nos:before
Update Fiddle
Looks like I managed to fix it after some tinkering. Not sure what did the trick.
.nos {
position: relative;
width: 12px; height: 12px;
border: 2px solid #e04006;
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
display: inline-block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute; top: -2px; left: -2px;
height: 16px;
padding-left: 18px;
display: block;
text-decoration: underline; font-size: 14px; line-height: 16px;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: -2px; left: -2px;
width: 16px;
display: block;
font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: bold; font-size: 13px; line-height: 13px;
}
Fiddle
I'm trying to create a button that looks like this:
The tricky part is getting the number to 'fit' inside of the button. This is how I have my button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
This is my CSS:
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
border-radius: 2px 0 0 2px;
}
Setting the height and width of the number seems unnecessary, and I can't get the number to line up properly unless I get into extremely specific positioning which is not ideal. Where am I going wrong here?
Plunk:
http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview
Try to this Define your .textclass position:relative;overflow:hidden; and .numberclass line-height:30px; as like this
/* Styles go here */
.textclass {
width: 90px;
position:relative;
overflow:hidden;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
or you just define button into span tag as like this
.textclass {
width: 90px;
position:relative;
overflow:hidden;
display:inline-block;vertical-align:top;text-align:center;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 30px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<span class="textclass"><span class="numberclass">33</span>Text</span></div>
Just give position: relative; to .textclass and line-height: 30px; to .numberclass
Updated Plunker
try this (replace it)
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 9px;
top: 8px;
height: 20px;
padding-top: 9px;
width: 30px;
border-radius: 2px 0 0 2px;
}
you can try this one:
.textclass {
width: 140px;
position:relative;
overflow:hidden;
height: 40px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 15px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 30px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:40px;
width: 40px;
line-height:35px;
border-radius: 2px 0 0 2px;
}
DEMO HERE
Please, see the working plunker with completely auto adjusting height of the number part. You do not even need to apply the line-height.
HTML
<button type="text" class="textclass">
<span class="numberclass">
<span class="container"><span class="inner">33</span></span>
</span>
Text
</button>
CSS
.textclass {
width: 90px;
height: 30px;
position: relative;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30px;
border-radius: 2px 0 0 2px;
display: block;
}
.container {
display: table;
height: 100%;
text-align: center;
width: 100%;
}
.inner {
display: table-cell;
height: 100%;
vertical-align: middle;
}
change in .numberclass class
/* Styles go here */
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
border-radius: 1px 0 0 1px;
color: #fff;
left: 8px;
padding: 8px;
position: absolute;
top: 9px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
</body>
</html>