My text shadow is in the state of Override throughout my HTML / CSS3 Document.
Here are the tags:
html *,
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0, 0.3) !important;
}
How to I ensure the Text-Shadow can display properly without being overrided. I cannot locate the override, since the source of override is not documented with Google Chrome Inspection Tool Update Beta CSS/XGS.
Remove html * from your css code it is only reason for override
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0,0.3) !important}
Here you are using universal selector(*)...
html *....means target all the elements inside the <html> tag...
...so html * is targeting all the elements, thats why all the elements getting the text-shadow. So better to remove it...
And also your text-shadow value is not valid...you need to use rgba in the second text-shadow and I dont think there is any need of !important rule...Try to avoid it...
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3) !important;
}
Replace your code with this Remove html *
Related
I am trying to make a glassmorphism effect and my problem is that the webkit backdrop filter is not applied to the background of the div.
the css code:
.glassmorphism {
background: rgba( 255, 255, 255, 0.20);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
-webkit-backdrop-filter: blur(10em);
backdrop-filter: blur(10em);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}
html:
<div id="content__body" class="glassmorphism"></div>
And I get this error in chrome:
invalid property value
Edit;
I just found out the problem myself:
I had two glassmorphism divs over eachother. For some reason that lead to a cancelation of the effect. In short: The styling above works but not for stacked divs
Use 10px instead of 10em
and your backdrop filter is working.
The Bootstrap framework uses a short syntax to define a box-shadow for div.form-control:focus:
.form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
What does the part befor the comma sets? The part after the comma defines the appearance of the shadow, but the part before? Where can I find more info about this?
Searching for this on Google I found a page on w3schools but it seems explain only the part after the comma while I'm don't understanding the part before.
They are using two different box shadows in one statement. The other is an inset border, which is inside instead of outside the element.
Take a look at this CSS-Tricks article for more info about box shadows
I have a situation where I have an input text field for an email.
It has a focus attribute that displays a blue border.
When the email is in a wrong format, the input is in a red border.
However, When there's already a red border i.e. an error in the field and I set focus on the input field, I see the blue border with the red one.
This is the contents of class for the focus:
.myClass:focus{
box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
-webkit-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
}
This is the class for the red border:
.input.error {
padding: 5px;
border-radius: 5px;
border: 1px solid #DD4B39;
}
Is there a way for my to make sure the focus style will not be displayed when the red border is being displayed?
I can think of two solutions:
If the .error class affects the same property (box-shadow) as focus, it will override it (assuming it has higher or equivalent specificity; use !important otherwise). So either make it a red box-shadow or keep your red border while explicitly removing any box-shadow.
Or refine your :focus selector so it doesn't apply to .error: input:not(.error):focus (requires CSS3)
I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.
EDIT: Thanks for all the help! Finished table is here: http://jsfiddle.net/MnLkD/
I am trying to get a shadow to appear inbetween the borders on this table:
http://jsfiddle.net/g2fy4/
I'm guessing it might not be possible but thought I'd ask the experts anyway :-P . I have tried setting a border-spacing of 2px, no border, and assigning the drop shadow to the th and td tags but it didn't work.
If anyone has any ideas I would be grateful for the input :-)
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:0;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
What, you mean like this? (scratches head)
http://jsfiddle.net/g2fy4/2/
All I did was change the items that got shadow from table to td and made sure there was border spacing.
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:3px;
}
#content.postagepage td {
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
If you want shadows on the td elements, put it on the td elements!
It sounds like you want to do this?
http://jsfiddle.net/b9chris/sXQvp/
CSS:
div {
width: 100%; height: 100%;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
HTML:
<table>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
</table>
Basically the answer is, you can't make this happen with TD tags alone, but you can wrap the cell contents in a tag like divs and style those instead.
Do you want to achieve something like this:
http://img856.imageshack.us/img856/8865/tableim.jpg
?
My only idea currently is to set few absolute positioned divs in table (but then table cells width and heights should be set), and to add box-shadow to these divs...