I have this simple table where if I click on a column - I need to make the whole chosen column ( from top to buttom ) as selected.
I don't have a problem with colors or html , but I do have a problem with the box-shadow css property.
This is how it should look :
Please notice "right-shadow" and "left-shadow" (bottom- I don't care)
But When I tried to make it ( JSBIN SAMPLE) via JQ :
$("#tblPlan td:nth-child(2)").addClass('shadow')
Where :
.shadow
{
box-shadow:0px 0px 10px black;
}
It applies it to all borders ( As it should obviously ) (including inside ):
Question
How can I achieve to a solution where only left and right ( bottom I don't care) - will be shadowed ?
jsbin
I updated the jsFiddle to use a inset-box-shadow with :before and :after elements, as shown in this great solution.
I think it's the best looking css-only solution for your problem, most other hacks have very round shadows, which looks odd.
Try something like this:
Your css class:
.shadow
{
box-shadow: 10px 0px 10px -5px black, -10px 0px 10px -5px black;
}
Giving a negative value in the fourth paramenter (-5px) you indicate the shadow spread.
You can see something similar in this answer: How can I add a box-shadow on one side of an element?
You may use pseudo element and relative/absolute position to draw shadow and bg colors: http://jsbin.com/manacigi/17/edit
Updated css:
#tblPlan
{
table-layout: fixed;
width:100%;
border-collapse: collapse;
border:solid 1px lightgrey;
position:relative;
overflow:hidden;
}
#tblPlan tr:first-child td+td
{
white-space: nowrap;
}
#tblPlan td:first-child
{
padding-left:20px;
}
#tblPlan td
{border:solid 1px lightgrey;
padding:15px 5px 15px 5px;
}
#tblPlan td+ td
{
text-align: center;
}
.shadow
{
box-shadow:inset 0 0 0 100px #5FCBE5;
position:relative;
}
.shadow:before,
.shadow:after {
content:'';
position:absolute;
height:100%;
top:0;
bottom:0;
width:1px;
box-shadow:-2px 0 2px;
}
.shadow:before {
left:0;
}
.shadow:after {
right:0;
box-shadow:2px 0 2px;
}
Related
I have a donut pie chart progress bar.
I want to give them an inner border, I've tried
.pie{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:70px;
height:70px;
border:2px solid black;
border-radius:50%;
}
I want my pie chart to look like this :
I keep getting this as my result :
Here is my Fiddle.
It's not perfect but you can play with the top, left, width, bottom values, just add:
.easyPieChart *::before {
border: 1px solid black;
border-radius: 50%;
bottom: 9px;
content: " ";
display: block;
left: 8px;
position: absolute;
top: 10px;
width: 83%;
z-index: 99;
}
http://jsfiddle.net/gu3aL84e/6/
The problem with your code is that easyPieChart is offseted with the border, since the chart is drawn using a canvas.
You can however use box-shadow instead, replace the border line with:
box-shadow: inset 0 0 0 11px black;
-moz-box-shadow: inset 0 0 0 11px black;
-webkit-box-shadow: inset 0 0 0 11px black;
That should do the trick for you.
By the way, the CSS width and height are being overridden to 110,110 and not 70,70
EDIT:
Here is the working code for the inner border WITHOUT the outer hardly seen outer border:
HTML:
<div class="pie" data-percent="90" >
<span>6</span>
</div>
CSS:
.pie {
box-sizing:border-box;
box-shadow: inset 0px 0px 0 10px black;
border-radius:50%;
}
.pie canvas {
position: absolute;
top: -1px;
left: -1px;
width: 110px;
height: 110px;
}
JS:
$('.pie').easyPieChart({
barColor: '#62ae41',
scaleColor: false,
lineWidth: 10,
trackWidth: 10,
animate: false,
lineCap: 'square',
size: 110
});
$('.pie').css('width', '108px');
$('.pie').css('height', '108px');
$('.pie').css('line-height', '108px');
and voila, the pie chart of dreams.
all in one jsfiddle
Explanation:
For the most part, this is the same as your fiddle, what changed was:
the size of pie chart is added to the options
the canvas is shifted to hide the outer border,
the original div size is decreased so all the shadow-box sets inside the generated canvas.
And that's it.
PS: I hate it when I have to change the style of generated code, but I HAD TO play with the generated canvas
link to jsFiddle: http://jsfiddle.net/jchjuckp/
imgur clarification: http://i.imgur.com/2FpBUof.png
I created in JavaScript a 10x10 grid (div boxes), and each box has 5px margin. I expected a perfect square to come out, but for some reason, the distance between each Y-axis box is 13 pixels instead of 10 px (because 5px margin + 5px margin = 10px).
Some CSS code snippet:
.sketchbox {
width:20px;
height:20px;
background-color:white;
border: 1px solid black;
display:inline-block;
margin:5px;
}
br {
line-height: 0px;
margin:0px;
padding:0px;
}
I suspect it has something to do with the line break im using, but every CSS I do to try to change line break to 0px has had no effect.
Can anyone help?
Thanks
Change the vertical-align property of the inline-block element. In this case, .sketchbox.
You could try vertical-align: top.
Updated Example
.sketchbox {
width: 20px;
height: 20px;
background-color: white;
border: 1px solid black;
display: inline-block;
vertical-align: top;
margin: 5px;
}
When the value is baseline (the default), there is a reserved vertical space for letters such as j, q, y.
When I Click a button I want to get redirected to a page. The problem is...if I use the normal sintax , the button works fine, but If I apply some css to id by ussing # and .(classes) ,the button it`s not working any more ?! How can I keep my css and functionality at the same time ?!
This is my code:
<body>
<input id="buttonrain" class="classname" type="button" onClick="window.location.href='rain.html'" value="Rain" />
<!--or Rain still not working-->
</body>
CSS FILE
html {
min-width: 100%;
min-height: 100%;
}
body{
width: 1024px;
height:600px;
background:white;
margin:0px;
padding:0px 0px;
display:block;
overflow:hidden;
}
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0ea3c), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #f0ea3c 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0ea3c', endColorstr='#dfdfdf');
background-color:#f0ea3c;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#0f000f;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:18px 9px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
position:relative;
bottom:250px;
}.classname:active {
position:relative;
top:1px;
}
#buttonrain{
left:80px;
}
Observe:
.classname {
position:relative;
bottom:250px;
}
.classname:active {
position:relative;
top:1px;
}
I have pulled this from the code you supplied. When I tested this, I noticed the button moved way out of the way when I clicked my mouse button down. This makes it as if I didn't click on the button. When I release my mouse the the HTML button returns, but it won't receive the onClick event. When I removed that crazy positioning change, it worked just fine. Try that.
Something you could try would be to use a form like this:
<form action='http://www.page.com/index.html' method='post'>
<input type='submit' name='button' value='Go!'>
</form>
I am new to this site so please excuse my lack of skills with posting :)
I`ve removed the code bellow, (.active problem property) and it works fine (thanks to musicin3d)
.classname:active {
position:relative;
top:1px;
}
I have many divs in an html page. I need to give these divs a drop shadow effect on mouseover using jQuery/Javascript. I can get it work if the drop shadow is to be applied initially but I am not able to get it work at the run time.
The divs which needs to have shadow applied has a common class. In the fiddle it is test.
I have created a fiddle
http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/
It should work on IE8 and above and so I guess CSS3 can be used.
use this css for the shadow effect (covers most browsers):
.classWithShadow{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
use the following jquery:
$(".yourDiv").hover(function()
{
$(this).toggleClass('classWithShadow');
});
Complete code here: http://jsfiddle.net/ZEuVE/3/
EDIT: sorry , I editted your initial fiddle instead of making a new one. But it works ^^ :)
CSS3 shadow is not supported by IE8
For your Above IE8 and other browsers
$("div").hover(function() {
$(this).css(
"box-shadow", "10px 10px 5px #888"
);
}, function() {
$(this).css(
"box-shadow", "0px 0px 0px #888"
);
});
$("div").mouseover(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
OR use mouseenter event
$("div").mouseenter(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
There is little point in using jQuery to add simple hover effects when the CSS :hover psuedo-class works perfectly on its own.
The only problem you have is that IE8 does not support native CSS drop-shdows (box-shadow).
To overcome this you have two choices;
1) Attempt to coax microsoft's proprietary DropShadow and Blur filters into producing something resembling a drop-shadow. It's possible, as this guide shows, but in my experience using MS's filters is your first step on the path to a life filled with misery and pain. Filters affect other, seemingly unrelated styles and elements on the same page in ways that it is impossible to foretell. All you can really do is try it and see.
2) use an image. This is pretty bad, and is tricky to get the image right if the divs are all different sizes. But if you do it in an IE8 only style sheet and know the dimensions beforehand, it can work well.
This Is Universal Answer that works regardless of Codebehind Language
goes in the source aspx. use & CSS
<style>
.img {
border:2px solid #fff;
box-shadow: 1px 1px .5px #ccc;
-moz-box-shadow: 1px 1px .5px #ccc;
-webkit-box-shadow: 1px 1px .5px #ccc;
float:left;
width:auto;
border:solid;
border-width:.25px;
padding:15px;
margin-right:20px;
margin-bottom:20px;
margin-top:20px;
border-radius:5px;
text-align:center;
}
.img:hover {
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}
</style>
<MyShadowdivOnMousOver class="img">
<MyShadowdivOnMousOver >
I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?
One option is to kind of fake it with a very small inset box shadow:
box-shadow: inset 0px 0px 5px 0px #ffff66;
Click here for an example.
Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.
Try using this solution http://css-tricks.com/7423-transparent-borders-with-background-clip/ , it's not compatibile with IE, versions < 9, however.
You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas
put the image in the background of a div and set a inset box-shadow.
#myDiv{
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}
With the last pixel-parameter you can control the width of the inset-border
#jason; try this solution its also work in IE8 & above http://jsfiddle.net/sandeep/Ksr86/2/
CSS:
body{background:#000}
#test {
background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
width: 350px;
height: 350px;
position:relative;
}
#test:after {
position:absolute;
background:rgba(0,0,0,0.5);
content:"";
display:block;
top:2px;
left:2px;
right:2px;
bottom:2px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}