[B! web design] kosiganのブックマーク

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。見出し(Headline)のサンプル集色やボーダーサイズ等の装飾部分はお好みで編集してください。見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

kosigan 2010/06/13

リンク

少しのコードで実装可能な20のCSS小技集

2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！少しのコードで実装可能なCSS小技集シリーズ【第2弾】少しのコードで実装可能な20のCSS小技集【第3弾】少しのコードで実装可能な15のCSS小技集まずはCSS基礎編 1. divを中央揃えにするほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

kosigan 2010/04/14

リンク

画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」:phpspot開発日誌

s3Slider jQuery plugin 画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」。次のように、画像に半透明のキャプションを付けつつクールにアニメーションさせられるjQueryプラグインです。動きを実際に見てみましょう。かなりかっこいいです。 s3Sliderプラグインの使い方とダウンロードはこちら実装のHTMLは次のように結構綺麗になってますので、安心して使えます。ページのヘッダーあたりに置くとかなりのオシャレ感を出すことが出来ますね。

kosigan 2010/02/27

リンク

画像にFlashのようなエフェクトをかけられるjQuery – creamu

画像をかっこよく見せたい。そんなときにおすすめなのが、『jqFancyTransitions』。画像にFlashのようなエフェクトをかけられるjQueryです。画像にシュパシュパシュパッと切り刻んだような効果をつけられますね。かなりかっこいいです。これがjQueryでできるなんて、すごいなと思っちゃいますね。 Examplesには、ほかにwave, curtain, fountain topといった効果があって、それぞれとてもかっこいいです。クロスブラウザの対応もされているようですね。ぜひ見てみてください。 jqFancyTransitions | slideshow with strip effects 連日徹夜気味で意識もうろうとしてきた。。今日はもうちょいがんばって早目に寝ようかな。ともかく金曜日はいい気分ですね〜。