I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}
Related
Considering the dark gray section is the element sitting below, how can the golden shape in the picture be drawn with css exclusively?
This is my code so far:
.Header--wrapper {
position: relative;
background-color: #42424C;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #BCB097;
color: white;
margin-top: -10px;
margin-left: 15px;
padding-bottom: 57px;
display: inline-block;
}
<div className="Header--wrapper">
<div className="Header--start-small"></div>
</div>
Please refer blow code, I have update css and html.
.Header--wrapper {
position: relative;
background-color: #BCB097;
height: 40px;
overflow: hidden;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #42424C;
color: white;
margin-top: -10px;
margin-left: 0px;
padding-bottom: 57px;
display: inline-block
}
.Arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #42424c;
display: inline-block;
left: 25%;
position: absolute;
}
<div class="Header--wrapper">
<div class="Header--start-small"></div><div class="Arrow"></div>
</div>
#container {
height: 80px;
width: 300px;
background: #ebebeb;
}
#container:before {
content: " ";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 40px 20px;
border-color: #ebebeb #ebebeb #ebebeb white;
}
<div id="container"></div>
Note that you can adjust the depth of the cut out by changing the last value in the border-width relative to the other values
I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}
Does anyone knows how to achieve the following effect using CSS? (I'm referring to the shadows between each circle)
So far my html looks like this:
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>
And this is my css:
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
}
Acomplishing this:
I have tried to use the "psa-circle-container" with an inset shadow with no success. I've tried googling shadow effects but i haven't found something like it.
You can use a pseudo element, like ::before
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: 0 0 5px #000000;
color: black;
}
.psa-circle-container {
float: left;
text-align: center;
color: white;
padding: 20px;
width: 120px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
background: steelblue;
height: 170px;
position: relative;
overflow: hidden;
}
.psa-circle-container ~ .psa-circle-container::before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
width: 40px;
left: -45px;
background: transparent;
border-radius: 50%;
box-shadow: 10px 0px 10px rgba(0,0,0,0.4);
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span>
<br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span>
<br>EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span>
<br>JUGADORES POR EQUIPO</div>
</div>
You can do this with box-shadow:
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
top: 25%;
right: 100%;
width: 25%;
height: 50%;
border-radius: 50%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
/* Background color copied from example */
background: #59bbed;
}
This creates two pseudo elements. The first one is the actual shadow. This is done via box-shadow. To make the shadow slightly round, I added a border-radius and made the element an ellipse. All the rest of the stuff in there is positioning it between the containers.
The second element is there to keep the elliptical shadow from looking like a blurry ellipse. All it does is block out part of the shadow, by covering it with the same color as the background. This may not be an ideal solution.
The snippet below shows it all together:
body {
background: #59bbed;
}
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
position: relative;
}
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
width: 25%;
height: 50%;
top: 25%;
right: 100%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
border-radius: 50%;
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
background: #59bbed;
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
Can anyone figure out a fix for making the table version look like the div version in IE9?
http://jsfiddle.net/tCT9b/2/
<table class="foo"></table>
<div class="foo"></div>
div.foo {
float: right;
}
table.foo {
float: left;
}
.foo {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #999;
border-radius: 5px;
position: relative;
}
.foo:empty:before {
position: absolute;
background: #eee;
width: 50px;
height: 50px;
content: 'None';
border: 1px solid #999;
border-radius: 5px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
display: block;
line-height: 50px;
}