タグ

css3とwebkitに関するsilemのブックマーク (4)

  • iOS・Androidのハイライト表示の指定について。

    今回は iOS・Androidのハイライト表示の設定について 紹介します。 (以下 iOS→iOSのMobile Safari、AndroidAndroidの標準ブラウザ) リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS3を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS3とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはjsを使用するもの、のみになります。 CSS3を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS3を使ったハイライト表示の指定 まず、CSS3でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co

    iOS・Androidのハイライト表示の指定について。
  • FACEs: CSS3のアニメーションプロパティを動的生成するJavaScript

    CSSのアニメーションプロパティでキーフレーム指定が面倒なので、動的に指定するJSを用意しました。 動作確認環境は、Chrome、Safari、MobileSafariです。 直接記述して指定する場合 マウスオーバーすることで、赤色から緑色に変わります。 直書きなので動的に色を変更(キーフレーム指定)するようなアニメーションは出来ません。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo-1</title> <style> div#demo1 { width :50px; height:50px; border:1px solid #000000; background-color: rgb(255,0,0); } div#demo1:hover { -webkit-animati

  • search 型 input 要素 のスタイルをリセット - terkel.jp

    HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res

    search 型 input 要素 のスタイルをリセット - terkel.jp
  • HugeDomains.com

    Captcha security check sohaya.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
    silem
    silem 2010/10/26
    -webkit-appearance: none;でフォームのセレクトを好きにカスタマイズできそう
  • 1