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/
Related
I am trying to make my scrollbar change color,gradient like, when scrolling. Now it is fixed to a gradient color no matter if it is on top or bottom of the page.
Can this happen? Chnge color on scroll?
EDIT:
/* width */
::-webkit-scrollbar {
width: 19px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(0,0,0,1);
border-color:black;
border-radius:20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-image: linear-gradient(to bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: scroll-gradient 5s ease infinite;
background-size: 100% 100%;
border-radius:20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7333B1;
}
body {
height:100vw;
}
<body>
<h1 style="height:200px">hello</h1>
</body>
As you can see the bar is static gradient. Is there any way to make the scrolbarr gradient change when scrolling?
I've edited your code a bit, I hope it's what you were looking for.
/* width */
body::-webkit-scrollbar {
width: 19px;
}
/* Added here the linear gradient. From 0% to 100%. Use rgba for better results */
body::-webkit-scrollbar-track {
background: linear-gradient(0deg, #ee7752, #e73c7e 0%, #23a6d5, #23d5ab 100%);
border-color: black;
border-radius: 20px;
}
/* Added background: transparent */
body::-webkit-scrollbar-thumb {
background: transparent;
animation: scroll-gradient 5s ease infinite;
background-size: 100% 100%;
border-radius: 20px;
/* box shadow. If we set it to an enormous value with zero blur, it will cover all space around the scrollbar handle */
box-shadow: 0px 0px 0px 100000vh black;
}
/* You need this? I think no. */
/*::-webkit-scrollbar-thumb:hover {
background: #7333B1;
}*/
/*Changed size to view the changes*/
body {
height: 150vw;
}
<body>
<h1 style="height:200px">hello</h1>
</body>
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>
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
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;
}
I have a column that is aligned on the right hand side of the page. The column must span the entire height of the page, thus my reasoning behind making it fixed. There will be items within the column that should not be fixed. No matter what I play with the items continue the scroll with the page.
Does anyone have a way to either make the child div static within the parent that is fixed, or a way to make a column span the entire height of the page without using a fixed positioning?
Here is the CSS:
.rightCol{
width: 28px;
position: fixed;
bottom: 0px;
top: 0px;
z-index: -1;
margin-left: 969px;
}
.rightColItem{
margin-top: 95px;
margin-left: 10px;
position: absolute;
}
And the HTML:
<div class="rightCol">
<div class="rightColItem">
I want this to be static and not fixed
</div>
</div>
And here is a link to a fiddle -->
http://jsfiddle.net/7hmKy/
Any help is greatly appreciated!
Edit 1: The right aligned bar is inside a container div of 1000px.
An easier method—with less markup too—is to use CSS3 gradients for the background of your page. You can also easily use an image fallback to support old browsers:
body {
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
background: linear-gradient(right, #fa8072 200px, transparent 200px);
}
.sidebar {
width: 200px;
float: right;
}
Demo (I used Sass and Compass because they make CSS3 gradients much easier to keep updated.)
EDIT:
Based on your comment, I've created a new example using a centered body that is 1000px wide (with some finagling you could use a div) and changed the gradients to replicate a border:
body {
height: 100%;
min-height: 2000px;
width: 1000px;
margin: 0 auto;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}
Demo