Is there a way to disable the box shadow for the part where the pseudo-element arrow resides?
Current:
or without the negative z-index on the pseudo-element:
Desired result:
#element {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
box-shadow: 5px 5px 5px #222;
}
#element::after {
content: "";
width: 25px;
height: 25px;
background-color: blue;
top: 40px;
left: 88px;
transform: rotate(45deg);
position: absolute;
z-index: -1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
<div id="element"></div>
You can't control which parts of a box shadow or a drop shadow filter are rendered, at least not directly.
Depending on your layout, you could cheat by patching another pseudo-element over the one that you have. I swap the ::after with a ::before to obviate the need for z-index because boxes with the same stack level stack from back to front (meaning ::after stacks in front of ::before).
However if you have any content in your element, you will need to position the content and give it z-index: 1 to ensure that it will paint on top of both of your pseudo-element boxes, since ::after comes after the main content and will therefore also stack in front of the content. See the #element > p rule in the following example.
#element {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
box-shadow: 5px 5px 5px #222;
}
#element::before, #element::after {
content: "";
background-color: inherit;
position: absolute;
}
#element::before {
width: 25px;
height: 25px;
top: 40px;
left: 88px;
transform: rotate(45deg);
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
#element::after {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#element > p {
position: relative;
z-index: 1;
}
<div id="element"><p>text</p></div>
Related
Ok, so in HTML I have one div tag with a before and after pseudo elements. This is my CSS:
.divClass{
background: #41423D;
height:30px;
}
.divClass:before{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent #41423D #41423D transparent;
border-style:solid;
position: absolute;
top: 0;
left: -14px;
}
.divClass:after{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent transparent #41423D #41423D;
border-style:solid;
position: absolute;
top: 0;
right: -14px;
}
So, in design it becomes like this:
___
/ \
Now all I need is a shadow on the before and after pseudo elements which are the 2 triangles on either side of the div. The pseudo elements have 0 width and height so using box-shadow is a little tricky.
I need the shadow along the triangle. So, what can I do?
You can use unicode character : ▲ to make the triangles.
Apply a text shadow on it.
If the shape of the triangle is not what you want you can adjust it with transform: rotate(); or transform: skewX(); or both.
It's a bit tricky and not perfect but it can works :
span {
display: inline-block;
font-size: 70px;
transform: skewX(29.5deg);
color: red;
text-shadow: 2px 2px 4px gray;
}
<span>▲</span>
There are some other possibilities, all describe on a CSS Tricks post, so check it if you want :
https://css-tricks.com/triangle-with-shadow/
If think you can check filter: drop-shadow() too. In case you do not need a support for all the browsers it may works for you...
edit:
According to the css tricks post, can't you do that ?
.triangle-with-shadow {
transform: rotate(-45deg);
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg); /* Prefixes... */
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="triangle-with-shadow"></div>
Another possibility if you just want the shape that you describe is to use the perspective :
.shape {
background: #41423D;
width: 150px;
height: 150px;
margin: 20px auto;
transform-origin:50% 100%;
transform:perspective(100px) rotateX(30deg);
box-shadow: 2px 2px 15px #41423D;
}
<div class="shape"></div>
I'm looking to achieve a slanted edge on my div. The problem I'm coming across is the simple code I found to accomplish this is not cross-browser compatible. In fact, it only shows in Chrome.
Can anyone advise on how to do the following so it works in ALL browsers:
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
This effect would achieve:
Here's my entire CSS code:
.my-slanted-div {
position:absolute;
bottom:0;
left:0;
width:100px;
padding:10px 10px;
background-color:#eee;
font-size:20px;
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
Can anyone help me out?
You can also skew pseudo-element, like this:
.my-slanted-div {
position:absolute;
bottom:40px;
left:0;
width:80px;
padding:10px 10px;
background-color:red;
font-size:20px;
}
.my-slanted-div:after {
width:50px;
background:red;
position:absolute;
height:100%;
content:' ';
right:-22px;
top:0;
transform: skew(45deg);
}
<div class="my-slanted-div">
TEXT
</div>
p.s. change angle, play with values...to get desired result...
Edit: Demo in context -> https://jsfiddle.net/Lbwj40mg/2/
This should do the trick using borders.
<div id="container">
<p id="text">Hello</p>
<div id="slanted"></div>
</div>
#container {
position: relative;
height: 200px;
width: 200px;
background:url(http://placehold.it/200x200);
}
#text {
position: absolute;
bottom: 15px;
left: 10px;
z-index: 1;
margin: 0;
}
#slanted {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
border-left: 75px solid #dedede;
border-right: 50px solid transparent;
border-bottom: 50px solid #dedede;
}
jsfiddle
I've made it work one way with :before and :after pseudos, you simply need to update the widths, heights and line-height to suit the size of tab you want; the rectangle must be the same height as the :before and :after bits for a clean look.
.box {
background: red;
width: 200px;
position: relative;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 50px;
color: white;
font-size: 21px;
font-family: arial, sans-serif;
}
.box:after {
position: absolute;
right: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.box:before {
position: absolute;
left: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="box">
Text in the box
</div>
Here's a way with transform: rotate just to add to the list. Quite annoying as you will have to play with pixels for alignment and make some entries into #media rules for different screen sizes. But it should be fairly cross browser friendly (but maybe not opera mini)
body {
background-color: #333;
}
.container {
position: absolute; /* needs a position, relative is fine. abolsute just for this example */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #ccc;
overflow: hidden; /* required */
}
.salutations {
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 0 15px;
background-color: #fcfcfc;
height: 50px;
line-height: 50px; /* match height to vertically center text */
font-size: 30px;
}
.salutations::before {
content: '';
position: absolute;
top: 21px; /* play with this for alignment */
right: -36px; /* play with this for alignment */
height: 40px; width: 70px; /* may need to adjust these depending on container size */
background-color: #fcfcfc;
transform: rotate(60deg); /* to adjust angle */
z-index: -1; /* puts the pseudo element ::before below .salutations */
}
<div class="container">
<div class="salutations">Hello</div>
</div>
P.S. May have to adjust a pixel or two, my eyes suck.
Browser Compatability
transform: rotate
pseudo elements (::before)
Fiddle
https://jsfiddle.net/Hastig/wy5bjxg3/
It is most likely it is an SVG scaled to always fit its text which is simple and quick way of doing it; if you must use CSS then you could always:
Set a gradient to the div from color to transparent so that it takes up most of the div and the transition of color is abrupt and not smooth like how a normal gradient looks.
create another div and using borders create a triangle to touch the other main rectangular div such as doing:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
}
Using css you can generate an element that takes the shape of a triangle.
Css tricks has a post on that.
By making the .slanted class position itself relative, we can position the generated content on the right side of the slanted div using absolute positioning.
It'll take some fiddling to get the perfect result you want, but here's an example.
.slanted{
background: #007bff;
color: #fff;
position: relative;
display:inline-block;
font-size: 20px;
height: 25px;
padding: 2px 4px;
}
.slanted::after {
content: " ";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 29px 0 0 20px;
border-color: transparent transparent transparent #007bff;
position: absolute;
top: 0;
right: -20px;
}
<div class="slanted">Hello</div>
I am trying to create an offset border effect. Can this be done with pure css.
These are buttons so will be different sizes and colours.
I use pseudo-element :after to create offset border effect.
body {
background: black;
padding: 30px;
}
div {
background: white;
height: 75px;
width: 175px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div></div>
Update
As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow. Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.
I'm going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you'll see how their box-shadow differs from the one described below).
Note: In my answer I've made the foreground box red instead of white to demonstrate that this 'offset border' does not overlap the initial element. You'll need to change this back to white yourself.
The Left and Bottom Borders
You can achieve the left and bottom borders really easily with box-shadow. You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}
<div></div>
The Top and Right Borders
You can then use pseudo-elements (::before and ::after) to fill in those extra borders:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
position: relative;
}
div::before {
background: white;
content: '';
position: absolute;
height: 1px;
width: 7px;
top: 6px;
right: 100%;
}
div::after {
background: white;
content: '';
position: absolute;
height: 7px;
width: 1px;
top: 100%;
right: 6px;
}
<div></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.
I want to implement a picture shadow as below
I tried to use the following code, but that can't work as I want
Code snippet:
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 30px;
height: 5px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(0, 0, 0, 1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
-webkit-transform: scaleX(5);
transform: scaleX(5);
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
}
<div class="oval"></div>
I want to put the HTML code below the picture if the CSS code works well.
Another method to achieve this would be to make use of a pseudo-element with CSS transform. In the below snippet, the :after pseudo-element is rotated in X-axis by close to 90deg (but not by equal to 90deg) to give it an oval like appearance. Then by adding a radial-gradient background and box-shadow, we can get an appearance close to the image in the picture.
One advantage of this approach is that the shadow that is produced is responsive and so it can adapt to change in container/image sizes.
.oval{
position: relative;
height: 200px;
width: 200px;
border: 8px solid red;
border-radius: 50%;
}
.oval img{
border-radius: 50%;
}
.oval:after{
position: absolute;
content: '';
height: 100%;
width: calc(100% - 40px); /* to offset for the shadow */
top: 25%;
left: 20px; /* to offset for the shadow spread */
border-radius: 50%;
backface-visibility: hidden;
transform-origin: 50% bottom;
transform: rotateX(85deg);
background: radial-gradient(ellipse at center, rgba(216,216,216, 0.5), rgba(248,248,248,0.1));
box-shadow: 0px 0px 20px 20px rgba(248,248,248,0.5);
}
/* Just for demo */
.oval#oval2{ height: 300px; width: 300px; }
div{ float: left; }
<div class="oval">
<img src='http://lorempixel.com/200/200/nature/1' />
</div>
<div class="oval" id="oval2">
<img src='http://lorempixel.com/300/300/nature/1' />
</div>
You could achieve this quite easily if you're able to wrap the <img /> element in a container tag such as a <div>. By using the :after pseudo-selector on the parent div, you can achieve a similar approach using box-shadow.
For example, assuming you have the following markup:
You may add the following CSS definitions:
.image-round {
border: 4px solid red;
border-radius: 50%;
}
.image-shadow {
display: inline-block;
position: relative;
}
.image-shadow:after {
display: block;
content: '';
position: absolute;
bottom: -30px;
height: 10px;
right: 5px;
left: 5px;
border-radius: 50%;
background: #ccc;
box-shadow: 0 0 10px 10px #ccc;
}
Of course, you can modify the left and right properties of the :after pseudo-element to achieve a better look.
jsFiddle Demo