I have this div that looks like a big square but I would like to add a little circle on the top of the div (keeping the style) with an icon inside (I mean something like Font Awesome) so people will know what category of content it is.
How can I do that using css ?
Thank you
.le_quiz {
position: relative;
width: 350px;
background-color: white;
height: 400px;
margin-top: 45px;
border-bottom: 1px solid lightgrey;
box-shadow: 0px 2px #40c8d6;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}
.le_quiz .post-title {
position: absolute;
top: 60%;
left: 2%;
font-size: 22px;
color: #404040;
}
.le_quiz .postbody {
margin-top: 40px;
font-size: 22px;
}
.le_quiz .postbody a:visited {
margin-top: 40px;
font-size: 22px;
color:#404040;
}
.le_quiz .cta {
position: absolute;
top: 90%;
left: 15px;
font-weight: bold;
font-size: 14px;
color:#38C8D6;
}
.le_quiz .cta:visited {
color:#38C8D6;
}
<div class="le_quiz">
</div>
This is what I'd like : Circle
You could use 2 pseudo elements. One to put the circle up top, and the other to cover the bottom half of the circle.
.le_quiz {
position: relative;
width: 350px;
background-color: white;
height: 400px;
margin-top: 60px;
border-bottom: 1px solid lightgrey;
box-shadow: 0px 2px #40c8d6;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}
.le_quiz .post-title {
position: absolute;
top: 60%;
left: 2%;
font-size: 22px;
color: #404040;
}
.le_quiz .postbody {
margin-top: 40px;
font-size: 22px;
}
.le_quiz .postbody a:visited {
margin-top: 40px;
font-size: 22px;
color:#404040;
}
.le_quiz .cta {
position: absolute;
top: 90%;
left: 15px;
font-weight: bold;
font-size: 14px;
color:#38C8D6;
}
.le_quiz .cta:visited {
color:#38C8D6;
}
.le_quiz:before, .le_quiz:after {
content: '';
position: absolute;
background: #fff;
top: 0;
}
.le_quiz:before {
left: 0;
right: 0;
height: 60px;
z-index: 2;
}
.le_quiz:after {
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
width: 100px;
height: 100px;
border-radius: 50%;
}
<div class="le_quiz">
</div>
You can add another div and set boder-radius to 50% to make it a circle.
.le_quiz, .circle {
position: relative;
width: 350px;
background-color: white;
height: 400px;
margin-top: 45px;
border-bottom: 1px solid lightgrey;
box-shadow: 0px 2px #40c8d6;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}
.le_quiz .post-title {
position: absolute;
top: 60%;
left: 2%;
font-size: 22px;
color: #404040;
}
.le_quiz .postbody {
margin-top: 40px;
font-size: 22px;
}
.le_quiz .postbody a:visited {
margin-top: 40px;
font-size: 22px;
color:#404040;
}
.le_quiz .cta {
position: absolute;
top: 90%;
left: 15px;
font-weight: bold;
font-size: 14px;
color:#38C8D6;
}
.le_quiz .cta:visited {
color:#38C8D6;
}
.circle {
width:100px;
height:100px;
border-radius:50%;
top: 100px;
left: 120px;
}
<div class="circle"></div>
<div class="le_quiz">
</div>
Related
At the moment my css looks like this:
But I want the inverse of the green border-radius blocks, I want this:
Any idea how to achieve this with the least amount of extra divs and stuff? Here is my code so far:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
One possible solution would be using box-shadow for the before and after.
Also you may consider using pointer-events:none for the pseudo-elements since you don't want to block the other elements on the nav.
Another solution would be using svg for your buttons.
.navbar {
background-color: blue;
height: 35px;
overflow:hidden;
}
button {
color: white;
border: none;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
box-shadow: 2px 10px 1px white;
pointer-events:none;
}
button:after{box-shadow: -2px 10px 1px white;}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
I think you should add a dic contain content text, like this:
.navbar {
background-color: blue;
height: 35px;
}
.content {
color: white;
border: none;
background-color: blue;
height: 100%;
padding: 10px 10px;
cursor: pointer;
}
button{
background-color: white;
padding: 0px;
border: 0px;
margin-left: -4px;
}
button.selected{
background-color: blue;
}
button.selected .content{
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
vertical-align: bottom;
}
button.before-selected .content{
border-bottom-right-radius: 10px;
}
button.after-selected .content{
border-bottom-left-radius: 10px;
}
<div class="navbar">
<button><div class="content">tab1</div></button>
<button class="before-selected"><div class="content">tab2</div></button>
<button class="selected"><div class="content">tab3</div></button>
<button class="after-selected"><div class="content">tab4</div></button>
</div>
I'd suggest using svg with background-image or using the clip-path property on ::before and ::after.
You have to use SVGs on ::before and ::after of the tab element. Here's an example:
header {
background: gray;
}
nav {
padding-top: 10px;
}
.tab {
background: none;
border: none;
padding: 10px;
width: 100px;
}
.tab.selected {
background: white;
border-radius: 10px 10px 0 0;
position: relative;
}
.tab.selected::before,
.tab.selected::after {
content: '';
bottom: 0;
height: 10px;
position: absolute;
width: 10px;
}
.tab.selected::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
left: -10px;
}
.tab.selected::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
right: -10px;
transform: scaleX(-1);
}
<header>
<nav>
<button class="tab">Tab</button>
<button class="tab selected">Tab</button>
<button class="tab">Tab</button>
</nav>
</header>
Codepen link.
You can use the following property to get the inverted image of the green border radius blocks:
transform: rotate(180deg);
So your CSS will be like:
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
Or you can use the following and style it better:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 0px 6px 5px 0px #000000;
box-shadow: inset 0px 6px 5px 0px #000000;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 4px 8px 5px -3px #000000;
box-shadow: inset 4px 8px 5px -3px #000000;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
This question already has answers here:
CSS box shadow around a custom shape?
(3 answers)
Closed 5 years ago.
Hi Guys i am trying to add a box shadow around the custom shape created using css
like the below image
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
Declare values for the pseudo-element width & height
properties;
purge the borders;
then rotate the pseudo-element in question;
now apply box-shadow as required;
grab a nice cold one;
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 0px 5px 3px #000000;
}
div::after {
position: absolute;
z-index: 2;
content: "";
left: 100%;
width: 32px;
height: 32px;
background: #50b3cf;
transform: rotate(46deg);
transform-origin: 0 0;
box-shadow: 3px -3px 5px 0px #000000;
}
div::before { /* ver 2.0 Patch */
content: "";
position: absolute;
background: #50b3cf;
top: 0;
bottom: 0;
width: 25px;
right: 0;
z-index: 9;
}
<div></div>
.box{
border:1px solid white;
width:400px;
height:150px;
margin-left:40px;
box-shadow: 0 0 9px 3px rgba(0,0,0,0.5);
}
.arrow {
width: 100px;
height: 100px;
position: relative;
top:20px;
left:-100px;
overflow: hidden;
box-shadow: 0 10px 10px -17px rgba(0,0,0,0.5);
transform: rotate(270deg);
}
.arrow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
transform: rotate(45deg);
top: 76px;
left: 25px;
box-shadow: -2px -2px 9px 0px rgba(0,0,0,0.5);
}
<div class="box">
<div class="arrow"></div>
</div>
Try this code
Maybe this what you are looking to do.
The first one with box shadow, the second one doesn't has box shadow but you can add it using this code box-shadow: 0px 0px 6px 0px #000;in class "arrow-r"
<style type="text/css">
.main-box{
position: relative;
padding: 0 35px 90px;
}
.box{
font-size: 20px;
position: relative;
display: inline-block;
clear: both;
margin-bottom: 8px;
padding: 13px 14px;
vertical-align: top;
border-radius: 5px;
}
.arrow-l {
float: left;
color: #fff;
background-color: #08abf4; box-shadow: 0px 0px 6px 0px #000;
}
.arrow-r {
float: right;
color: #1a1a1a;
background-color: #e2e2e2;
}
.box:before{
position: absolute;
top: 24px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
left: -4px;
background-color: #08abf4;
}
.box:before{
position: absolute;
top: 21px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
right: -4px;
background-color: #e2e2e2;
}
</style>
<div class="main-box">
<div class="box arrow-l left">
I'm Liam Lababidi
</div>
<div class="box arrow-r right">
What about u?
</div>
</div>
You want to use box-shadow: 10px 10px 5px #888888; for this. Each px indicates what side and the # indicates the color.
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 10px 5px #888888;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
I have been trying to make a profile bar for my website which contained 3 elements, link, picture, and just a text (<p>), profile bar itself was a div container.
The reason of choosing relative position was because of elements overlapping when browser was scaled, but then there was another problem, when browser was scaled, container content would start disappearing and then image would wrap to the bottom of elements.
HTML & CSS for profile bar container:
<div class="profilebar">
<a class="profilename" style="cursor: pointer;" >{{ username }} ▾</a>
<img class="profilepicture" src="{{ avatar }}"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.profilepicture {
position: absolute;
margin-left: 1.4%;
}
.balance {
position: relative;
margin-top: 3%;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
margin-left: 45.3%;
}
Fiddle ( Try scaling browser down in fullscreen mode and you'll see the result ).
Is there a problem that container can't make elements float right?, i want it to reach the navigator buttons (Button1-4) without elements inside overlapping each other, what's the best way to do so?
Set a fixed pixel width on the "profilebar" container, rather than a percentage.
.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 70px;
}
Here you can see an example with 150px width:
https://jsfiddle.net/c7qoh9xg/
float: left; causes links to wrap and are there below the menu
See https://jsfiddle.net/hv5r8kxh/4/
Check the updated fiddle - https://jsfiddle.net/afelixj/hv5r8kxh/2/
Changed the order of profilepicture and profilename
*,
*::before,
*::after {
box-sizing: border-box;
}
*::selection {
background-color: #F06262;
}
*::-moz-selection {
background-color: #F06262;
}
html,
body {
margin: 0;
height: 100%;
background-color: #2B2B2B;
}
.main {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
z-index: 1;
min-height: 120px;
max-height: 120px;
background-color: rgba(26, 26, 26, 0.9);
min-width: 800px;
}
.logo {
display: block;
float: left;
top: 3%;
left: 0;
right: 3%;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
font-family: sans-serif;
color: white;
margin-top: 3.5%;
margin-left: 1.3%;
}
.menu {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
background-color: rgba(26, 26, 26, 0.9);
width: 100%;
border-style: solid;
border-color: rgba(26, 26, 26, 0.9);
border-radius: 0;
z-index: 1;
/* max-height: 8%; */
/* max-width: 102.5%; */
min-height: 55px;
min-width: 800px;
overflow: hidden;
}
.button1 {
display: block;
font-size: 10pt;
float: left;
right: 15%;
left: 30%;
top: 0%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
padding: 25px 2px 55px 2px;
vertical-align: center;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button1:hover {
color: #C90205;
}
.button2 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 10%;
white-space: nowrap;
color: white;
width: 7%;
margin-top: 0%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
vertical-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button2:hover {
color: #C90205;
}
.button3 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button3:hover {
color: #C90205;
}
.button4 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button4:hover {
color: #C90205;
}
.button5 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button5:hover {
color: #C90205;
}
.button6 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 8%;
white-space: nowrap;
color: white;
margin-top: 0%;
font-family: sans-serif;
height: 10%;
width: 7%;
text-align: center;
height: 10%;
text-align: center;
padding: 28px 0px 55px 0px;
text-align: center;
line-height: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}
.button6:hover {
color: #C90205;
}
.profilebar {
float: right;
width: 11%;
height: 7%;
margin-top: 0.5%;
margin-right: 1%;
min-width: 180px;
}
.profilename {
position: relative;
margin-top: 0.4%;
margin-left: 4%;
font-family: sans-serif;
/* width: 0.5%; */
font-size: 11pt;
color: white;
text-decoration: none;
float: right;
}
.profilepicture {
/* position: absolute; */
margin-left: 15px;
float: right;
}
.balance {
position: relative;
margin-top: 25px;
color: red;
font-family: sans-serif;
font-size: 12pt;
color: #C90205;
text-align: right;
/* margin-left: 45.3%; */
}
.mainpage {
position: relative;
height: calc(93% - 185px);
width: 100%;
min-height: 430px;
min-width: 800px;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">Sample Text</a>
</div>
<div class="menu">
<a class="button1" href="/" style="text-decoration:none">Button 1</a>
<a class="button2" href="/" style="text-decoration:none">Button 2</a>
<a class="button3" href="/" style="text-decoration:none">Button 3</a>
<a class="button4" href="/" style="text-decoration:none">Button 4</a>
<a class="button5" href="/" style="text-decoration:none">Button 5</a>
<a class="button6" href="/" style="text-decoration:none">Button 6</a>
<div class="profilebar">
<img class="profilepicture" src="http://i.imgur.com/9xyQ4DW.png" />
<a class="profilename" style="cursor: pointer;" >username ▾</a>
<p class="balance" style="text-decoration:none">$0</p>
</div>
</div>
<div class="mainpage"></div>
Please refer to this link.https://codepen.io/wbeeftink/pen/dIaDH. If you zoom out or zoom in you will see that the tag has an extra line sticking out at the bottom. Please refer to the screenshot.
Could someone please let me know how this could be fixed. Or is there a different way to create such tags?
This is the code that I use
HTML
<span class="tag">HTML</span>
CSS
.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}
Change style of .tag::after from right: 0 to left: 100%.
body {
font: 12px/1.5 'PT Sans', serif;
margin: 25px;
}
.tags {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.tags li {
float: left;
}
.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
left: 100%;
top: 0;
}
.tag:hover {
background-color: crimson;
color: white;
}
.tag:hover::after {
border-left-color: crimson;
}
<h1>Tags</h1>
<h2>Example 1</h2>
Front-end development
<h2>Example 2</h2>
<ul class="tags">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
:hover not working after applying :before and :after.
I'm checking on Chrome.
Here's my code :
<style>
* {
margin: 0px;
padding: 0px;
box-shadow: none;
}
body {
background: black;
}
#demoBoard {
position: relative;
margin: 7px auto;
width: 630px;
height: 650px;
background-color: grey;
background-image: radial-gradient(152px at 324px 50%, black, grey 99%);
opacity: 0.9;
border-radius: 10%;
}
#demoBoard h2 {
position: absolute;
color: rgb(243, 100, 20);
text-align: center;
text-shadow: 2px 2px 2px black;
top: 3px;
left: 290px;
-webkit-user-select: none;
}
#Gboard {
position: absolute;
width: 580px;
height: 580px;
background: rgba(0, 0, 0, 0.8);
position: absolute;
border: 5px solid crimson;
box-shadow: 3px 3px 4px black;
top: 34px;
left: 18px;
}
#demoBoard:before {
position: absolute;
content: "";
width: 628px;
height: 648px;
border-left: 1px solid rgb(41, 41, 51);
border-right: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset 10px 10px 30px black;
left: -1px;
}
#demoBoard:after {
position: absolute;
left: -1px;
top: -2px;
content: "";
width: 631px;
height: 651px;
border-bottom: 1px solid rgb(41, 41, 51);
border-top: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset -10px -10px 30px black;
}
#Gboard:hover {
cursor: pointer;
}
#Gboard:active {
box-shadow: 1px 1px 2px black;
cursor: pointer;
}
#options {
position: absolute;
top: 200px;
left: 180px;
color: crimson;
font: 20px bold;
background: rgba(123, 123, 123, 0.4);
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:before {
content: "";
position: absolute;
box-shadow: inset 14px 14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:after {
content: "";
top: 2px;
position: absolute;
box-shadow: inset 0px -14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options p {
position: absolute;
top: 12px;
left: 210px;
color: crimson;
font-size: 30px;
text-shadow: 0px 1px 1px black;
}
#options p:hover {
cursor: pointer;
}
#options ul {
list-style: none;
padding-top: 50px;
padding-left: 50px;
display: block;
}
#options ul li {
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid black;
width: 150px;
height: 30px;
text-align-last: right;
line-height: 2;
text-shadow: 0px 1px 1px black;
}
#options ul li:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid rgba(134, 94, 14, 0.5);
width: 150px;
height: 31px;
}
#options ul li:hover {
cursor: pointer;
padding-bottom: 5px;
font-size: 22px;
}
#options ul li:hover:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid green;
width: 150px;
height: 31px;
}
</style>
<div id="demoBoard">
<h2>Demo</h2>
<div id="Gboard"></div>
<div id="options" class="menu">
<p id="close">x</p>
<ul>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Test</li>
</ul>
</div>
</div>
:hover is not working on all the elements that is applying hover.
I don't know what's going on with this code. It's working on some other test I've done.
That's because the content created by :after and :before on #demoBoard and #content is placed on top on your links, so you can't hover over them.
Add this to change the z-index of your links, essentially putting them on top of the other pseudo content.
#options ul li {
position: relative;
z-index: 2;
}
Note: if you do this, also change the left value of #options ul li:before and #options ul li:hover:before to "0", since it will now position itself relative to the list-item.
I gave the <ul> the following styles:
position: relative;
z-index: 1;
And it is working fine. A lot of the elements are positioned absolutely but the order of them is not defined.