I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
The shadow setting I want to apply is:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.
P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:
Updated
Edit:
See the link below for another approach using css content and :after
http://css-tricks.com/triangle-with-shadow/
I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Caveat
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadow property. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform property is the key.
Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapes
Enjoy
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
like this demo:
http://codepen.io/anon/pen/sorAB
How can i remove the white line between the block when they are rotateX.
Maybe it can without the translate/margin/top property.
Bad english. XD
You can add a border around your blocks :
http://codepen.io/anon/pen/vndfc
The problem is that it is difficult to make the div match exactly.
Your layout is exact. However, slight round-outs in dimensions produce that gap between divs.
But, if you increase the sizes, then the corners don't match anymore.
One posible solution is to set a shadow between divs. And make this shadow slightly smaller than the div, so that it won't be visible in the angles:
#girl{
width:300px;height:400px;margin:100px auto 0;
-webkit-perspective:1000;
-webkit-perspective-origin: center center;
}
#girl .item{
height: 100px;width:100%;background-color:#333;
-webkit-transform-origin:top;
-webkit-transform-style:preserve-3d;
box-shadow: 0px 2px 0px -1px #333;
}
#girl .item.i1{-webkit-transform:rotateX(45deg);}
#girl .item.i2{-webkit-transform:translateY(100px) rotateX(-90deg);}
#girl .item.i3{-webkit-transform:translateY(100px) rotateX(90deg);}
#girl .item.i4{-webkit-transform:translateY(100px) rotateX(-90deg);}
codepen
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width?
I've tried to make it here http://jsfiddle.net/jitendravyas/6RsnN/ but don't how to give angle to it and how to create cut-out border around it.
And button should be flexible in width.
I'm only making this for iphone so full CSS3 is allowed.
The final result is:
pure css blue button http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png
Demonstration of flexibility:
Although I tried to make a button like in the picture, but some parts may not be the same. Would consider it a proof of concept.
This button can be pure CSS only with a lot of extra markup with this markup:
<a class="btn">
<span class="triangle"></span>
<span class="btn_inner">
<span class="triangle"></span>
Back
</span>
</a>
The main trick for creating triangles with box-shadow includes several steps:
Step 1. Create element '.triangle' - it will be a wrap for real triangle.
Step 2. Apply position: absolute;, fix its width and height:
red background-color is onle for demo
Step 3. Create big square element '.triangle::before' — it will be 'real' triangle after step 6
Step 4. Turn it 45 degrees (transform: rotate(45deg)).
Step 5. Add box-shadow.
The result after step 3 is:
Step 6. Add overflow: hidden; Ta-dum!
On .tag_inner use the same trick, but box-shadow should be not inset but normal.
Notice, that if you will use this trick always check what vendor prefixes must be used and place property without prefix on the last place.
Update: Make markup more semantic — only one element for triangle trick.
Here's your angle, but since it is already a border, you can't put a border on it:
body {padding:40px; background-color: #1693da;}
.input {
display:block;
text-decoration:none;
padding:10px 60px;
background:#117ebb;
font-size:60px;
color:#fff;
border-radius: 20px;
box-shadow: 0px 10px 0px #003355;
position:relative;
}
.input:after {
position:absolute;
top:0;
left:-32px;
content:" ";
width: 0;
height: 0px;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right:45px solid #117ebb;
}
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.