【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
参考にしたいCSSでできるテーブルデザイン10選
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
