SaikoTroid: css

Showing posts with label css. Show all posts

Friday, May 18, 2012

Amazon S3 and 'Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream'

If you use Amazon S3 to serve your static CSS you may end up with this error message 'Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream'

You have to log in into Amazon S3 console
Navigate to the file in question
Open Properties and click to the Metadata
You can see a Content-Type field with the value binary/octet-stream, change it to text/css

Something like this

Monday, January 16, 2012

Font smoothing on Webkit

I’m not a big fan of the default text rendering in WebKit, it looks heavy. Fortunately there is a solution.

You can find here more examples on Christoph Zillgen's site.

Thursday, September 8, 2011

Checkbox/Radio button size on Android Safari

You cannot change checkbox/radio button width/height on Android in Safari because it is tied to the OS.

But since the default ones are so tiny that you may need bigger buttons.
Here is a simple trick:


input[type=checkbox] {
  -webkit-transform: scale(2,2);
}

Please note that if you set up values bigger than ~2 then the yellow outline will look weird.

Thursday, March 10, 2011

Disable the text-highlighting magnifier on touch-hold on Mobile Safari / Webkit

<style>
 * {
      -webkit-user-select: none;
}
</style>

Friday, February 11, 2011

Infinite webkit keyframe animation

Here is a simple example of an infinite animation.

<head>
    <style>
        @-webkit-keyframes infinite-spinning {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        #box {
             -webkit-animation-name: infinite-spinning;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: infinite;
             -webkit-animation-timing-function: linear;
             width: 100px;
             height: 100px;
             background: #00f;
        }  
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>

Friday, January 28, 2011

Changing the default style in Kod

Kod is a promising text editor for OS X.

One of the great things is that, you can style the editor with CSS.

mkdir ~/.kod
cp /Applications/Kod.app/Contents/Resources/style/default.css ~/.kod/

defaults write se.hunch.kod style/url ~/.kod/default.css

kod ~/.kod/default.css

then don't forget to reload the style in Kod, View menu/Reload style