List of Pseudo-Elements to Style Form Controls
Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display. While all of these pseudo-elements are rendering engine specific (and ther
劇的！（でもない）before after 擬似要素の使い方まとめ
自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。 before/after擬似要素 基本的な使い方 まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。 このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。 ものすごくシンプルなソースを見ていただけるとわ
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
:-moz-placeholderから::-moz-placeholderに - fragmentary
コロンに注目ね。Mozillaはこれまでplaceholder属性にスタイルをつけるために、:-moz-placeholderという擬似クラスを使っていたんだけど、Firefox 19からは::-moz-placeholderという擬似要素になる。 737786 – Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to pseudo-element) 変更した理由については、プレースホルダまわりのバグを修正するにあたってのことらしい。 直接関係ないけど、フォーカス時にもプレースホルダが出るのを止めるためのprefもついた。dom.placeholder.show_on_focusから変更可能。 さて、独自拡張だからなのか、これまでの:-moz-placeholderを残すわけでもなく::-moz-place
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる
WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた！</p> クラス指定なので１つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的！（でもない）before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書
問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
