[B! css] nknkztkのブックマーク

Animation Principles for the Web - a Collection by Donovan Hutchinson on CodePen

Have a look at the code behind each of the examples from https://css animation.rocks/principles/

nknkztk 2015/06/03

css

リンク

便利なCSS3ジェネレーターのまとめ

こんにちは。またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。グラデーション Ultimate CSS Gradient Generator サイトへ以前からこちらを使用させていただいています。使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへグラデーションだけでなくボーダーやチェックなども用意してあります。 CSS3だけでここまで表現できるんですね。 Gradient Generator サイトへこちらもシンプルで使いやすいです。保存機能があるのがいいです。ボタン Grad3 サイトへ各ブラウザ用のcssを右上のアイコンでいるか/いらないかなど選択できます。

nknkztk 2015/05/11

css
tools

リンク

HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

nknkztk 2015/03/02

リンク

[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋

次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。

nknkztk 2014/09/21

css
web

リンク

擬似要素を使った見出しデザイン

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。今回のサンプルは別サーバにアップしていますのでご覧ください。それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付