I want to place boxshadow on an image. I'm trying following but it just adds it behind the image, making it not visible. How that can be done?
CSS and HTML:
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
Problem:
JSFiddle Demo:
http://jsfiddle.net/Lwm95h7q/
You can do this with :after, for example.
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
position: relative;
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
.box2:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: inset 0px 0px 0px 10px #f00;
z-index: 1;
}
Take a look at the fiddle:
http://jsfiddle.net/skeurentjes/Lwm95h7q/5/
Just replace box-shadow with
outline: 10px solid #f00;outline-offset:-10px;
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
float: left;
height: 150px;
width: 150px;
outline: 10px solid #f00;
outline-offset:-10px;
}
<div class="box1">some text</div>
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
This can be achieved by using an :after pseudo element with the box-shadow over the top of the img:
Add position: relative; to .box2 to allow the pseudo element to be positioned relatively to it
Add .box2:after with position: absolute; to take it out of the document flow. Set the height and width equal to the height and width of .box2 and position it to the top and left of .box2. Apply the box-shadow to this
.box1 {
background: green;
box-shadow: inset 0px 0px 0px 10px #f00;
float: left;
height: 150px;
margin-right: 50px;
width: 150px;
}
.box2 {
float: left;
height: 150px;
position: relative;
width: 150px;
}
.box2:after {
box-shadow: inset 0px 0px 0px 10px #f00;
content: "";
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<div class="box1">some text</div>
<div class="box2">
<img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" />
</div>
you have not given padding so.. add this css
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 10px 10px 10px 10px #f00;
padding: 10px;
}
Related
How can I create a "pile" effect like in this picture?
I'd like the formation/spacing of the pile to stay as it is, and for the pile to shift left or right as the window is resized.
I've been fiddling around with absolute/relative positioning, but I'm a CSS newbie and I'm not sure if this is the way to go.
This is what I have so far:
.boxes {
position: absolute;
top: 100px;
}
.box1 {
position: relative;
left: 10vw;
width:fit-content;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
}
.box2 {
position: relative;
width:fit-content;
left: 16vw;
bottom: 13vh;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
transform: rotate(10.84deg);
}
.box3 {
position: relative;
width:fit-content;
left: 25vw;
bottom: 20vh;
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0);
transform: rotate(21deg);
}
<div class="boxes">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
You should set boxes to relative and it's child absolute like:
.boxes {
top: 100px;
position: relative;
}
.box1 {
position: absolute;
...
}
.box2{
position: relative;
width: 70px;
left: 19vw;
bottom: 7vh;
width: 70px;
transform: rotate(16deg);
padding: 0px 10px 4px 10px;
box-shadow: 0px 0px 0px 2px rgb(0 0 0);
}
.box3 {
left: 27vw;
width: 40px;
bottom: 32vh;
position: relative;
padding: 0px 10px 4px 10px;
transform: rotate(-4deg);
box-shadow: 0px 0px 0px 2px rgb(0 0 0);
}
//etc..
Try to play with rotate transform - MDN
I have created a #wrapper with a width and a height. Then I gave the wrapper position: relative; because we will position the single elements with position: absolute;.
Here is the code I used:
* {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 150px;
width: 450px;
border: 1px solid;
}
#blue {
width: 100px;
height: 30px;
background: blue;
position: absolute;
bottom: 0;
left: 70px;
}
#purple {
width: 100px;
height: 30px;
background: purple;
position: absolute;
bottom: 20px;
left: 145px;
transform: rotate(25deg);
}
#green {
width: 50px;
height: 30px;
background: green;
position: absolute;
bottom: 63px;
left: 177px;
transform: rotate(-10deg);
}
#red {
width: 100px;
height: 30px;
background: red;
position: absolute;
bottom: 21px;
left: 220px;
transform: rotate(28deg);
}
<div id="wrapper">
<div id="blue"></div>
<div id="purple"></div>
<div id="green"></div>
<div id="red"></div>
</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 have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.
My HTML is:
<div class="wrapper">
<div class="inner">
</div>
</div>
And CSS:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner{
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
}
Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.
Set the position of the child to relative and the z-index to -1:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
update the styles of inner class with position absolute and give z-index: -1;;
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
Here is the updated jsFiddle
You can do what you are wanting without the inner container as well.
http://codepen.io/creativenauts/pen/rLWZqp
* {
box-sizing: border-box;
}
.wrapper {
width: 200px;
height: 100px;
border: 20px solid #fff;
background-color: lightblue;
box-shadow: 0px 0px 1px rgba(#000, 0.5);
position: relative;
&:before {
position: absolute;
content: '';
width: 100%;
height: 100px;
top: -20px;
left: -20px;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
}
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;
The link below shows a simplified version of a website I'm working on and the problem I'm presented with.
I have several encapsulated box elements. There is the main container, and several divs within that container that will hold content, as that content expands, I need the container div to expand automatically. I can't seem to accomplish this unless I add a specific height in the CSS.
JSFiddle Example
HTML:
<body>
<div id="container">
<div id="block1">
<div id="one">one</div>
<div id="two">two<br />two<br /></div>
<div id="three">three<br />three<br />three<br /></div>
<div id="four">four<br />four<br />four<br />four<br /></div>
</div>
</div>
</body>
CSS:
#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background:
url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
border-width: 1px;
border-color: black;
border-style: solid;
}
Just apply overflow: hidden to #block1