I'm trying to copy the Facebook's notification's blobs by using CSS3 ::before pseudo-element. I added a maximum height value and everything I tried isn't enough to reduce the space between the number and the beginning of the box. Any ideas on how to reduce/eliminate it?
Code:
HTML: <li notificaciones="3">[...]
SCSS:
*[notificaciones]:not([notificaciones="0"]){
&::before{
content: attr(notificaciones);
position: absolute;
color: $color-cajas-notificaciones-texto;
background-color: $color-cajas-notificaciones-fondo;
max-width: 25px;
font-size: 16px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: 800;
height: 20px;
float: left;
z-index: 999;
width: 20px;
text-align: center;
vertical-align: top;
top: 0px;
padding: 0 1px;
color: white;
text-shadow: 0px 0px 1px;
background-color: #f03d25;
border: 1px solid #d83722;
border-bottom: 1px solid #c0311e;
border-top: 1px solid #e23923;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);
display: block;
}
I didn't understand question well, but maybe you want like this
http://jsfiddle.net/zxshz/36/
<ul>
<li data="3"></li>
<li data="7"></li>
<li data="15"></li>
</ul>
/* css */
ul{
width: 250px;
}
li{
list-style: none;
float: left;
margin-right: 8px;
width: 18px;
height: 18px;
background: #9c0;
position: relative;
}
li:after{
content:attr(data);
padding: 1px 2px 2px 3px;
position: absolute;
background: red;
right: -3px;
top: -5px;
font-weight: bold;
text-align: center;
font-size: 9px;
border-radius:2px ;
color: #fff;
}
li:nth-child(1){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}
li:nth-child(2){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}
li:nth-child(3){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}
I can't understand what is your problem, put your code please
It's was just a matter of referring to the official documentantion on Line Height Calculations
line-height: /*same as height property*/
vertical-align: top;
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
I'm trying to create a button.
How can I create a border left like this image?
<a class="genericBtn">
<span>Click Me</span>
</a>
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
width: auto;
}
You can consider a gradient coloration for the left side:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:linear-gradient(to bottom,#c40009 20%,transparent 20%,transparent 80%,#c40009 0) left/1px 100% no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Another syntax for the same effect:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:
linear-gradient(#c40009,#c40009) top left,
linear-gradient(#c40009,#c40009) bottom left;
background-size:1px 20%;
background-repeat:no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>
A quick hack with :before
.genericBtn {
position: relative;
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
padding: 0 50px;
height: 50px;
display: inline-block;
width: auto;
line-height: 50px;
}
.genericBtn:before {
position: absolute;
top: 10px;
left: -1px;
width: 1px;
height: 30px;
background: #fff;
content: "";
display: block
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Adjust heights according to requirements.
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
I am using the following code and want to add a triangle either in the css3 format or the image based
here is my css
<div id="middleMenu">
<span class="selected">
View Stuff
</span>
<span class="text">
View Gnen
</span>
</div>
Here is the css for the above
#middleMenu {
position: absolute;
width: 300px;
margin: 84px 40%;
padding-top: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.traingle {
background: url(../images/arrow.png) no-repeat;
top: 31px;
left: 15px;
position: relative;
text-indent: -9999px;
}
#middleMenu span.selected {
background: url(../images/middleMenu.png) repeat;
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
.text {
top: 10px;
}
#middleMenu span {
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
files added which help generating the arrow key
You can create a triangle in CSS like so:
#Triangle pointing upwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#Triangle pointing downwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
}
jsfiddle.net/dPB75/2
I'm sure you can see where this is going to create one facing left or right.
You can change the size of the triangle by the width of the borders.
Also, you misspelled triangle