I've got a basic html that contain such lines
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>
And css
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
}
But I cannot make them overlap each other (specifically I want for rectangle to start at the center of the circle while hiding part of circle inside). When I try to move one via margin - another moves and so on.
jsfiddle
How to overlap them?
Use positioning. For example,
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
Is it possible to style the following HTML structure to the image shown below with CSS only?
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
Required design:
You can do it as below if we can add a container div in the HTML:
.container{
background: gray;
padding: 16px 10px;
width:max-content;
}
.xyz-dialog {
background: white;
padding: 1rem;
border-radius: 8px;
position: relative;
width: 300px;
}
.xyz-dialog::after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
position: absolute;
top: 100%;
}
.body {
margin-top:8px;
color: gray;
font-size: 15px
}
<div class= "container">
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
You can do it as below if we cannot touch the HTML structure:
.xyz-dialog {
padding: 1rem;
border-radius: 8px;
position: relative;
width: 300px;
}
.xyz-dialog::after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
position: absolute;
top: calc(100% -1rem);
left: 2rem;
}
.xyz-dialog::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: gray;
z-index: -1;
}
.title {
padding: 1rem;
background: white;
border-radius: 10px 10px 0 0;
margin: 0 0 -5px 0;
}
.body {
color: gray;
font-size: 15px;
background: white;
margin: 0;
padding: 1rem;
border-radius: 0 0 10px 10px;
}
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
You can use after and border.
.xyz-dialog::after{
content: "";
border-top: 12px solid #f1f1f1;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
bottom: -12px;
left: 4%;
}
.xyz-dialog{
width: 50%;
background: #f1f1f1;
border-radius: 0.3em;
padding: 5px 30px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
flex-direction: column;
}
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
Little late. Two Boxes. For the small noise you use the css pseudo class after.
body {
background-color: #999;
}
.wrapper {
padding:20px;
}
h3 {
margin:0;
color: #000;
}
.bubble {
position: relative;
background: white;
color: #999;
font-family: Arial;
font-size: 16px;
text-align: left;
width: 250px;
height: 120px;
border-radius: 10px;
padding: 0px;
}
.bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #fff transparent transparent;
bottom: -16px;
left: 17%;
margin-left: -10px;
}
<div class="bubble">
<div class="wrapper">
<h3>title</h3>
<div>content</div>
</div>
</div>
I have seen the following design on this facebook page.
I am not sure how the top corners are made, and i cannot imagine a way to implement this.
Can anyone provide an idea?
Thanks in advance.
Using mask spans can be a good solution.
.container {
background-color: #242B40;
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
align-content: center;
justify-content: center;
}
.navbar {
width: 80%;
display: block;
background: #fff;
position: relative;
height: 50px;
border-radius: 0 0 30px 30px;
}
.left-mask {
width: 42px;
height:55px;
background: #fff;
display: block;
position: absolute;
top: -17px;
left: -20px;
transform: rotate(-32deg);}
.left-mask:before {
width: 45px;
display: block;
background: #242B40;
height: 65px;
border-radius: 0px 20px 0px 0px;
margin-left: -34px;
content: ' ';
}
<div class="container">
<div class="navbar">
<span class="left-mask"></span>
</div>
</div>
Simple example to get curve edges
.curve{
background-color:black;
width:100%;
height:20px;
border-bottom-left-radius:50% 50%;
border-bottom-right-radius:50% 50%;
background: #232323;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.36);
}
.box {
width: 100%;
height: 45px;
background: #232323;
}
<div class="box"></div>
<div class="curve"></div>
Is it possible to add image as box shadow, for example to put image with dots instead of standard shadow?
https://i.stack.imgur.com/DOJGh.png
or somehow to replace shadow from picture with dots?
to get effect like this on picture down here
http://prntscr.com/fvjnht
Did you want something like this? It's not exactly box-shadow, but it imitates it.
You can set whatever image you like as a background for .image::after.
html, body {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.contain {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image{
position: relative;
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
}
.image::after {
content: '';
background: linear-gradient(to bottom, #333, red);
position: absolute;
width: 100%;
height: 100%;
bottom: -10px;
right: -10px;
z-index: -1;
}
<div class="contain">
<div class="image"></div>
</div>
I think this is exactly what you are looking for:
body {
background: black;
}
#logo {
width: 200px;
height: 200px;
display: block;
position: relative;
}
#logo::after {
content: "";
background: url("https://rfclipart.com/image/big/3f-a9-1a/red-dotted-halftone-background-Download-Royalty-free-Vector-File-EPS-183199.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 50%;
z-index: -1;
}
img {
width: 90%;
height: 90%;
padding: 5%;
display: block;
float: left;
border-radius: 50%;
box-shadow: 0px 0px 40px #ccc;
-moz-box-shadow: 0px 0px 40px #ccc;
-webkit-box-shadow: 0px 0px 40px #ccc;
}
<div id="logo">
<img src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-
shadow/256/User-icon.png" alt=""/>
</div>
Kind of like this?
.image_carousel img {
margin-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
}
<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>
Credit goes to Joseph Marikle.
Like this?
span {
border: 2px dotted red;
display: inline-block;
}
img {
padding: 0;
margin: 0;
display: block;
}
<span class="dotted-border"><img src="http://placehold.it/200"/></span>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}