CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス

2018/06/21 68 users スクリーン HTML コリス CSS CSSグラデーション

スクリーンいっぱいの背景にCSSグラデーションが変化するアニメーションを実装するスタイルシートを紹介します。 HTMLもCSSも非常にシンプルで、簡単に利用できます。 Pure CSS3 Gradient Backgro...記事の続きを読む 続きを読む

[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック | コリス

2018/03/27 64 users コリス 矩形 box-shadow シャドウ CSS

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシ... 続きを読む

ユニークなタイプが多数！Pure CSSで実装できるプリローダー 5 | NxWorld

2015/04/18 47 users プリローダー NxWorld SVG 備忘録 CSS

以前にもCSSやSVGなどで実装するプリローダー（ローディングアニメーション）を一度まとめたことがあるんですが、また幾つか使わせてもらう機会ありそうなものや覚えておきたいものが幾つかあったので備忘録です。今回はいずれもPure CSSで実装したプリローダーとなっており、シンプルでどんなデザインにも合うタイプももちろんありますが、全体的にちょっと変わったものなど他では見ないようなタイプのものが多めで... 続きを読む

Pure CSSでアイコンを実装できるスタイルシート「icono」 | NxWorld

2015/01/06 43 users NxWorld SVG プロパティ CSS 擬似要素

「icono」は画像を使用せずに、擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。WebフォントやSVG使えばって感じですが、それすらも使いたくない場合はよく見かけるものがひと通り揃っていて良いかなと思いました。 画像は用意されている... 続きを読む

Home | Web Fonts Gallery - Pure CSS & Web Fonts inspiration - @font-face sites showcase

2011/10/12 36 users ＨＯＭＥ

Web Fonts Gallery - CSS and Web Fonts Inspiration 続きを読む

CSS のみで吹き出し - terkel.jp

2009/12/06 485 users terkel Demo div Weblog Body

hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む

hail2u.net - Weblog - Pure CSSな吹き出し

2009/11/03 210 users Weblog hail2u.net

Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CS... 続きを読む

アンチエイリアスがかかったCSS角丸を作るWEBツール:phpspot開発日誌

2006/03/28 163 users アンチエイリアス phpspot開発日誌 Webツール

Spiffy Corners - Making anti-aliased rounded corners with CSS Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff アンチエイリアスがかかったCSS角丸を作るWEBツール。 FG,BG Colorを入れるだけで簡単にアンチエイリアス... 続きを読む