CSS simple doughnut chart - javascript

I need to build a very simple doughnut chart ( 2 values, no animations, pure css)
didn't found anything simple in google ( everything is using animation or many values)
Please help me :)


Demo
CSS
.value {
height:100%;
width:100%;
border-radius:100%;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
position:absolute;
background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}
The trick which makes it work is also it's limitation.... Using linear-gradient from 0% to 50% it shows #3498db color and then from 50% to 100% it shows #FFFFFF color... To set this dynamically with a perfect look will be a lot difficult...
Hope it helps..!!


I'm not sure if you can make one using pure CSS, but check out highcharts. Theirs is pretty simple, and you can do it with only two values (don't be intimidated by the example).

Related

replace a cube by a sphere in three.js with an input

I have to replace the cube by a sphere with the input forme but if i add a function in the javascipt the cube disappears.
What do I have to do if I want to change the cube's dimensions?
I don't know how to link the function modifie with the three numeric inputs (longueur, largeur, hauteur) because as I've said before if I add on function, the cube disappears. The functions are wrong?
See JSFiddle
function modifie(){
var longueur ,
var largeur,
var profondeur.
longueur =document.getElementById("longueur").value
largeur =document.getElementById("largeur").value
profondeur =document.getElementById ("profondeur").value
}

I would consider the new possibilities of CSS3. FIDDLE
$("div").addClass("ball")
div {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
transition: all 5s ease;
}
div.ball {
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Alphabets or Text filling effect in jquery

I am developing a site for my client and he asked me to have the same below site kind a effect for his website
http://www.big.dk/
here you can see text is filling up and after it finish filling all the letters, homepage loads up. any idea how can I copy the same kind a effect or any code you can share. I try to rip the code but I think the site is using swf file not jquery as I couldn't rip it successfully.

To achieve the effect mentioned, I followed the following approach.
Create an image with required text on it (StackOverflow for example).
Make the text on this image transparent. (I did it in Microsoft Powerpoint).
This is how the image looks
Note that the text area is transparent. Download this image and open it in any image viewer to verify.
Then, Create a gradient. (You can use this for simplicity)
Combining the above resources, here is the fiddle.
#color {
position: absolute;
width: 800px;
height: 130px;
background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF));
/* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ie10+ */
background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* w3c */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1);
/* ie6-9 */
}
#text {
position: absolute;
width: 800px;
height: 130px;
background: url('http://i.stack.imgur.com/plKV4.png');
background-size: 100% 100%;
}
#slider {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: gray;
animation: slide forwards 5s linear;
}
#keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
<div id="color">
<div id="slider"></div>
<div id="text"></div>
</div>
I have used keyframes animation to fill the color.
It can be easily replaced by jQuery

Rotate/Spin a Sphere on a web page

I currently have a sphere shape but, I'm trying to think of a way on how to rotate it in a circle on my website this is my current code:
<style>
b.ball {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<style>
<b class="ball"></b>
The code above puts a shape on the page.
How Would I rotate this sphere so it spins around? Not around the whole page but just in it's own area, not the entire page though. I've Googled it and I have not anything that particularly addresses this question that I've seen yet.

You can use css-animations:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
to animate a transform:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
Just add in:
.ball {
animation: spin 3s linear infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
You'll need to use prefixes though, which I've included in the demo: http://jsfiddle.net/99bds/

how replace select2 default spinner?

How replace the select2 spinner.gif?
I have tried with the next css:
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('custom-spinner.gif') no-repeat 100% !important;
background: #fff url('custom-spinner.gif') no-repeat 100% !important;
}
This is a screenshot:
I don't achieve replace the default select2-spinner.gif with spinner1-gif
This is the css https://github.com/ivaynberg/select2/blob/master/select2.css

Here's every instance of 'spinner.gif' in select2.css, version 3.3.1. Copy this, change each instance of the file path, and place it in a stylesheet that loads after select2.css.
.select2-search input.select2-active {
background: #fff url('select2-spinner.gif') no-repeat 100%;
background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}
.select2-more-results.select2-active {
background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('select2-spinner.gif') no-repeat 100% !important;
}

how to set button gradient color for textbox?

I want to design a textbox and textarea with some gradients effects inside them look like the above img.
I find a way to set it on button.
But i was not able to fix it to a textarea.

You can check this Ultimate Gradient Generator or Css Portals. This will fullfill your need.
Hence you you have not inserted you css and html. We can do this far.
If you need code use the following
.gradient_effect{
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
.text_box-border:double 5px #000000;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
-moz-box-shadow: 10px 10px 5px #8c898c;
-webkit-box-shadow: 10px 10px 5px #8c898c;
box-shadow: 10px 10px 5px #8c898c;
}

textarea {
background: -webkit-linear-gradient(red, black);
background: -moz-linear-gradient(top, red, black);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#000000');
}​
http://jsfiddle.net/EjFUd/
Edit: beat me to it!

​textarea {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -webkit-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -o-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -ms-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
}​
Exmpl - http://jsfiddle.net/VSpB8/
for more css3 generators - http://css3gen.com/gradient-generator/

Here try this : [note : adjust the color u want]
css:
#gradientTextarea {
background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / IE10+ /
background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
border:1px solid #f5f5f5;
}
html
<textarea id="gradientTextarea"></textarea>

#gradient {
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #ccc), color-stop(100%, #fff));
background: -moz-linear-gradient(top, #ccc, #fff);
}
with #grandient as the id of the input box
use this one to generate your gradient:
http://www.colorzilla.com/gradient-editor/

Categories