I have css (stylus) here:
.textarea:focus
box-shadow: 0px 0px 73px 5px primary-color
yet the textarea has the box shadow by default. Here is the codepen link:
https://codepen.io/Tycholiz22/pen/vbGMLJ?editors=1100
Your styles are stacked in such a way that the default .textarea also receives the box-shadow:
.textarea
.textarea:focus
box-shadow: 0px 0px 73px 5px primary-color
This renders to
.textarea, .textarea:focus {
box-shadow: 0px 0px 73px 5px #09ae96;
}
If you remove .textarea from the shared style block, you'll see the :focus style disappear when unfocused.
.textarea
.textarea:focus
box-shadow: 0px 0px 73px 5px primary-color
In your Stylus code, there is a .textarea with no styles applied to it just before the .textarea:focus line. This is translating to: .textarea, .textarea:focus. This is because Stylus interprets a newline as equivalent to selector separators (commas in a rule set)..
Remove the .textarea to fix your code.
See the Chrome inspector:
Related
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I have a Chrome extension that injects a DIV into each page, and styles that DIV with a style sheet included in the extension. On some pages, the injected DIV looks as intended, but on others it doesn't. One the StackOverflow site, for example, the box-shadow property of my elements is overridden, despite the fact that it is specifed as ! important in my CSS.
When I inspect the element in question, Chrome tells me that the box-shadow property is not applied (it is shown struck-through), but it does not tell me why: nothing in the cascade of styles specifies that property.
When I added the box-shadow property directly to the elements (without the benefit of a CSS class), the CSS inspector view showed that the properties are associated with the element, but the effect is still absent.
UPDATED: code snippets:
Here is what I specify in my code:
var $bar = $('<div>').addClass('pp_bar').css({
'box-shadow': '-1px 0px 2px 1px #444',
'-moz-box-shadow': '-1px 0px 2px 1px #444',
'-webkit-box-shadow': '-1px 0px 2px 1px #444'
});
Here is the CSS:
.pp_bar {
height: 80%;
right: -4px;
top: 0px;
position: absolute;
box-shadow: -1px 0px 2px 1px #444 ! important;
-webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
-moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}
Here is what Chrome shows as the computed style:
-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
You can see that the value used (#444 0px 0px 1.2000000476837158px 0px) is different from the element style (as assigned in my code; the element style overries the class values (which are the same). Without the element style setting, the class values are shown struck out.
On sites in which this works correctly, the browser reports the following in the computed style:
-webkit-box-shadow: #444 -1px 1px 2px 1px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
What should I try next?
Set the style on the element itself, with the !important flag. Then, you can know for sure that the style is being applied on the element with the highest priority.
Examples:
var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';
// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';
Non-example (does not work!):
div.style.boxShadow = '0 0 3px red !important'; // Does not work!
If you cannot afford to set the inline styles, try to achieve a higher specifity at your CSS selectors, by including an ID for example.
In the image below, the top image is what I currently have on a site, it uses an actual Image.
What I want to do is make something more like the bottom image using pure CSS, I cannot figure out how to do it though, can anyone help?
CSS3 has a lot of solutions. Try this:
div.exampleboxshadowj {
background-color: #EEE;
float: left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width: 160px;
text-align: center;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
Though you can change the color to blue, if you want.
Here is a great link for all the info you could want.
You can try using this link to get the gradient effect on those buttons (I haven't tested it myself)
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
I'd imagine that since they use the background property, you would need to have the actual images on the buttons inside some sort of position container.
It would be easier and possible more cross-browser friendly to simply create the images in a sprite map and switch the background-position when they are clicked.
If I understood you properly, you are trying to change the image when it is clicked or is active. If so, for that you can use :focus or :active to generate such effect.
Here is a demo with background color instead of a picture.
hi you can use this css3 browsers compatible css code for your requirement :-
.shadow {
width:150px;
height:150px;
background-color: rgb(55,79,99); /* Needed for IEs */
-moz-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
-webkit-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
or see the live demo :- http://jsfiddle.net/dte78/32/
and can read more about box shadow
how to make a shadow on the top of the DIV only, using Box-Shadow using css3 ?
I want to modify this css3 code .. to do that
box-shadow:0px 0px 45px #08C;;
-webkit-box-shadow: 0px 0px 45px #08C;
-moz-box-shadow: 10px 10px 10px 10px 15px #08C;
You don't need the prefixes for box-shadow anymore, actually. Plain box-shadow works in the newer browsers.
Anyhow, the syntax is (for example):
box-shadow: 0px -12px 12px -7px black;
Where 0px is x, -12px is y, 12px is the amount of blur and -7px is the spread. It's spread that allows you to create this effect.
See it in action at: http://jsfiddle.net/c6QLC/
I have an button just as have Ask Question on SO and here is the CSS for it:
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}
Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.
Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.
Hope I have made my question clear. Any guidance would be highly appreciated.
Thanks.
The box-shadow property is not yet widely supported, but can be implemented like:
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Not sure what you're asking about the label/box?
Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/
You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.
For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?
EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}
EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}