I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}
Related
I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>
What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)
I've always been using CSS box-shadows since, but now I have an image with rounded corners and wanted to give it a rounded shadow. So I tried using filter: drop-shadow, but unfortunately it looks different from box-shadow. In my opinion, they should look the same, am I doing something wrong?
td {
padding: .5em 3em;
}
.box-shadow img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.drop-shadow img {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}
<table>
<tr>
<th>box shadow</th><th>drop shadow</th>
</tr>
<tr>
<td class="box-shadow">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
</td>
<td class="drop-shadow">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
</td>
</tr>
</table>
Is the appearance of these shadows defined in any spec, or do browsers just what they think they should do? Why do those look different?
Chrome/OS X:
Firefox/OS X:
I believe this is a bug. The W3C specification for CSS filters states that "values are interpreted as for box-shadow [CSS3BG]." Therefore, similar results should be expected from the two properties.
I achieved a similar issue, as seen here:
#box1, #box2 {
position: absolute;
top: 10px;
width: 100px;
height: 100px;
background: red;
}
#box1 { /* Using drop shadow, should appear identical to box shadow */
left: 10px;
filter: drop-shadow(0 5px 10px black)
}
#box2 {
left: 120px;
box-shadow: 0 5px 10px black;
}
<div id="box1"></div>
<div id="box2"></div>
This will display incorrectly in Chrome and Firefox like this:
However, it will display correctly in Safari like this:
If I decrease the shadow blur radius in Chrome by a factor of two, I get the expected result:
I have filed a bug report for Chromium and Firefox.
UPDATE: January 12, 2017
It turns out it wasn't a bug, but an issue with the specification.
For a box shadow the blur value is generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius. - Robert Longson
A specification issue has been raised here.
they are not the same . they achieve different things.
in the case of filter:drop-shadowsome browsers do not support the spread value as the box-shadow does. that's why they look different.
it also doesn't support inset
but as an advantage with filter:drop-shadow you can generate shadow around irregular shapes or images, whereas box-shadows generates a rectangular shadow.
see example below :
.boxShadow,.dropShadow {
width:100px;
height:100px;
background:green;
position:relative;
float:left;margin:20px;
}
.boxShadow {
box-shadow: 0 0 10px black;
}
.dropShadow {
-moz-filter: drop-shadow(0 0 10px black);
-webkit-filter: drop-shadow(0 0 10px black);
-o-filter: drop-shadow(0 0 10px black);
-ms-filter: drop-shadow(0 0 10px black);
filter: drop-shadow(0 0 10px black);
}
.boxShadow:before,.dropShadow:before {
position:absolute;
content:"";
width: 0;
height: 0;
right:0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
<div class="boxShadow">
</div>
<div class="dropShadow">
</div>
as you can see , with drop-shadow the pseudo-element also has a shadow around it, whereas with box-shadow it does not.
see more info here > Comparison drop-shadow vs box-shadow or here > Filter CSS
hope it helps
This most likely explains the rendering differences you are seeing.
The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element.
Also note the browser support of CSS Drop shadow vs Filter.
Can I use box-shadow
Can I use filter
I want to change the shape of the scroll bar in my page. Right now it is the common rectangle shaped one but i want it to be kind of an oval shape - rounded at both top and bottom of the rectangle.
How Can i achieve this through CSS? Or is this not possible at all.
I am looking for supporting this in IE10.
This is my css for the scroll bar that I have.
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
Check out this page for a good starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. These only work for browsers that use webkit unfortunately.
To get the rounded oval shape scrollbars you can do something like below:
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
Not tested, you can use a jQuery custom scrollbar as seen on this page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Well if you want fully transparent than you can use
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
border: 5px solid rgba(255, 255, 255, .5);
Here, a means alpha, which you can scale, 0-1.
Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.
Demo
Demo 2 (With a background image for nested div)
Demo 3 (With an img tag instead of a background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.
You can also use border-style: double with background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
For example:
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Using the :before pseudo-element,
CSS3's border-radius,
and some transparency is quite easy:
LIVE DEMO
<div class="circle"></div>
CSS:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The :before attaches to our .circle another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba (rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too.
When the mouse is not over the boxes, they go back to the same size with no drop shadow.
Normal:
Mouse over:
Scroll over the boxes to see the effect here.
jsFiddle DEMO
Hovering over elements and making them larger can be done in many ways, and it depends on your layout requirements and the framework your using.
Since those boxes appear to be div's with CSS3 box shadow property, you can do something like that in pure CSS using :hover
HTML:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
CSS:
body {
background-color: black;
}
.box {
background-color: grey;
width: 200px;
height: 400px;
float: left;
border: 6px solid red;
margin: 10px;
}
.box:hover{
width: 250px;
/* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
height: 452px;
/* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
/* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
/* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
margin-top: -18px;
-moz-box-shadow: 0 0 50px red;
-webkit-box-shadow: 0 0 50px red;
box-shadow: 0 0 50px red;
}
EDIT 2:
Revised jsFiddle DEMO
You can accomplish this using "transform: scale(x,y)" to zoom your element.
E.g.
div:hover{
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
will zoom your div by 1.5 times on x-axis and keep 1.25 times on y-axis.
To add shadow -
div:hover{
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
This is easily accomplished with some HTML and CSS. They're commonly called "Dropdown" menus or "pop-out" menus and there are tons of tutorials on how to make them; here's one:
http://www.seoconsultants.com/css/menus/tutorial/