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 disabled the search box on IE, because IE kept centering it over the navigation.
It works in Chrome, I'm not sure about opera (and I'm not sure if I care) but it won't work in Firefox. The ease-out timing works in Firefox, but nothing else really works.
I've tried other things to work around the issue, but every time I try something different, the search box's positioning gets thrown off.
If you look at it in Firefox, it looks fine-- until you click on it to search. http://kissoff.weebly.com/ You can see what the search box is supposed to do if you look at it and click on it in Chrome.
I'm sure the positioning is off, I'm not sure (I'm new to css). Any help is appreciated.
#search {}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search input[type="text"]:focus {
width: 200px;
}
you were forgetting to edit margin-left.
http://jsfiddle.net/xeemez/nZBNm/
#search{
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 15px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search:focus {
width: 200px;
margin-left: 200px;
}
http://jsfiddle.net/xeemez/nZBNm/
I have a CSS button that looks like this:
that is formed from this CSS code:
.Button{
color: #333;
border: 1px solid orange;
border-bottom: 5px solid orange;
background-color: #fff;
font-size: 12px;
margin: 5px;
padding: 1px 7px 1px 7px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 0px;
}
.Button:hover{
cursor: hand;
cursor: pointer;
}
.Button:active{
border-bottom: 3px solid #999;
top: 3px;
}
This is what I am trying to make it look like (but I can't figure out how to do it):
Please pardon my drawing skills. I just want to extend the orange border on the left so it looks 3D. Thanks!
Here is a fiddle for a 3d button I have used in places. It is animated with css to have an active and hover state
fiddle
.btn-big {
background-color: #474EDD;
background-image: -webkit-linear-gradient(283deg, rgba(255, 255, 255, 0.1) 50%, transparent 55%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), transparent);
border-radius: 6px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 4px 0 0 #333797,0 4px 0 1px rgba(0, 0, 0, 0.4),0 4px 4px 1px rgba(0, 0, 0, 0.5);
color: white !important;
display: block;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 61px;
letter-spacing: -1px;
line-height: 61px;
margin: 50px;
position: relative;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
text-decoration: none !important;
-webkit-transition: all .2s linear;
width: 186px;
}
.btn-big:active {
background-color: #474EDD;
top: 4px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 0 0 0 #333797,0 0 0 1px rgba(0, 0, 0, 0.4),0 0px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-big:hover {
background-color: #5158E0;
poisiton: relative;
top: -1px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 5px 0 0 #333797,0 5px 0 1px rgba(0, 0, 0, 0.4),0 5px 8px 1px rgba(0, 0, 0, 0.5);
}
I hope that helps!
Would you like to try this way:
http://cssdeck.com/labs/fancy-3d-button
a {
position: relative;
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
position: relative;
top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
Push me!
This is close, but not quite perfect.
Using box-shadow & border:
.Button {
color: #333;
box-shadow: -3px 3px orange, -2px 2px orange, -1px 1px orange;
border: 1px solid orange;
}
http://jsfiddle.net/grYTZ/3/
Try This One you can resize it of course
<html>
<head>
<style>
.button {
background: black;
border-style: outset;
border-width: 4px;
border-color: white;
border-radius: 8px;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
min-width:500px;
min-height: 100px;
}
.button:hover{
border-style: outset;
border-width: 2px;
box-shadow: none;
background: black;
</style>
</head>
<body>
Link Button
</body>
</html>
You can do this using this example from the perspective page on MDN. You can change the view by setting the perspective-origin in .button-container. My example is also animated so that clicking on the button will show motion. You can change that using the transition function in .side.
JSFiddle
<div class="container">
<div class="button-container">
<div class="bottom side"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="top side"></div>
<button class="button side" type="button">Click Me</button>
</div>
</div>
.button-container {
--dimension: 100px;
--adjustment: 0px;
--red-accent: #B11807;
--red-dark: #710F05;
--red: #E31D09;
height: 100%;
perspective: 700px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
width: 100%;
}
.button-container:active {
--adjustment: 100px;
}
.side {
border: none;
box-sizing: border-box;
display: block;
height: calc(var(--dimension) - var(--adjustment));
position: absolute;
transition: 0.4s ease-out;
width: calc(var(--dimension) - var(--adjustment));
}
.bottom {
background: var(--red-accent);
transform: rotateX(-90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
width: var(--dimension);
}
.button {
background-color: var(--red);
color: #FFFFFF;
height: var(--dimension);
transform: translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.left {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(-90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
}
.right {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
}
.top {
background: var(--red-accent);
transform: rotateX(90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.container {
box-sizing: border-box;
padding: 100px;
height: 300px;
width: 300px;
}
I am working on Popup box, I have got a page wherein I click on a button it popups a box. Ths problem is the popup is not in the center of the screen. I have to make the page cross browser compatible.
Here is my code.
CSS:
.popup{
/* css3 drop shadow */
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* css3 border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background:#eee;
/* styling of the dialog box, i have a fixed dimension for this demo */
width:50%;
/* make sure it has the highest z-index */
clear:both;
height:240px;
position:relative;
z-index:5000;
/* hide it by default */
display:none;
}
Centered horizontally and vertically:
.popup{
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #eee;
width: 50%;
height: 240px;
z-index: 5000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -120px;
clear: both;
// display: none;
}
Fiddle: http://jsfiddle.net/AwCWs/
This page renders great in FF, Chrome, etc.. However in IE 7 and 8, the close "X" which is a background image does not line up. Any ideas? I tried to set the background-position etc..
The code I have:
.startup-container
{
width: 455px;
}
.close-startup-home
{
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
}
.menu-outer
{
background: #545454;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .4);
}
.menu-inner
{
background: #3f3f3f;
-moz-box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 4px 3px rgba(0, 0, 0, .1);
-moz-border-radius:5px;
border-radius:5px;
}
.startup-box
{
width:439px;
line-height:20px;
text-align: center;
color:#fff;
padding-top:5px;
padding-bottom:5px;
}
.startup-box-inner
{
width:389px;
height:99px;
padding:20px;
margin-left:5px;
margin-right:5px;
}
<div class="startup-container">
<div class="close-startup-home"></div>
<div class="menu-outer startup-box">
<div class="menu-inner startup-box-inner"></div>
</div>
</div>
Give a position: absolute to your div containing the close button and position it according to that.
.startup-container {
width: 455px;
position: relative
}
.close-startup-home {
background: #c00 url("http://spotlightonhealthyliving.com/btn_closex.png") 0px -8px no-repeat;
float: right;
height: 52px;
width: 60px;
position: absolute;
right: 0;
}