search 型 input 要素 のスタイルをリセット - terkel.jp
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【vol.5】- ちょっと複雑なアニメーションを作ってみる。】です。全5回に分けてステップアップ式に記事化している最終回です。これまでの全4回の記事を統合してすこ複雑なアニメーションを作ってみます。 【vol.1】- とりあえずはじめの一歩。 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法 【vol.3】- イージングを生成してくれる便利なジェネレーター 【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む） 【vol.5】- ちょっと複雑なアニメーションを作ってみる。 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる 【vol.7】- jQueryでCSS3アニメーションの終了のタイミングを取得する方法 ア
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2 | CSS-EBLOG
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2 カテゴリ：3D 2013年8月28日 19:04 前回はこれから解説していくルービックキューブの紹介と、3D関連の学習に利用した記事などの紹介をしました。 いよいよ実際にルービックキューブについて解説をしていきたいと思います。 まずは基本的なところから始めて行くので、人によっては今回の記事はほぼ知ってることだらけになるかもしれません。 要素の変形 - transformプロパティの基礎 上でも書いた通り、まずはtransformプロパティの基礎から解説していきます。 すでに使ったことがある人ならおなじみだと思いますが、transformプロパティ（WebKit/Blink系はまだ-webkit-のプレフィクスが必要です）にはいくつかの値が指定できます。 実際にtransformプロパティに指定でき
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
[CSS]box-shadowの面白い使い方！画像にシャドウをこんな感じにつけると立て看板風に見える
box-shadowはボックスの周りにふわりとしたシャドウをつけることができますが、それを少しアレンジして、立て看板風のシャドウをつけるテクニックをBloomから紹介します。 まずは、通常の周りにふわりとシャドウをつけてみます。 HTML img要素をdivで包みます。 <div class="css-box-shadow"> <img src="logo.png" alt="" /> </div> CSS ボックスの四辺にシャドウを適用します。 .css-box-shadow { width:133px; position: relative; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 1px 4px rgba(0
Android（アンドロイド）独自サイズdp（dip）をpxに計算するツール「[dp（dip）] → [px] Conversion」作ってみました。｜BLACKFLAG
Android（アンドロイド）開発では通常のWebサイト制作では聞きなれない dp（dip）という単位を使用することがあります。 Androidでの基本的な5つの解像度 【ldpi】【mdpi】【hdpi】【xhdpi】【xxhdpi】の 各画面で表示する際の共通単位になるようですが、 このdp（dip）の値をpxに変換する必要に駆られることがあり計算用ツールを作ったので、 ここで紹介するまでもないかもしれませんが、メモとして紹介しておきます。 dp（dip） → px 変換 [dp（dip）] → [px] Conversion dp（dip） → px 変換 [dp（dip）] → [px] Conversion 計算させる「dp（dip）」の値をフォームに入力すると 下部の表に画面解像度（ピクセル密度）ごとの 【ldpi】【mdpi】【hdpi】【xhdpi】【xxhdpi】 それぞ
![Android（アンドロイド）独自サイズdp（dip）をpxに計算するツール「[dp（dip）] → [px] Conversion」作ってみました。｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd7f43946768aad1f06300e637b882c90bf15786/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp.png)
CSS3を使った新しい画像置換の方法
CSS3を使った新しい画像置換の方法 2011-03-28 ソースコードはテキストで、見た目は画像に変える画像置換について、CSSでよく使われる方法はtext-indent 現状の画像置換について 2009年の時点でGoogleはこの方法を推奨していません。 最近であれば、@font-faceの使用をGoogleは推奨という記事があります。 しかし日本では@font-faceの使用は難しいのが現状です。 日本語フォントはサイズが非常に重いです。私も@font-faceを一時期使ってみましたが、重すぎて使い物になりません。 そこでCSS3のcontent:url()を使用した方法を発見しました。 contentを使った画像置換 text-indentに比べて、非常に簡単です。ソースコードは以下の通りです。 <style type="text/css"> p.replace {content:
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
World4Coders - This world is created for programmers.
cubic-bezier.com
stroll.js - CSS3 Scroll Effects