I would like to remove the white space between the original border of the checkbox and the boxshadow, so that it looks at least compact.
float: right;
padding: 0px;
-ms-transform: scale(1.1);
-moz-transform: scale(1.01);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
margin-right: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px #dedede, 0px 1px 3px rgba(0,0,0,0.5);
What can I do ?
Best regards
Related
This might not make sense out of context, but I'm working on something where I would like there to be an inset box-shadow which transitions to a normal box-shadow. The transition works without the inset, but breaks with. Possible or not?
.foo{
height: 20rem;
width: 20rem;
box-shadow: inset 4px 0px 4px grey,
inset -4px 0px 4px grey;
background: cornsilk;
&:hover{
box-shadow: 1px 9px 4px 9px grey;
transition: box-shadow 1s;
}
}
https://codepen.io/bobam/pen/ZEWBeJp
The direct transition for the box-shadow inset to regular is not possible. But, there is one hack that can give a closer effect.
Consider the following css:
.foo {
width: 50px;
height: 50px;
border: 1px solid #aaa;
box-shadow: inset 0 0 10px #aaa;
animation: boxShadowOut 1s;
}
.foo:hover {
box-shadow: 0 0 10px #aaa;
animation: boxShadowIn 1s;
}
#keyframes boxShadowIn {
0% { box-shadow: inset 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: 0 0 10px #aaa; }
}
#keyframes boxShadowOut {
0% { box-shadow: 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: inset 0 0 10px #aaa; }
}
<div class="foo"></div>
You can do it with transition. You simply need to define all the shadows at once and play with the values to make them 0 when you don't need the shadow:
.foo {
height: 8rem;
width: 8rem;
margin:10px;
box-shadow:
inset 4px 0px 4px grey,
inset -4px 0px 4px grey,
0px 0px 0px 0px grey;
transition: box-shadow 1s;
background: cornsilk;
}
.foo:hover {
box-shadow:
inset 0px 0px 0px grey,
inset 0px 0px 0px grey,
1px 9px 4px 9px grey;
}
<div class="foo">
</div>
Let's say i have a button class
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
and whenever i click something(not the 'mat-cancel-color' button) i want this class to gain a glow effect which would fade away over .4s.
should i create a new class and then give that class the box-shadow(glow) property, then below transition-duration property and then the the box-shadow(no glow) property again? as such:
click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}
or does transition-duration only work when switching classes or does it also work when switching properties inside a class? if it as such, how should i go about it?
EDIT: mistook transition-delay with transition-duration.
What you are looking for is a CSS animation. Mainly because you don't want the default state with the glow, that's why transition won't work here.
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
.mat-cancel-color:hover {
animation-name: glow;
animation-duration: .4s;
}
.mat-cancel-color-trans {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
transition: all .4s ease;
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);
}
.mat-cancel-color-trans:hover {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
/* Standard syntax */
#keyframes glow {
0% {
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
}
<button class="mat-cancel-color">Button</button>
<button class="mat-cancel-color-trans">Button</button>
You could use some psudo classes like this:
:active:not(*element/class*) {...}
and then put the glow animation that you want within the brackets. :active is a psudo class that is only applied when the element named is clicked. :not() excludes the class listed in the parentheses. As long as you have the glow animation working fine, then this should work.
This is a snippet of my test code:
a:active:not(.mat-cancel-color) {...}
I want exactly matched button with gradient and Box-shadow.
I tried gradient css3 properties (box-shadow: 2px 3px 3px #333;) but couldn't meet the expected result. Can anyone Suggest me the proper way.
I'm not getting what you want but I'm trying according to your question.
You can use 2 color box-shadow and advance gradient use like this:-
.answer-btn {
color: #fff;
font-family: Arial, sans-serif;
min-width: 267px;
padding: 18px 0 19px;
text-align: center;
border: none;
border-bottom: inset 1px #2894cc;
border-color: -moz-use-text-color -moz-use-text-color rgba(38, 144, 202, 0.11);
background-color: #278abe;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9Ii0yNSUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0MWJlZTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjhhYmQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-radial-gradient(50% -25%, ellipse farthest-side, #41bee8, #268abd 100%);
background-image: -webkit-radial-gradient(50% -25%, ellipse farthest-side, #41bee8, #268abd 100%);
background-image: radial-gradient(ellipse farthest-side at 50% -25%, #41bee8, #268abd 100%);
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px;
border-radius: 5px !important;
-moz-box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
-webkit-box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
box-shadow: 0px 7px 0px 0px #1b6b9e, 0px 0px 10px 1px #b3b3b4;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
font-size: 25px;
font-size: 1.5625rem;
}
.answer-btn:active {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transform: translate(0px, 5px);
-ms-transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
transform: translate(0px, 5px);
}
https://jsfiddle.net/kant707/9zLLpLbg/
I would like simply an effect like is shown with the Sign in / register buttons on this website:
http://css-tricks.com/forums/entry/register
I've tried "Inspect Element" on this page but can't figure out how its being achieved.
i.e. hover over them and they change subtly. Click them and they appear to be "pressed in" for as long as you hold the mouse key down. Release mouse key and they pop back out.
Using a javascript solution at the moment but not very happy with it. Would prefer to leave javascript out. Far too much effort trying to get it to work in Chrome as well as IE.
I suppose you mean the active state. Fiddle.
.button, #rcp_submit {
display: inline-block;
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
font-family:'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
padding: 9px 16px;
line-height: 1.4;
position: relative;
top: -5px;
}
.button:hover, .button:focus, #rcp_submit:hover, #rcp_submit:focus {
color: white;
background: #3d57b4;
}
.button:active, #rcp_submit:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-webkit-transform: translate(3px, 3px);
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-o-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
Here the class and the example
<asp:DropDownList ID="dropDownListZenithYesNo"
CssClass="dropDownBox" runat="server"></asp:DropDownList>
And here the CSS class of that dropdownlist
.dropDownBox
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
And here how it looks nice when you not click to see elements
And this is how very bad it looks when you click to see elements
Testing with windows 7 firefox latest version
CSS CSS3 HTML dropdown list color style
Add the following css below your css
.dropDownBox option
{
font-size: 13px;
color: #3b3b3b;
padding: 5px;
background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f0f0f0),
to(#d6d6d6));
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999999;
-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}
But test your page in multiple browsers because it may have different results. Infact i have different results.
You must be inheriting from a default style. I would suggest specifying the color for your options:
.dropDownBox option{
font-size:1.2em;
background-color:#FF0 !important;
display:block;
}
Here is the fiddle