This is my CSS code:
.thzPartsHeader, .thzPartsContainer {
border:1px solid #0080ff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
-moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
padding: 5px 20px 5px 20px;
margin:auto;
font-family:georgia;
font-size: 12px;
color:#ffffff;
background-color:#000000;
}
This is HTML code:
<fieldset class="thzPartsContainer">
<legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
<textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>
This is how it appears in Google Chrome (This is exactly what I want):
But this is how it appears in Firefox (no reputation to post images :o ):
(source: googledrive.com)
It appears as if the shadows are displaced and margin:auto property is not working in firefox. What is the fix for both of them? please help.
http://jsfiddle.net/f2ndc/
The shadow part of your question is a duplicate of
Box shadow CSS with a <fieldset>. Firefox vs Chrome
Not the best solution as you will have to have a fixed height and width for the <legend> but adding this could work
.thzPartsHeader{
position: absolute;
top: -9px;
left: 50%;
margin-left: -75px;
}
.thzPartsContainer{
padding-top: 9px;
position: relative;
}
fiddle: http://jsfiddle.net/FBca7/2/
Related
Why is the navigation bar behaving differently on different pages? They have the same css rules.
http://www.columbia.edu/~mmp2181/Megha/wwm.html (navigation bar is glued to the top) http://www.columbia.edu/~mmp2181/Megha/ (gap between top of page and the header)
Note: I'm specifically asking about its behavior on Google Chrome
> header nav, contactheader nav, wwmheader nav {width: 100%; height: auto; float: left; margin: >0; padding:15px 0 20px; background: #FDFDFD; border-top: 1px solid #f6f6f6; position: fixed; z->index: 7;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}
That's an easy one ;-) There's a img hiding in the top of your <body> tag.
<img src="/images/photos/meghahorizontal2cropb.jpeg" height="0" width="0">
Just remove the little fella and everything is gonna be alright.
Cheers
Gion
i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.
Can you help me out finding whats wrong with this code please:
CSS:
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
padding:5px;
}
HTML
<select>
<option>hey</option>
<option>hey2</option>
<option>hey3</option>
</select>
Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!
http://jsfiddle.net/wL8Rs/
I'm using Chrome latest 34.0 version and Firefox latest 29.0 version
Add padding to select
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
padding:5px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}
http://jsfiddle.net/wL8Rs/3/
I've got a challenge for you all. I'm trying to make the following shape without using any
What's difficult about it (impossible?) for me is the double border. Sure, I could put some other shapes over the cutouts but then the border lines would be disrupted. Anyone got any ideas?
I believe that SVG is the way you should go. However, just to see if it was possible, I decided to make this shape using pure HTML and CSS.
Here's the fiddle.
HTML
<div id="wrap">
<div id="mainshape"></div>
<div id="upperleftcut"></div>
<div id="diamondcut"></div>
</div>
We will be using 3 shapes here, and they'll be positioned inside a wrapper that will act as the overall shape. The two cutaways are their own divs.
CSS
#wrap {
width: 206px;
height: 150px;
position: relative;
overflow: hidden;
}
#upperleftcut, #mainshape, #diamondcut {
position: absolute;
background-color: white;
border-style: double;
}
#upperleftcut {
border-style: none double double none;
width: 100px;
height: 20px;
}
#diamondcut {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
width: 30px;
height: 30px;
left: 197px;
top: 50px;
border-style: double;
}
#mainshape {
border-style: double;
background-color: white;
width: 200px;
height: 144px;
}
The CSS property you are looking for is border-style: double;. The divs have each been absolutely positioned within the wrapper, and the diamond one has been rotated to form the desired triangle cut.
Conclusion
This would be far easier to do with an SVG, and far more flexible as well. The borders here between the different shapes also don't line up nicely. Don't do this with CSS, but know that you can.
As far as I can tell, you can't get rid of those border overlaps.
I answered to something simular using box-shadow to draw borders and cut off background a couple of days ago.
Here , i come with something close to your drawing http://codepen.io/gc-nomade/pen/lqzcm
div {
margin:3em;
border:1px solid;
box-shadow:inset 0 0 0 4px white,
inset 0 0 0 5px black;
min-height:10em;
position:relative;
background:pink;
}
div:before {
content:'';
display:inline-block;
float:left;
width:5%;
height:2em;
height:12vh;
background:white;
box-shadow:
-1px -1px white,
2px 2px 0 2px white,
1px 4px 0 0 black,
4px 5px 0 0 black,
5px 4px 0 0 black,
inset -1px -1px 0 0 black;
}
div:after {
position:absolute;
content:'';
height:32px;
width:32px;
background:white;
box-shadow:1px 1px 0 0 black,
4px 4px 0 0 white,
5px 5px 0 0 black;
right:0;
top:3em;
margin-right:-18px;
transform:rotate(135deg);
}
i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.