CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ | コリス

2019/07/12 349 users コリス 進化 一昔前 プロパティ コード

CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳し... 続きを読む

[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ | コリス

2016/12/01 139 users borderプロパティ コリス グラデーション CSS ライン

コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素 ...記事の続きを読む 続きを読む

CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*frasm

2013/03/28 1566 users ブロネク コト CSS3 frasm 次回

疑似クラスって便利なの。 ほんと、便利なんですよ。 ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。 次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと... 続きを読む

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners | コリス

2012/10/30 77 users コリス 四隅 CSS エフェクト div要素

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <... 続きを読む

[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス

2012/01/24 547 users コリス Opera class ul要素 Safari

デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む

[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス

2011/11/03 134 users コリス jQuery 両端 CSS 見出し

紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像... 続きを読む

[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル | コリス

2010/12/28 319 users ドロップシャドウ コリス before チュートリアル CSS

CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+,... 続きを読む