PIE.htc not working with YUI3 in IE8 - css

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);

Related

Adding a double border to a linear-gradient-filled-div colors the border too

I have a div that I want to be gradient filled. I also want to add a double border to the div but I do NOT want it to have the color gradient of the div.
I have my code here to show the problem:
http://jsfiddle.net/753rxozh/1/
.colors {
width: 100px;
border: 10px double black;
/* box-shadow:inset 0 0 0 10px black; */
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange);
}
<div class="colors"></div>
I tried messing around with box-shadow, but couldn't figure out how to make that a double border.
With the code above this is what I get:
I would like to get the border to not have that "reversed color" or any color at all. Between the 2 borders should just be white.
You can manipulate box-shadow property... you can have more than one!
.colors {
width: 100px;
padding: 10px;
height: 50px;
background: linear-gradient(white, orange);
box-shadow:
inset 0 0 0 2px black,
inset 0 0 0 8px white,
inset 0 0 0 10px black;
}
<div class="colors"></div>
You can use an outline with a black border and box shadow
.colors {
outline: 3px solid white;
width: 100px;
border: 2px solid black;
box-shadow: 0 0 0 6px black;
padding: 10px;
height: 50px;
margin: 0 auto;
background: linear-gradient( #fff, orange);
}
<div class="colors"></div>
You can simply adjust the background-clip of the gradient and you can keep the transparency:
.colors {
width: 100px;
border: 10px double black;
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>
Another idea is to consider outline-offset and you can still keep the transparency:
.colors {
width: 100px;
border: 2px solid black;
outline:2px solid black;
outline-offset:4px;
padding: 10px;
height: 50px;
margin:10px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>

Can / should I add the box-shadow's size to the element's total size?

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>

box-shadow on css triangle not working

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

Drawing a circle with inner box shadow

I want to draw few circle using inner box-shadow.
Here is my JsFiddle
css
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
}
How can i apply inner box-shadow in the circle
Specify inset for the inner shadow, the x and y displacement, the blurring and the color. Example:
box-shadow: inset 3px 3px 4px #000;
Demo: http://jsfiddle.net/uJzgs/2/
For compatibility:
-webkit-box-shadow: inset 3px 3px 4px #000;
-moz-box-shadow: inset 3px 3px 4px #000;
box-shadow: inset 3px 3px 4px #000;
Why not use a radial-gradient
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
background: radial-gradient(#FFF 40%, #000);
}
Example http://jsfiddle.net/za7b8/1

Box shadow using CSS

I am trying to create a table like the following image:
I have also created table like the above except the style as it is above. my table.
This is what is my CSS:
.table thead th {
vertical-align: middle;
background-color: #FFFFFF;
border-bottom: thin;
border-top: thick;
border-bottom-width: 4px;
width:300px;
height:30px;
background-color:white;
box-shadow: 2px 2px 5px grey;
border-bottom : thin;
border-top:thick;
}
.table th {
font-weight: bold;
cursor: pointer
width:100%;
height:40px;
background-color:#FFFFFF;
box-shadow: 0 0 5px grey;
border-bottom: thin;
border-top:thick;
vertical-align: middle;
border: 1px solid #DDD
}
.table th,.table td {
height: 20px;
max-width: 250px;
padding: 1px 5px 2px 10px;
overflow: hidden;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
border: 1px solid #DDD
}
The result is not what I am looking for. I am not able to give you the html table code since it is generated during run time using backgrid.js with backbone.marionette.js
UPDATE :
this is the CSS
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
but still the line is visible between td, I want to show only the horizontal lines not the vertical one.
How to do that?
Please help me to get this done.
Add before the table the following element:
<div id="fade"></div>
And in the CSS file:
#fade {
height: 22px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,255)), color-stop(50%,rgba(247,247,247,247)), color-stop(51%,rgba(245,245,245,245)), color-stop(100%,rgba(243,243,243,243)));
background: -webkit-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#00ffffff', EndColorStr='#00f3f3f3', GradientType=1);
}
(change to the colors you want etc)

Resources