Showing posts with label cross browser. Show all posts
Showing posts with label cross browser. Show all posts

Tuesday, 29 May 2018

Cross browser font CSS

font-weight: 400;
font-size: 1rem;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #555;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
text-rendering: optimizelegibility;
background-color: #fff;​

Thursday, 11 July 2013

Cross browser box shadows (yet again)

A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect.  This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.

.container
{
  margin-top:20px;
  box-shadow:3px 3px 10px 5px #666666;
  -moz-box-shadow:3px 3px 10px 5px #666666;
  -webkit-box-shadow:3px 3px 10px 5px #666666;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}