How to create an inner border of a donut pie chart? - javascript

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

Related

How to make a website to occupy the entire element?

I will specify. I have this rather simple website, on which I have three button/links which I made to diplay (with a little magic of JS) within one of it's elements (section with id "content"). It works fine and all but (and it's a big one) for some reason it only display it in a tiny window in a upper-left corner with like a scroll down bar and I can't make it to occupy the entire 'section'.
JS I've got is:
function load_projects() {
document.getElementById("content").innerHTML='<object type="text/html" data="projects.html" ></object>';
}
and an element :
<section class="box sect shadow" id="content">
</section>
css for it:
.box {
background-color: #D3D3D3;
width: 1000px;
height: 600px;
margin-right: 20%;
margin-left: 20%;
margin-top: 20px;
border-radius: 20px;
}
.sect {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.shadow {
-webkit-box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
-moz-box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
box-shadow: 10px 11px 31px -2px rgba(120,124,125,0.61);
}
So to summerise: I have a 'nav' element with three button/links that are being displayed within 'section' element, but instesd of occupying the whole surface of 'section' links are being displayed in a tiny, scroll-down window.
what am I doing wrong? How can I fix it?
You've not specified any styles for the object that you're adding, so it doesn't know to fill the container element.
Add the following css...
#content object {
height: 100%;
width: 100%;
}

HTML/CSS: 10x10 div boxes with equal margin, but height is longer than width for some reason

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.

How to soften/feather image edges using box-shadow in slideshow?

I have an image slider. In order to have a shoother view I want to show image edges feathered when rolling.
I have tried to use box-shadow property but it did not help me. It is possible to feather image edges using an image editor. But I do not want that.
I have added an additional <div class="insetShadow"> next to <img>.
<div class="item">
<img src="images/01.jpg" alt="" />
<div class="insetShadow"></div>
</div>
.insetShadow
{
width: 100%;
height: 100%;
top:0;
left:0;
position:relative;
box-shadow: inset 0px 0px 13px 5px #fff;
z-index: 20;
}
.carousel img
{
width: auto;
height: 300px;
max-height: 300px;
margin: 0 auto;
position: relative;
z-index: 19;
}
box-shadow is not applicable to img element when inset feature enabled.
In the up-left picture you may see the actual view and in the bottom-right desired view.
Is there any other css solution for that or any jQuery plugin?
Try using a spread radius of at least half of the blur radius:
box-shadow: inset 0 0 12px 6px #fff;
Demo
You can use this generator to mess up with the box-shadow properly. It's just CSS and attach it to the slideshow element with jQuery.
Check this and work around!

Add box-shadow to table column (top to bottom)?

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

How to draw a "smart" border in Javascript / CSS?

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
}

Categories