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);
}
Related
I have the following pure html and css implementation of a radio slider. What is a good way of creating a javascript event based on the toggle function? I can see a few approaches to poll the component and get it's position, however, I am not sure how to get the change to trigger a callback etc. Thanks.
html,
body,
div,
span,
label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
body {
color: #404040;
font-family: 'Lucida Grande', Verdana, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
background: #3b3f46;
}
.container {
margin: 0 auto;
padding: 90px 0;
width: 400px;
background-color: false;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, transparent));
background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -ms-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
}
.switch {
position: relative;
height: 26px;
width: 120px;
margin: 20px auto;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-ms-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: color, text-shadow;
-moz-transition-property: color, text-shadow;
-ms-transition-property: color, text-shadow;
-o-transition-property: color, text-shadow;
transition-property: color, text-shadow;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
/* Note: left: 50%; doesn't transition in WebKit */
}
.switch-selection {
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
display: block;
width: 58px;
height: 22px;
border-radius: 3px;
background-color: #65bd63;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63));
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(top, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-ms-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<div class="container">
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">ON</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">OFF</label>
<span class="switch-selection"></span>
</div>
</div>
You can simply use
if (document.getElementById('week').checked) {
//task to perform when "ON"
}
else
{
//task to perform when "OFF"
}
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);
}
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;
}
.button1{
background: #E68A00 url(wooden.jpg) repeat-x;
border: 2px solid #eee;
height: 28px;
width: 115px;
margin: 50px 0 0 50px;
padding: 0 0 0 7px;
overflow: hidden;
display: block;
text-decoration:none;
font-family: 'Sacramento', cursive;
color : white;
font-size: 30px;
/*Rounded Corners*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
pg.button1{
position:absolute;
right:0px;
top:100px;
}
pg:hover {
width: 200px;
}
<pg <a class = "button1" href="http://www.google.com">Small $14 </a> </pg>## Heading ##
The above tag was a link until i introduced the tag pg which is meant to position the link on the screen. The reason is that i still want to use the class with other objects ! so i don't have to duplicate my code! i have created tags like p1 p2 p3 p4 to use with that same class
It actually positions it but its no longer a link ! Why is that ? and how do i get this working again ?
Rather than invent new tags, just use multiple classes. In this case, depending on what you're actually trying to do, you can do this:
<a class="button1 pg" href="...">Small $14</a>
Or this:
<div class="pg"><a class="button1" href="...">Small $14</a></div>