Please see my codes below:
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 100%;
height: 100%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
Hi, guys just asking how can I remove the color blue on the bottom
part. I'm so confused why still the color showing even I've added a
white background in the first place. Can anyone help me with this?
Thanks
You can try with background-color:transparent
I think you can set the width and hight to bigger values
.spl-user-chatbox {
width: 300px;
height: 300px;
position: absolute;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 200%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
If you're not going to see the border-radius at the bottom two corners, just remove those two and only add a border-radius to the top two corners.
Add border-radius: 10px 10px 0px 0px; to the .spl-user-chatbox
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
overflow: hidden;
left: 50%;
border-radius: 10px 10px 0px 0px; /* only add border-radius to the top two corners */
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 100%;
height: 100%;
z-index: 1;
/* overflow: hidden; */
border-radius: inherit;
box-shadow: 0 2px 12px -4px rgb(0 0 0 / 20%);
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
you can do that :
.spl-user-chatbox {
position: absolute;
width: 220px;
height: 220px;
background-color: #2196f3;
top: 50%;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
}
.spl-chatbox-hrd {
position: absolute;
background-color: #ffffff;
top: 105px;
left: -1px;
border-radius: 15px;
width: calc(100% + 2px);
min-height: calc(100% + 2px);
z-index: 1;
}
<div class="spl-user-chatbox">
<div class="spl-chatbox-hrd">
<div class="spl-chatbox-close"></div>
<div class="spl-chatbox-hrd-uName">Text</div>
</div>
</div>
This seems to only occur when the user zooms the page in the browser. I don't think you can avoid this without adding a white 1px border to the white element, it seems to be a browser quirk. As long as there is no zooming going on, nobody will notice.
Related
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</div>
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
I have circle shapes that are made of CSS, i'm trying to put a tool-tip that appears when i hover into the circle, any ideas on how to do that?
Here is my circle code:
#circle1 {
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div id="circle1"></div>
You can achieve this by putting an HTML element inside #circle1 (I used a span) for the tooltip, and using #circle1:hover to display the tooltip. Then I put a triangle as the ::after pseudo-element for the span. I used a CSS Triangle Generator to create the tooltip triangle.
.wrap {
overflow: auto;
padding: 10%;
width: 100%;
background: #eee;
box-sizing: border-box;
}
#circle1 {
display: block;
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9 -moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 20px auto auto;
position: relative;
}
span.tooltip {
visibility: hidden;
position: absolute;
bottom: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
width: 200px;
background: #444;
color: white;
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
text-align: center;
font-family: sans-serif;
}
span.tooltip::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #444444 transparent transparent transparent;
}
#circle1:hover span.tooltip {
visibility: visible;
}
<div class="wrap">
<a id="circle1">
<span class="tooltip">Tooltip, baby, yeah!</span>
</a>
</div>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100