サークルがランダムに配置される背景をSVGで作る
SVGを使って、毎回ランダムな色・大きさ・配置でボケ（bokeh）なサークルを作ってみます。 まあやってることは前回の「Kawaii Bubbles!」とあんまり変わりませんけど……。 前回はli要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVGなら画像だから別にいいかと思って、今回のを作ってみました。 Random Bubbles Background with SVG デモファイルをダウンロード 始めはCSS BackgroundでSVG読み込ませようとしたりimgで置こうとしたんですが、それだとSVGのスクリプトは実行されないので、HTMLファイルで読み込んでいるJavaScriptでSVG要素を作ってインラインSVGとして追加することにしました。 今回の各ファイルは次のようになっています。 使ったテキストは与謝野晶子の「セエヌ川」です。
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
box-shadowを使うときの注意点
CSS3から消えたり復活したりのbox-shadowですが、使ってみると気になる点があったのでメモしておきます。 キャプチャ画像はIE以外のブラウザ（Windows版）です。 IE 9は入れてないのでどうなるか分かりません。 テスト表示に使ったのは以下。 box-shadowを使うときの注意点 DEMO 親要素にoverflow: autoが指定されている場合のスクロールバーの扱いタイトルだけでは上手く説明できないのですが、overflow:autoが指定された要素の子孫要素にbox-shadowが指定されている場合、親要素からはみ出るドロップシャドウ部分をどのように表示するか、ということです。 ……コードとキャプチャ画像を見てもらったほうが早いですね。 <div id="outer"> <div id="shadow1">box-shadow</div> </div> #outer {
スクロールバーをデザインする::-webkit-scrollbarに関しての覚え書き
Google Chrome、Safari、Lunascape Webkitなど、Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。 これはその名の通り、スクロールバーをデザインするときに使います。 基本的な説明はSafariのブログに書かれていますので、そちらを参考にしました。 また、この記事で説明に使っているキャプチャ画像は、Safariのデモページのものです。 Surfin’ Safari - Blog Archive » Styling Scrollbars スクロールバーのパーツを構成する擬似要素これらを指定するときにはWebkit用のベンダープレフィクス-webkit-を忘れないようにしましょう。 ::-webkit-scrollbarwidthで縦スクロールバーの幅、heightで横スクロールバーの高さを指定します。 パーセン
Media Queriesを使うときに参考にしたいサイト
CSS3のMedia Queriesを使ってみたいと思ったので、関連サイトを集めてみました。 いつもどおり有名どころが多いので見ている方も多いかもしれません。 仕様・解説などMedia QueriesW3CにあるMedia Queriesの仕様。CSS3 Media Queries『Web Designer Wall』の記事。サンプル多め。Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks『CSS-Trick』sの記事。非対応ブラウザ用にjQueryを使ってスタイルシートを切り替える方法も紹介されている。ライブラリ・プラグインなどcss3-mediaqueries.jsCSS3 Media Queries非対応ブラウザでもMedia Queriesを使えるようにするためのJavaScriptライブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
