This is what I want to achieve:
I'm looking to "cut" the lower left corner of the content in the code below
(similar to if you had folded the corner of a page down)
I'd like to know if there is any adjustments I could do to the CSS below to achieve this.
.model-properties {
padding: 0.8em 3em;
position: absolute;
top: 0px;
right: 0px;
width: 20%;
min-width: 15%;
z-index: 2;
display: none;
color: #c6d2db;
font-size: 13px;
background: linear-gradient(180deg, #182229, #182229, #293741, #293741);
max-height: 700px;
overflow: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="model-properties-container" class="model-properties">
.model-properties:before,
.model-properties:after
{
bottom: 0;
left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.model-properties:after {
border-color: #88b7d5;
border-left-color: white;
border-bottom-color: white;
border-width: 30px;
}
https://jsfiddle.net/e46xvp3x/3/
Related
Currently I have a HTML & CSS that results in a page like below
However, I want the shadows above B & C tabs so that it looks like they are behind.
Can anyone hele achieve this?
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
You need to temper with the z-index of the different elements. Remember you can only modify the z-index if the element itself has a position set (e.g. position: relative)
Below is a working example. Note that I have also added an "active" class to the currently active tab.
You would need to create JavaScript to make it full functional, but this is the starting point.
Good luck!
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
position: relative;
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab.active {
z-index: 2;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
position: relative;
z-index: 1;
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab active">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
Just add these to your content and tab css classes:
.content {
position: relative;
z-index: 2;
}
.tab
z-index: 1;
}
Edit: you need the relative positioning for z-index to work.
You can always try the following css witch will give the box the black shadow and the border bottom you want.
box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;
I've got some adjacent buttons, I'd like them to have box shadows, but I don't want any overlap -- I want the shadow to be under all buttons, no shadow on top of any of them. I've seen what other people have said and have been playing around with :after / :before and changing z-index values, but no luck. Here's my code, does anyone have any suggestions?
.buttonFirst {
margin: auto;
font-size: 4em;
padding-top: 10%;
color: #000;
width: 90px;
height: 90px;
position: relative;
z-index: 5;
background: #dedede;
border-radius: 2vw;
outline: 2px;
border: 2px;
border-style: none;
}
.buttonFirst:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<button class="buttonFirst" id="1"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" id="3"></button>
<button class="buttonFirst" id="4"></button>
Is this what you mean? I hope would be helpful.
You also can adjust your box-shadow parameters due to avoid the top part of the shadows. For example: box-shadow: -1px 13px 10px 0px rgba(0, 0, 0, 0.4);
.buttonFirst {
margin: auto;
font-size: 4em;
padding-top: 10%;
color: #000;
width: 90px;
height: 90px;
position: relative;
background: #dedede;
border-radius: 2vw;
outline: 2px;
border: 2px;
border-style: none;
}
.buttonFirst:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-radius: 2vw;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<button class="buttonFirst" id="1" onClick="alert('hit')"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" id="3"></button>
<button class="buttonFirst" id="4"></button>
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent ;
transform-origin: 0 0;
transform: rotate(135deg);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
Can you please replace ".triangle::after" with this code and check whether it solves you problem or not?
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent;
transform-origin: 0 0;
transform: rotate(135deg);
background: #fff;
box-shadow: -2px 2px 2px 1px rgb(233, 233, 233);
}
Just add z-index: -1; to the pseudo element to move it behind the main element:
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
right: 1%;
box-sizing: border-box;
border: 0.75em solid black;
border-color: transparent transparent ;
transform-origin: 0 0;
transform: rotate(135deg);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
z-index: -1;
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
It may be help and also looks good
body{
background:#fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
border-radius:5px;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 17px;
right: 1%;
box-sizing: border-box;
border: 0.75em solid;
border-color: #fff;
transform-origin: 0 0;
transform: rotate(-133deg);
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
Same method use here.
Z-index: -1 is safe bro
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 5 years ago.
I am making Div with top right arrow and having contents in that.
Just like in the
.arrow_box {
position: relative;
background: #FFF;
border: 2px solid #fff;
box-shadow: 0px 0px 5px #000;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 99%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #FFF;
border-width: 21px;
margin-left: -21px;
}
<div class="arrow_box">DO You Really Want this Feature?</div>
Somehow i can't get my output.
Any Help Would Be Great?
Thank You
body {
padding: 3em;
font-family: sans-serif;
}
.arrow_box {
position: relative;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
padding: 1em 2em;
color: #aaa;
}
.arrow_box::after,
.arrow_box::before {
content: "";
background-color: #fff;
position: absolute;
top: 0;
left: 100%;
height: 1em;
width: 1em;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transform-origin: center center;
transform: translate(-2em, -.5em) rotate(45deg);
z-index: -1;
}
.arrow_box::before {
z-index: 1;
box-shadow: none;
}
<div class="arrow_box">DO You Really Want this Feature?</div>
So, my button, for some reason, won't go to the URL that is defined when the user clicks directly on the text lying on top of the button. (ie: for my button, "Test Text")
When you click on the button, it always depresses, but it only goes to the linked URL when you click outside of the text's area.
I have tried using a <div> instead of <a>, but no luck with that either.
You can see the button live at http://198.154.213.30/~foster2/index.php/news
Below is the code for my button:
<a class="button3D" href="http://www.google.com" target="_blank">Test Text</a>
<style>
.button3D {
position: relative;
display: block;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
background: #650404;
font-family: sans-serif;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #4e0202;
-webkit-box-shadow: 0 5px 15px -5px #222;
-moz-box-shadow: 0 5px 15px -5px #222;
box-shadow: 0 5px 15px -5px #222;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.button3D:before {
content: "";
position: absolute;
top: -9px;
left: 0px;
width: 178px;
height: 0px;
border: 11px solid transparent;
border-bottom: 8px solid #650404;
border-top: 0;
}
.button3D:after {
content: "";
color: #c56338;
line-height: 180px;
font-size: 16px;
position: absolute;
top: -8px;
left: 1px;
width: 178px;
height: 0px;
border: 10px solid transparent;
border-bottom: 7px solid #891414;
border-top: 0;
}
.button3D:active {
width: 158px;
height: 41px;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -79px;
line-height: 36px;
font-size: 22px;
color: #eee;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #3c0101;
background: #4e0202;
border-top: 0;
-webkit-box-shadow: 0 0 0 0;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
.button3D:active:before {
top: 0;
height: 42px;
width: 158px;
left: -12px;
padding: 0 1px;
border: 11px solid #b3b294;
border-bottom: 8px solid #deddad;
border-top: 0;
}
.button3D:active:after {
content: "";
top: 0;
height: 50px;
width: 182px;
left: -13px;
border: 0;
-webkit-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
}
</style>
Appreciate any input/insight you can provide for me as to how I can fix this problem.
I think it is because the link is moving. When you click and hold a link you can drag off the link and it will not navigate. It appears that the moving link is triggering this functionality. The only thing I can think that you could do is use JavaScript onmousedown to navigate.