it seem impossible to apply shadow on my css triangle? other example work because their markup is different.
div:before{
content: "";
width: 0;
height: 0;
position: relative;
top: 15px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #000 transparent transparent transparent;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px #000;
}
http://jsfiddle.net/2dmJp/2/
You can use filter:
div {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
-webkit-filter: drop-shadow(0 1px 2px #000);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
http://jsfiddle.net/Rn37T/1/
It isn't supported in IE9 and earlier.
cross-browser solution using transform rotate:
codepen.io/ryanmcnz/pen/JDLhu
Related
I know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
I have seen other complex effects being done with just CSS like the stacked paper effect:
http://jsfiddle.net/thefrontender/LwW7g/
<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>
.slide {
float: left;
display: block;
position: relative;
background: #FFF;
height: 10em;
width: 10em;
padding: 1em;
border: solid 2px #000;
margin-right: 2em;
}
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: -1em -1em #666,
-2em -2em #333;
}
My need is very similar except the 2 outer edges need to connect with the main frontal div:
Anyone know of any tricks that can make this possible?
If you're able to use CSS pseudo-elements:
.slide {
position: relative;
width: 200px; /* arbitrary, adjust to taste */
height: 500px; /* arbitrary, adjust to taste */
border: 2px solid #000;
border-right-width: 40px; /* this is the 'depth' of the 'sides' */
border-bottom-width: 40px;
}
.slide::before {
content: '';
position: absolute;
top: -2px; /* to cover the top of the border */
left: 100%;
border: 20px solid #fff;
border-bottom-color: transparent; /* allows the containing element's border to be seen */
border-left-color: transparent;
}
.slide::after {
content: '';
position: absolute;
top: 100%;
left: -2px;
border: 20px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
}
JS Fiddle demo.
The above uses the following HTML:
<div class="slide">Title</div>
You could stack multiple box shadows to attain the effect you're after:
.slide {
height: 200px;
width: 100px;
padding: 1em;
border: solid 2px #000;
}
.expandable-slide {
margin: 10px 10px 0 10px;
box-shadow: 1px 1px #999,
2px 2px #999,
3px 3px #999,
4px 4px #999,
5px 5px #999,
6px 6px #999,
7px 7px #999,
8px 8px #999,
9px 9px #999,
10px 10px #999;
}
jsFiddle example
You could do it this way (not the most elegant but works like a charm):
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: 0.05em 0.05em #555,
0.1em 0.1em #555,
0.15em 0.15em #555,
0.2em 0.2em #555,
0.25em 0.25em #555,
0.3em 0.3em #555,
0.35em 0.35em #555,
0.4em 0.4em #555,
0.45em 0.45em #555,
0.5em 0.5em #555
;
}
fiddle
.expandable-slide {
position: relative;
margin: 2em 2em 0 2em;
box-shadow: 20px 25px 0px 0px #333;
}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;
}
With the help of CSS Triangle tutorial, I learnt to create triangle shapes.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
I'm trying to add a border to the triangle but I was unable to do it.
what I achieved:
Expected:(trying something similar border with gray)
Check this JSFiddle
Stuck up no where to start this. I tried outline, but none worked(I know it won't work).
Thanks for taking time to read my question.
Any help is appreciated.
Note: I'm trying this in CSS instead of using images.
When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options.
Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect.
.arrow-down {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}
<div class="arrow-down"></div>
.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}
Option 2: Rotating the element (which has the border hack to produce the triangle) and then adding a box-shadow to it.
.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
-ms-transform: rotate(225deg); /* IE 9 */
-webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(225deg);
transform: rotate(225deg);
box-shadow: 0px -3px 0px -1px #444;
}
<div class="arrow-down"></div>
.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
transform: rotate(225deg); /* browser prefixes added in snippet */
box-shadow: 0px -3px 0px -1px #444;
}
Tested in Chrome v24 and Safari v5.1.7. Should work in other CSS3 compatible browsers also.
The following options do not directly answer the question as it doesn't do a border within border but are others way of producing an arrow/triangle with a border.
Option 3: Using linear-gradients on an element, rotating it to produce the triangle and then adding a border to it using the normal border property.
.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
<div class="arrow-down"></div>
.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
transform: rotate(-45deg);
backface-visibility:hidden;
}
Option 4: Using a rotated pseudo-element (with background as the color of the triangle) to produce the triangle and then adding a normal border to it. The parent element's overflow is set to hidden and the pseudo-element is positioned appropriately so as to display only half of it (creating the illusion of a triangle).
.arrow-down {
position: relative;
height: 50px;
width: 50px;
overflow: hidden;
}
.arrow-down:before {
position: absolute;
content: '';
top: -webkit-calc(100% * -1.414 / 2);
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="arrow-down"></div>
.arrow-down:before {
position: absolute;
content: '';
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
transform: rotate(-45deg);
}
Try adding these lines to your CSS:
.arrow-down:before {
content: "";
display: block;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-top: 26px solid #0f0;
position: relative;
left: -26px;
top: -20px;
z-index: -1;
}
This will draw a 3px green border.
Check the result here: jsfiddle
Demo: http://jsfiddle.net/3fFM7/
.arrow {
border-bottom: 60px solid transparent;
border-left: 60px solid black;
border-top: 60px solid transparent;
height: 0;
margin-left: 50px;
width: 0;
behavior:url(-ms-transform.htc);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.arrow > div {
border-bottom: 59px solid transparent;
border-left: 59px solid red;
border-top: 59px solid transparent;
left: -60px;
position: relative;
top: -63px;
width: 0;
}
<div class="arrow"><div></div></div>
Play with transform rotate :)
Or:
DEMO: http://jsfiddle.net/tKY25/1/
<div class="triangle-with-shadow"></div>
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
transform: rotate(180deg);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: 0px -5px 0 0px rgba(0,0,0,100);
}
I'm using the following code for pure css speech bubble but however i still can not add border to the whole bubble include the arrow at down side
HTML
<div class="bubble">Welcome</div>
CSS Code
.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}
Results
if i added border code border:2px solid #493A34; at class .bubble
Results
Problem
How to add the border to the arrow as well ? ~ any idea
EDIT: Here is the fiddle link with box-shadow applied.
You can make a slightly larger brown arrow with the :after psudo-element, and position it behind the smaller green arrow (made with :before), and down 2px to create a border effect.
here's the fiddle: http://jsfiddle.net/rhGCb/
And the css:
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
A bit of a trick, but you can add a box-shadow that behaves as a border (meaning, blur is set to 0):
.speech-bubble{
/* ... */
/* 2px = border-width #333 = border-color */
-webkit-box-shadow:0 0 0 2px #333;
box-shadow:0 0 0 2px #333;
}
I'm using PIE for shadows, radius borders and gradients but none of these are working in IE8.
Here is an example of the code I'm using for radius and shadow.
.conflict-suggestion-body-left{
border-right:2px solid #FDFDFD;
border-bottom:2px solid #FDFDFD;
border-top:1px solid #B8B8B8;
float: left;
width: 49%;
margin-left:1px;
-moz-box-shadow: 1px 1px 2px #000;
-webkit-box-shadow: 1px 1px 2px #000;
box-shadow: 1px 1px 2px #000;
border-radius:0 0 2px 2px;
behavior: url(PIE.htc);
}
Here is an example of the code I'm using for the gradient.
.yui3-widget-hd {
background: #C9D2DD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8DA', endColorstr='#B6CAD5');
background: -webkit-gradient(linear, left top, left bottom, from(#D8D8DA), to(#B6CAD5));
background: -moz-linear-gradient(0% 100% 90deg, #B6CAD5 35%, #D8D8DA 83%, white 100%) repeat scroll 0 0 transparent;
border: 1px solid #F3FAFE;
border-radius: 0.435em 0.435em 0 0;
behavior: url(PIE.htc);
height: 33px;
margin: 0;
width: 97%;
cursor: default;
}
Thanks in advance for your assistance.
You should specify the behavior url as absolute path:
http://css3pie.com/documentation/known-issues/#relative-paths
Maybe this solves your problem.
I think its your url problem.. try this one
behavior: url(//Yoursite.com/path/to/PIE.htc);