CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
CSS3 Button Generator – This site was closed.
LR icons https://en.lricons.com/ CSS Button Creator https://cssbuttoncreator.com/ Button Maker https://css-tricks.com/examples/ButtonMaker/ CSS Button Generator for your pleasure http://www.dextronet.com/css-buttons-generator/ 2.5dBUTTON http://noht.co.jp/2_5dbutton CSS3 Typeset Style Generator http://www.sciweavers.org/i2style Button X https://www.bestcssbuttongenerator.com/ CSS button generator
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
Original Hover Effects with CSS3 | Codrops
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative wa
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI