I have developed a switch board with two electronic switches and two lights, it is producing different results in different browsers.
Chrome Output
In Chrome it is working good.
Click for Larger Image
Safari Output
The shiny labels of buttons are pushed to bottom
Click for Larger Image
Fire Fox Output
The radial gradient is DULL
Click for Larger Image
Is there any thing i am missing while doing cross browser platform support?
Any suggestions please! Any help will be highly appreciated
Please look for Present version Code Pen Link It is with comments
Fixed label position and gradient : Code Pen Demo
To fix the position of the labels, use top instead of margin-top.
.switch:before { /* Used for Inner Ligths of switch */
content: "";/* Without this no layout positioning will work */
background: rgb(53, 244, 252);/* Sandy white color */
width: 36%;/* occupied 36% of switch (which is 50% of board frame */
position: absolute;
height: 4px;/* Light height */
margin-top: 0%;/* 36% width + 32 % left border + 32% right border = 100% of switch width */
top: 77%;
margin-left: 32% ;
margin-right: 32% ;
marging-bottom :0px;
border-radius: 12px;/* Light radius */
box-shadow: inset 0 0 1px rgba(0,0,0,.2);/* Switch light shadow */
border: 1px solid rgba(0,0,0,.1);/* Switch Light border */
}
.on.switch:before {/* Used to target light of switch */
margin: 0% 32% 8%; /* Move light of switch up so it appears that light is actually on */
top: 70%;
background: rgba(255, 255, 255, 0.42);
}
The problem is not in Safari or Chrome, but rather Firefox doesn't handle margin-top in percentage properly. I tried setting margin-top: 100% and only Safari and Chrome (Mac version) render the label below the switch. Firefox determines that 100% is less than the full height of the switch.
As for the gradient in Firefox, simply move the line radial-gradient to the top and leave -moz-radial-gradient at the bottom. This would allow the browser specific CSS to take effect.
.radial:before{
content:"";
position:absolute;
top:-240px;
/* width: 1200px;*/
/*max-width: 100%;*/
width:100%;
height: 920px;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 1%,rgba(255,255,255,0.15) 2%,rgba(255,255,255,0) 56%,rgba(255,255,255,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
z-index: -21;
}
Related
Lately, I've gotten into making CSS art and I noticed something that I don't understand about CSS borders.
If I style an element to be rounded with a transparent background, and set a border on only one side, there's still a faint line on all the other sides that shows up only on mobile.
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
Compare the following CodePen on a PC vs phone to see what I mean:
https://codepen.io/aradevich/pen/mdrLvqx
Screenshot:
ellipse with 5px top border
This effect is particularly bothersome when it skews facial features in CSS art, like with the eyes here on mobile: https://codepen.io/aradevich/pen/qBaxQye?editors=1100
Does anyone know why this happens, and how I can address it?
Thank you!
Here is a different idea to have the same result without the border issue:
div.box {
width: 300px;
height: 150px;
background:
/* 150 = width/2 70 = height/2 - 5px of border */
radial-gradient(151px 70px at bottom, transparent 98%,purple)
top/100% 50% no-repeat;
border-radius: 50% 50% 0 0;
}
<div class="box"></div>
As far I know, maybe it's caused by browser rendering. So, the solution is change the graphic image to SVG or PNG instead of css.
I have an element with a dashed bottom border:
border-bottom: #303030 2px dashed !important;
In Chrome, it nicely gets rendered like this, with the dashes all having the same length:
However, Safari behaves differently. The first and last dash gets cut off on the side:
Here's a minimal Codepen to reproduce: https://codepen.io/anon/pen/XBJjJP
I have tried achieving the dashed effect with a background image, which gives me exactly the same issue in Safari.
Do you guys have a solution for having Safari render the dashes the same way Chrome does?
Ok, I found a (hacky) solution that makes it work in Safari, too: Have a fully transparent border to reserve the space, then add a background image below the element that draws the actual border:
border-bottom: rgba(0,0,0,0) 2px dashed !important;
background-image: linear-gradient(to right, black 60%, rgba(0,0,0,0) 60%,
rgba(0,0,0,0) 100%);
background-size: 11px 2px;
background-repeat: repeat-x;
background-position: left calc(100% + 2px);
I needed to adapt the exact dash width (11px in this case) to the concrete element's width. So I doubt this solution will work well in responsive design scenarios, but it is at least sufficient for me.
I would like know how is made the shadow on bottom image, i tried to check to the source code but I not found nothing. Any idea? Thank you
example in the cover image or see in the widget friend on the your profile page under the name there is a shadow for see better the name of color white
You seem to be looking for a gradient. An option is to do this with an image, however this can be done with css as well. Check out this page. Or search Google/Bing/.. for css3 gradient.
I've made a quick fiddle of what I generated in the generator I linked that might fit your needs. You can change the background-color to whatever you want (in the example I set it to red) to show it is transparant.
background: -moz-linear-gradient(top, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 40%, rgba(43,43,43,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,43,43,0)), color-stop(40%,rgba(43,43,43,0)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b2b2b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
UPDATE
Looking at the Facebook code, it does seem that they are using an image to overlay the image. If you look at the source, you will see that a#fbCoverImageContainer.coverWrap.coverImage has two important children, the img.coverPhotoImg.photo.img, that contains the image of the background. Often this image will expand further than the height of the banner itself, since only part of the image is shown. The other important child is div.coverBorder. Looking at it's source it has following css:
background: url(/rsrc.php/v2/yJ/r/UgNUNkKQar6.png) bottom left repeat-x;
This is a 1x95px image creating the overlay.
I've fumbled around a little, getting to this fiddle. This is the code I used:
html
<div class='myHeader'>
<img src='http://lorempixel.com/output/people-q-c-747-438-1.jpg' />
<div class='coverBorder'></div>
</div>
css
.myHeader{
display:block;
position:relative;
height:315px;
overflow:hidden;
}
.coverBorder{
background: url(http://i.imgur.com/UGqidBk.png) bottom left repeat-x;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
}
If you look at the fiddle, you can clearly see that the image expands outside of the div, but the overflow:hidden; hides this. Currently the overlay extends outside of the image because the div.myHeader has no width so it gets set to 100%. Give it 500px and you will see you can easily scale it.
Create a shadow class in your css file
.shadowThing
{
box-shadow: 2px 2px 3px 2px #333;
}
Then apply it to a div (or something else) in your HTML.
<div class="shadowThing">
<!--some content here-->
</div>
Using a gradient background. I'm assuming you're talking about the homepage before you login. If you really mean shadow please be more specific.
Edit in response to comment:
Yes. That is not a shadow, but a gradient background image repeated.
background: url(background-url.png) bottom left repeat-x;
Use google image search and search for term "gradient".
This is achieved by taking a small slice of the image and repeating it as a background along the x axis.
Use the CSS box-shadow property
The syntax is:
box-shadow: h-shadow v-shadow blur spread color inset;
so use like this:
.shadow {
box-shadow: 2px 2px 2px 2px #888888;
}
See this fiddle for an example
It will look like this when applied to a block element with height and width properties set.
I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.
In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;
Method One
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
border-top: 5px solid #000;
margin: 40px auto;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent)
;
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent)
;
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent)
;
-moz-background-size:5px 100%;
background-size:5px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
Method 2
/* Using pseudo-elements and background gradients */
.two {
position: relative;
width: 400px;
padding: 20px;
border: 5px solid transparent;
border-top-color: #000;
margin: 40px auto;
}
.two:before,
.two:after {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
width: 5px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
}
.two:after {
left: auto;
right: -5px;
}
I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.
I would also like to know if this will work if the border is dashed or dotted?
Thank you for any help and/or advice in advanced.
Best Regards,
Tim
NOTE - Edited the CSS to have the gradient span across the width of the element, not just the border width.
This is what I've come up with, which is more or less what h3n is suggesting with more vendor-specific properties filled-in:
border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image:
-webkit-linear-gradient(180deg, #000, transparent),
-webkit-linear-gradient(180deg, #000, transparent)
;
background-image:
-moz-linear-gradient(180deg, #000, transparent),
-moz-linear-gradient(180deg, #000, transparent)
;
background-image:
-o-linear-gradient(180deg, #000, transparent),
-o-linear-gradient(180deg, #000, transparent)
;
background-image:
linear-gradient(90deg, #000, transparent),
linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;
http://jsfiddle.net/vqnk9/1548/
MDN has a reasonable tutorial on how to handle this cross-browser, as well.
Now, if you look closely, you may notice that the non-vendor background-image uses 90deg instead of 180deg. My original thought was -90deg, so of course that makes sense to me somehow (?), but as to why they are different, here is the W3 spec (see the last quote for the reasoning behind this difference):
4.1.1. linear-gradient() syntax
The linear gradient syntax is:
<linear-gradient> = linear-gradient(
[ [ <angle> | to <side-or-corner> ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.
The gradient line's direction may be specified in two ways:
using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.
using keywords
If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.
If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).
Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.
And from MDN, some administrivia on why the degrees differ (blame Apple?):
A last semantic curiosity still exists between the prefixed variants
and the unprefixed proposal. Following the initial Apple proposal, the
prefixed variants of the syntax all uses the an <angle> defined like
polar angles, that is with 0deg representing the East. To be coherent
with the rest of CSS, the specification defines an angle with 0deg
representing the North. To prevent sites using prefixed version of the
property to get suddenly broken, even when adapting to the otherwise
forward-compatible final syntax, they keep the original angle
definition (0deg = East). They will switch to the correct spec when
unprefixing the property. Also, as they aren't incompatible, Gecko
supports, prefixed, both the syntax with the to keyword and without.
Here again, the syntax without the keyword will be dropped when
unprefixing.
at least for webkit this sets the angle so its from right to left:
-webkit-linear-gradient(180deg, black, white)
first time posting - I hope somebody can help.
I have a gradient background on a page which uses ajax (and becomes quite long after the call).
In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.
Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?
Here is my css relating to the gradient:
html {
background-color: #8c827a;
height: 100%;
margin: 0 0 1px;
padding: 15px;
/* Mozilla: */
background: -moz-linear-gradient(top, #8c827a, #2B2825);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8c827a), to(#2B2825));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}
To make other browsers behave the same as Internet Explorer, you can make the background fixed:
html {
background-attachment: fixed
}
Make sure you place background-attachment after the two background declarations.
Add this CSS:
background-attachment: fixed;
This property "pins" the background at the browser viewport.