Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.
ブロック要素に角丸を使うことができれば、デザインの幅も広がります。でも画像を使うのは面倒だし・・・悩んでいていろいろ調べてみたらCSSのみで角丸を実現する方法が書いていたんです。ということで、備忘録代わりにここに記すことにします。いやー、スタイルシートって奥が深い。こんな方法思いつかなかったよ。でも<span>の中は空っぽなのでHTMLの文法的にはアウトかもしれませんね(汗 HTMLソース <div id="text-sample"> <!-- フタ --> <span class="rtop"> <span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span> </span> <!-- フタ --> <!-- 中身 --> <p class=
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
piapro(ピアプロ)は、聞いて!見て!使って!認めて!を実現するCGM型コンテンツ投稿サイトです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く