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>
Related
I'm trying to adapt the images from the buttons (#but2, #but1) to their full height possible (in the div) and their corresponding width according to their height (width: auto).
I've tried with this code for the images from the buttons:
#but1 img, #but2 img{
height: 100%;
width: auto;
}
But I can't get the output I want. I share an image showing what's the output of that code and what's the output I want.
Thanks a lot for your help!
#but1 {
margin-left: auto;
margin-right: 5px;
background-color: transparent;
border: 0;
}
#but2 {
margin-left: 5px;
margin-right: auto;
background-color: transparent;
border: 0;
}
#but1 img,
#but2 img {
width: 100%;
height: auto;
}
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#but-cont-2 {
margin-top: 25px;
background-color: #79b2f7;
position: relative;
}
#textarea {
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
float: left;
}
.text {
width: 100%;
background-color: transparent;
float: right;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container" id="but-cont-1">
<textarea id="textarea" name="prod"></textarea>
<button onclick="sub()" id="but1">
<img id="but1" src="https://cdn-icons-png.flaticon.com/512/861/861180.png" alt="">
</button>
</div>
<div class="button-container" id="but-cont-2">
<label id="cont" class="text"></label>
<button id="but2">
<img id="but2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="">
</button>
</div>
</div>
Try using display: flex; for the button and try to resize the images with pixels like width: 20px; and height: auto; or verse versa, it should fix it.
Here is my idea of doing that: https://jsfiddle.net/L1ma5qrc/86/
*{
margin: 0;
padding: 0;
}
body{
padding: 20px
}
#but1 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but1:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center right;
height: 50px;
width: 50px;
margin-right: 16px;
margin-left: auto;
}
#but2 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but2:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center left;
height: 50px;
width: 50px;
margin-right: auto;
margin-left: 16px;
}
<div>
<div class="button-container" id="but-cont-1">
<button id="but1">
</button>
</div>
<div class="button-container" id="but-cont-2">
<button id="but2">
</button>
</div>
</div>
I think I'd look at applying the images as backgrounds. It cleans up the markup quite a bit and makes positioning easier.
Other tips:
Don't use floats for alignment. They're an outdated layout technique and have very few appropriate uses anymore.
Avoid absolute positioning when possible. It can also be troublesome.
Floats don't work with absolute positioning. Use one or the other if you must.
Rely less on IDs in your CSS. Ideally everything is class-based so it's reusable.
Consider not removing outlines. They're important for accessibility.
Avoid using label elements other than with form inputs. That would be nonstandard and also a possible accessibility issue.
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.button-container.alt {
margin-top: 25px;
background-color: #79b2f7;
}
.button-container button {
width: 100%;
height: 100%;
background-size: auto 60%;
background-position: 93% 50%;
background-repeat: no-repeat;
border: 0;
}
.button-container button.icon-recycle {
background-image: url("https://cdn-icons-png.flaticon.com/512/861/861180.png");
}
.button-container button.icon-trash {
background-image: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png");
background-position: 7% 50%;
}
#textarea {
position: absolute;
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
}
.text {
width: 100%;
background-color: transparent;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container">
<textarea id="textarea" name="prod"></textarea>
<button class="icon-recycle" onclick="sub()"></button>
</div>
<div class="button-container alt">
<span class="text"></span>
<button class="icon-trash"></button>
</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>
I'm trying to draw this output with css (or svg). For me, the tough part is the half-arc at the left and right side of the circle. Should I stick to pure css or is it better using images?
Any help is appreciated...
This is what I managed to make :
Here is the code :
body {
background-color: #002911 !important;
}
h3 {
color: #ffd004;
}
#actions-container {
margin-top: 30px;
}
#actions-container .action-icon {
width: 200px;
height: 200px;
background-color: rgb(255, 208, 4);
border-radius: 50%;
box-shadow: 5px -2px 6px 3px #0000004a;
/* center contents*/
display: flex;
justify-content: center;
align-items: center;
}
.right-arc {
position: relative;
display: inline-block;
font-size: 30px;
color: lightgreen;
margin: 40px;
}
.right-arc::after {
content: '';
position: absolute;
right: -150px;
top: 57px;
height: 300px;
width: 300px;
border-radius: 50% 50% 50% 50%;
border-width: 0px 1px 0px 0px;
border-style: solid;
/*border-top: outset;*/
}
/*svg {
width: 33%;
height: auto;
}*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="actions-container">
<div class="d-flex justify-content-between">
<div class="action-icon-box text-center ">
<div class="right-arc">
</div>
<h3 class="text-center">Title</h3>
<div class="p-1 action-icon text-center mt-4">
<img class="center" src="/Content/images/lp-homepage/microphone.png" height="100" />
</div>
</div>
</div>
</div>
You could use a pseudo element with an inset box-shadow to create the fade out border on the bottom like this :
body {
background: #232323;
}
.wrap {
box-sizing: border-box;
position: relative;
width: 50%;
border: 3px solid #ffd004;
border-radius: 50%;
}
.wrap::before {
content:'';
display:block;
padding-bottom:100%;
}
.wrap::after {
content: '';
position: absolute;
bottom: -3px;
left: -3px;
right: -3px;
height: 100%;
z-index: 1;
box-shadow: inset 0px -270px 70px -100px #232323;
}
.title {
color: #ffd004;
margin: 0;
position: absolute;
top: -3px;
left: 0;
width: 100%;
text-align: center;
z-index: 2;
background: #232323;
}
.circle {
position: absolute;
top:15%;
left:15%;
width: 70%;
height: 70%;
border-radius: 50%;
background: #ffd004;
z-index: 2;
}
<div class="wrap">
<h2 class="title">Title</h2>
<div class="circle"></div>
</div>
Be aware that this will only work on plain color background. If you need to display this over a gradient or image, I highly suggest using SVG.
The aspect ratio of the circle is kept using the "padding technique" from this answer : Maintain the aspect ratio of a div with CSS
If you need transparency, you can use a mask-image with a linear-gradient.
/* based on #web-tiki's implementation */
body {
background: #232323;
}
.wrap {
box-sizing: border-box;
position: relative;
width: 50%;
padding: 60px;
}
/* the border */
.wrap::before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #ffd004;
border-radius: 50%;
-webkit-mask-image: linear-gradient(transparent 10%, black 10%, transparent 80% );
mask-image: linear-gradient(transparent 10%, black 10%, transparent 80% );
}
/* the circle */
.wrap::after {
content:"";
display:block;
background: #ffd004;
padding-top: 100%;
border-radius: 50%;
box-shadow: 6px 0px 10px black;
}
.title {
color: #ffd004;
margin: 0;
position: absolute;
top: -3px;
left: 0;
right: 0;
text-align: center;
}
body:hover {
/* CSS checkerboard stolen from https://drafts.csswg.org/css-images-4/#example-2de97f53 */
background: repeating-conic-gradient(rgba(0,0,0,0.1) 0deg 25%, white 0deg 50%);
background-size: 2em 2em;
}
<div class="wrap">
<h2 class="title">Title</h2>
</div>
Try this
body {
background-color: #002911 !important;
}
h3 {
color: #ffd004;
}
#actions-container {
margin-top: 30px;
}
#actions-container .action-icon {
width: 200px;
height: 200px;
background-color: rgb(255, 208, 4);
border-radius: 50%;
box-shadow: 5px -2px 6px 3px #0000004a;
/* center contents*/
display: flex;
justify-content: center;
align-items: center;
}
.action-icon-box{
position: relative;
}
#actions-container .action-icon-box::after,#actions-container .action-icon-box::before{
position: absolute;
content: '';
width: 300px;
height:300px;
border-radius: 50%;
z-index:-1;
top:0px;
border: 2px solid;
border-color:transparent;
}
#actions-container .action-icon-box::before{
border-right-color: green;
right: -60px;
}
#actions-container .action-icon-box::after{
border-left-color: green;
left: -60px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="actions-container">
<div class="d-flex justify-content-between">
<div class="action-icon-box text-center ">
<h3 class="text-center">Title</h3>
<div class="p-1 action-icon text-center mt-4">
<img class="center" src="/Content/images/lp-homepage/microphone.png" height="100" />
</div>
</div>
</div>
</div>
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>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}