I need to draw shapes as shown here in the Fiddle page http://jsfiddle.net/wNhjb/824/ with shadow, but shadow seems around the box not around the shape.
#shape {
height: 0;
width: 200px;
border-top: 50px solid blue;
border-right: 50px solid transparent;
box-shadow: 6px 6px 3px rgb(22,73,134);
}
How can use the above code to get proper result.
You can use 'filter:drop-shadow()' instead.
#shape {
height: 0;
width: 200px;
border-top: 50px solid blue;
border-right: 50px solid transparent;
//box-shadow: 6px 6px 3px rgb(22,73,134);
filter: drop-shadow(6px 6px 3px gray);
}
updated fiddle- http://jsfiddle.net/wNhjb/826/
Related
How to apply shadow to rows with rounded corner in a table ?
When I apply shadow-box to rows the corners appear without radius
https://codepen.io/moonflakes/pen/eYzjOXP
table {
border-collapse: separate;
border-spacing: 0px 20px;
}
.first-td {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
}
.inner-td {
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
}
.last-td {
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
th, td {
padding: 1em;
border-bottom: 2px solid white;
}
.css-mine {
margin-top: 2em;
clear: both;
}
body {
margin: 1.5em;
}
.tr-body {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
Apply the border radius to the table rows like this, which will remove the ugly corners:
.tr-body {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
This will make all 4 corners of the row have a radius of 10px. In your example, you applied the box shadow to the table row, and therefore the shape of the shadow will be the shape of the element it is applied on, which was originally a rectangle. Applying border-radius: 10px; to the table row will change the shape of the row elements and thus also change the shape of the shadow that they produce.
Also, I can see your logic when applying the borders to the data cell elements, but the way you've done it is unnecessary, and you could simply apply border: 1px solid #d1d1d1; to the table row element or .tr-body class.
Can anyone explain how it forms a triangle when the CSS width and height are set to 0.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
This is just a clever CSS Trick, shown on CSS Tricks.
It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).
A border is created on the outside of the set sized dimensions of an element unless you're using box-sizing: border-box and then all borders and padding are included in the set size of that element. Therefore, even though your element size is 0, it's building outside that to the size determined in your border rule.
Nothing magical happening here.
E.g.
div {
width: 0;
height: 0;
border: 10px solid #ccc;
}
<div></div>
http://codepen.io/paulcredmond/pen/rrpRjz
I tried this on UX, apparently that was the wrong place and everyone who answered misunderstood the question anyways.
So, what I want is my image(s) to have a 5px WHITE (#fff) border, with the shadow falling off of the border. I've seen it somewhere, read about it, but for some reason my code isn't working. All I see is the img, and the shadow. NO border in between at all.
This is what I've got:
img {
border: 5px solid #fff;
margin: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Which looks like this:
But I want it to look like this:
It is very easy. Add padding to image with the all other properties which you have already defined
img {
border: 5px solid #fff;
margin: 5px;
padding: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
So, what's happening is the border is larger than the size of your shadow.
Your current shadow declaration, box-shadow: 1px 1px 1px 1px #ccc; is telling the img to display a shadow that is offset 1px to the left, offset 1px to the top, has 1px amount of blur, and a spread of 1px.
This would be fine, however, your border: 5px solid white declaration is greater than that 2px total. You need to increase the size of your shadow.
Here is an example:
img {
border: 5px solid white;
box-shadow: 1px 1px 5px #ccc;
}
<img src="http://placehold.it/200x200">
This is driving me nuts, I've seen it before but can't replicate it or find it or any resources for it. What I am doing is a vertical ribbon with a leather texture and a "stitched pattern". The way the stitches work is simple enough, inner divs with dashed borders, and even the ribbon shape is easy enough using the pseudo :after class, but combining the two is just not going to plan.
This is what I have for css that is working so far (it is all done with css minus the leather texture):
.wrapleather {
width:100px;
height:120px;
float: right;
margin-right:20px;
background-image : url("leather.png");
border-radius: 5px;
-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
position:relative;
}
.wrapleather:after {
content: '';
display: block;
width: 0;
height: 105px;
position: absolute;
top: 0;
left: 0;
border-width: 0 50px 15px 50px;
border-style: solid;
border-color: transparent transparent #cdc0a8;
position:absolute;
top:0;
left:0;
}
.wrapleather .outside {
width:90px;
height:110px;
margin: 4px;
border-radius: 5px;
border: 1px dashed #aaa;
box-shadow: 0 0 0 1px #f5f5f5;
}
.wrapleather .inside {
width:90px;
height:110px;
border-radius: 5px;
}
<div class="wrapleather">
<div class="outside">
<div class="inside">
<p class="font">Leather</p>
</div>
</div>
</div>
Additionally the shadow is remaining in a "square" format and not taking the shape of everything. To clarify I am not asking anyone to debug or anything like that, I am simply asking for alternative or further methods to be shared that could achieve the desired results, css is still something I am in the process of learning so any advice or anything of that nature that you could give would be appreciated, and if you need any additional info please let me know. Thanks!
There is a way to do what you want with CSS only, but it won't work on all browsers. If you want the best browser support, you should probably use an image.
Here is a demo (you may have noticed I only use a single element, as you shouldn't introduce extra markup just for styling): http://jsfiddle.net/joshnh/eUje5/
HTML
<div class="ribbon"></div>
CSS
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-radius: 5px 5px 0 0;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee;
height: 120px;
margin: 0 5px;
position: relative;
width: 90px;
-webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
border-top: 15px solid #eee;
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
}
.ribbon:after {
border-left: 50px solid transparent;
right: -6px;
}
.ribbon:before {
border-right: 50px solid transparent;
left: -6px;
}
So, I wanted to make sure that I wasn't losing my mind and that this ribbon effect is actually possible on modern browsers without relying on webkit specific filters. So here it is for all those who come across this later.
You just need to be more diligent with how you model your box-shadows.
Note that when increasing the width, you'll need to subsequently decrease the angle at which you're rotating and skewing the :before and :after elements.
Example:
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-top: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee,
0 -5px 0 #eee,
5px -5px 0 #eee,
-5px -5px 0 #eee,
5px 1px 5px 5px #888;
height: 120px;
margin: 10px 5px 0 5px;
position: relative;
width: 90px;
z-index: 3;
}
.ribbon:after,
.ribbon:before {
content: '';
position: absolute;
top: calc(100% - 1px);
width: calc(50% + 1px);
border-bottom: 1px dashed #aaa;
}
.ribbon:after {
transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
transform-origin: top right;
right: -1px;
height: 40px;
background-color: #eee;
border-right: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888,
15px 0 5px -5px #888;
}
.ribbon:before {
transform: rotateZ(-20deg) skewX(-20deg);
transform-origin: top left;
left: -1px;
height: 40px;
background-color: #eee;
border-left: 1px dashed #aaa;
box-shadow: -5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888;
}
<div class="ribbon"></div>
Basically, I need to make a header, styled like this:
Is there a full css way, or do I need to use background-images?
Yes, you can do it using only CSS, but it's not easy and the result is... well, ugly.
You might want to check this as well: CSS for inverted curved tabs
EDIT: I got a better idea today, check this http://dabblet.com/gist/2762234
The CSS is as follows:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
It can be made to look prettier, but that would require a fixed width for the heading and a pseudo-element on the div.
You can probably achieve this by using a couple of elements stacked over eachother.
I don't think that is something you would want for production, so my advice would be to go for the background image.