using sass.
.tooltip{
background: #5dc5c5;
width: 30px;
height: 30px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
display: inline;
opacity: 1!important;
padding: 10px;
&:before{
color: #fff;
content:'\0021';
font-size: 16px;
text-align: center;
}
}
.tooltip:hover:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
HTML
Have been trying to make info '!' on the circle shape but so far it shows nothing on circle shape. Attempted both before and after but nothings show on circle :(
Insight or help will be appreciated.
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'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
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
.
Here is my link http://jsfiddle.net/ashadee/xhaLqvav/.
Html code
Eat your lunch<br>
CSS
a{
font-size: 1.2em;
white-space: normal;
}
a.rectangle
{
width: 70%;
height: 5%;
border: 1px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
}
how will I make the design like the one in the image? Should I use canvas property.
demo - http://jsfiddle.net/victor_007/xhaLqvav/2/
use pseudo element :after and :before for styling right box and rounded
a {
font-size: 1.2em;
white-space: normal;
}
a.rectangle {
width: 70%;
height: 5%;
border: 2px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-size: 32px;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
a:before {
content: '';
border-right: 2px solid black;
height: 100%;
position: absolute;
background: orange;
width: 50px;
top: 0;
bottom: 0;
left: 0;
}
a:after {
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
left: 35px;
top: 50%;
transform: translatey(-50%)
}
Stanford
<br>
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;