I am trying to create pulse effect with css box-shadow by using jquery. I tried following code but completely failed. What i am trying to achieve is a smooth pulse effect with box-shadow
The code that i tried is
html
<div class="one">
</div>
css
.one {
width: 100px;
height: 100px;
background: red;
-webkit-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.two {
width: 100px;
height: 100px;
background: red;
-webkit-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
}
jquery
$("div").setInterval(function() {
$(this).toggleClass(".two");
}, 1000);
fiddle http://jsfiddle.net/KXp4D/2/
Pure CSS Example JSFIDDLE
#-webkit-keyframes shadow {
0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
#-moz-keyframes shadow {
0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
#keyframes shadow {
0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
.one {
width: 100px;
height: 100px;
margin: 10px;
background: red;
box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.one:hover {
-webkit-animation: shadow 1s ease-in-out infinite;
-moz-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
setInterval() is not a jQuery function, but a simple JavaScript one.
To use it, you need to change your code to
setInterval(function() {
$("div").toggleClass("two");
}, 1000);
This will work, but like an on-off; to make it smooth, you can use CSS3 transition like this:
transition: all 1s ease;
Demo
Note that you won't need necessary javascript, this can be done in pure CSS3.
setInterval(function() {
var cl = $("div").hasClass('one') ? 'two' : 'one';
$("div").attr('class', cl);
}, 1000);
You cannot add setInterval to an object. Use it like
setInterval(function(){
// do stuff
}, 1000);
FIDDLE
NOTE: For that smooth transition I added CSS transition on box-shadow
In the Fiddle your setInterval method is not running correctly and the toggle doesn't have the correct args. Try this instead:
setInterval(function() {
$("div").toggleClass("one");
$("div").toggleClass("two");
}, 1000);
Here is the working DEMO http://jsfiddle.net/LKXLc/
setInterval(function() {
if( $("div").hasClass("one"))
{
$("div").removeClass("one").addClass("two");
}
else
{
$("div").removeClass("two").addClass("one");
}
}, 10);
You can do that with CSS
Demo
HTML Markup
Click Here
CSS
#keyframes msPulseEffect {
0% {
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
}
}
#msElem{
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
color:white;
background-color: #0078D7;
border-radius: 50%;
text-decoration: none;
animation: msPulseEffect 1s infinite;
}
Related
start_btn.onclick = () => {
info_box.classList.add("activeInfo");
};
.btn-12 {
align-items: center;
position: relative;
right: 30%;
bottom: 200px;
border: none;
box-shadow: none;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-12 span {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
display: block;
position: absolute;
width: 250px;
height: 40px;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
border-radius: 5px;
margin: 0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-12 span:nth-child(1) {
box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
<div id="start_btn">
<button class="btn-12"><span>ｲ𝐢𝐦𝐞 𝐟𝐨𝐫 𝐭𝐡𝐞 𝑔𝐚𝐦ҽ.</span><span>Click Me</span></button>
</div>
Above Code: not show button in the out put result
I rename the class from "btn-12" and "start_btn" to "start_btn1" and "btn-12" or "start_btn" and "btn-12l"
it's Working
Based on your example, you have some conflicting Styling. When position: relative; is removed, it works as expected.
Consider the following.
start_btn.onclick = () => {
console.log("Click Event");
info_box.classList.add("activeInfo");
};
.btn-12 {
align-items: center;
/*
position: relative;
*/
right: 30%;
bottom: 200px;
border: none;
box-shadow: none;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-12 span {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
display: block;
position: absolute;
width: 250px;
height: 40px;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
border-radius: 5px;
margin: 0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-12 span:nth-child(1) {
box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
<div id="start_btn">
<button class="btn-12"><span>ｲ𝐢𝐦𝐞 𝐟𝐨𝐫 𝐭𝐡𝐞 𝑔𝐚𝐦ҽ.</span><span>Click Me</span></button>
</div>
Fixed Above code
change to HTML:-
<div class ="start_btn">
<button class="btn-12"><span>ｲ𝐢𝐦𝐞 𝐟𝐨𝐫 𝐭𝐡𝐞 𝑔𝐚𝐦ҽ.</span><span>Click Me</span></button>
</div>
and CSS Like this:-
#start_btn.btn-12{
align-items: center;
....
}
add "#start_btn in the CSS
I am working on a page progress loader, I would like to animate the width throughout progress however I am not having any luck. Please see below, any help would be most appreciated.
https://jsfiddle.net/nbx9dwzL/
HTML
<div id="page-progress-bar-top"></div>
Javascript
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
CSS
#page-progress-bar-top{
position:absolute;
height:4px;
background:#12ADFD;
z-index:100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
}
#page-progress-bar-top.complete{
width:100%;
}
You have no initial width, and the default width for a <div> element is 100% (it's a block element).
To see the transition, you're looking to apply a width, of say 1px to start out with:
document.addEventListener("click", function() {
var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")
});
#page-progress-bar-top {
width: 1px;
position: absolute;
height: 4px;
background: #12ADFD;
z-index: 100;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
-moz-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
}
#page-progress-bar-top.complete {
width: 100%;
}
<div id="page-progress-bar-top"></div>
This can be seen working here.
I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EUR sign won't appear inside the field, I want to move this sign at the end of the input but for some reason, I can't do it. I don't want to remove class form-control. Any help?
My snippet:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 15px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 0px;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.
See updated fiddle.
.input-symbol-euro {
position: relative;
display: inline-block;
width: 50%;
}
.input-symbol-euro input {
padding-right: 15px;
width: 100%;
}
.input-symbol-euro:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto;
content: "€";
right: 20px;
}
.form-control {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>
How to create a smooth text input box shadow effect like on this website
Use the CSS3:
#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}
#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}
Try using Firebug or similar tool there.
You declare some initial "invisible" box shadow and its visible counterpart and declare some transition in addition:
.elem {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
This styling is extracted from that site.
EDIT: You wanted mouseover rather than focusing.
.element
{
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover
{
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>
Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}
Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}