スタイルシートの有用なスニペットのまとめ | コリス
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード:phpspot開発日誌
4 Fun CSS Image Effects You Can Copy and Paste | Design Shack CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード。 次のように、画像を一瞬にしてオシャレにするCSSコード例が紹介されています。 数年前に同じような事を画像編集ソフトでやっていた人がいそうですが、もう一瞬でCSSでできる時代ですよ奥さん、という声が聞こえてきますね 数年後には、もう正直どうやってやってるかわからないけどライブラリ使ったらこうなった的なブラックボックスにどんどんなっていくんでしょうね 関連エントリ HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」 facebookのタイムラインをjQueryとCSSで作るチュートリアル Youtubeのカーソルを合わせるとポップアップするボタン実装CSSサンプル シンプ
アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress]
まえがき 前回「アイキャッチ画像のURLを取得する」方法は書きましたが もっとシンプルな方法を発見しましたので、エントリーします。 合わせて「アイキャッチ画像の横幅と高さを取得する」方法も紹介しますにゃー。 アイキャッチ画像の「URL,横幅,高さ」の情報を取得するタグ「wp_get_attachment_image_src」 wp_get_attachment_image_srcというタグを使えば アイキャッチ画像の「URL,横幅,高さ」が配列で返ってきます。 アイキャッチのサイズ指定（thumbnail, medium, large, full）もできます。 記述例 $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得 $image = wp_get_attachment_image_src( $thumbnai
![アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae275e8fa003aceaddee05ec058e47eee609dda6/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fplugins%2Fwp-ogp%2Fdefault.jpg)
[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション
IE7でのキャプチャ（アニメーションは静止状態で表示） [ad#ad-2] キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。 CSS 1枚目の葉っぱのスタイルシート。 ※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。 .deco { position: absolute; } .leaf-1 { left: 670px; -webkit-animation: leaf1 2s ease infinite alternate 0; top: -32px; } @-webkit-keyframes leaf1 { from { } to { -webkit-transform: rotate(11deg) translateX(-6px); } } ※デモページでは「-moz-」も使用しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LESS活用事例 3枚の画像を組み合わせて伸縮自在のボックスを作る - jsdo.it - Share JavaScript, HTML5 and CSS
Simple Icons
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net
Leaverou | Latest Social Media Marketing Trends
