[CSS3] SpinKit – 画像を使わないCSSスピナー
画像を使わずにCSSだけで描画されるローディングスピナー。全部で8個用意されていて、左右のスクロール（十字キー使えます）で見る事ができます。各ページ内から「Source」ボタンを押す事でCSSコードが表示されるので、コピペするだけで使えます。ローディングアニメーションをサクっと導入したい時に使えそうです。アニメーションもクール。
Tag Archives: CSS3
[Javascript] Full Screen Vertical Scroller – CSS3とjQueryで動くフルスクリーンスクローラー
CSS3とjQueryを使って作る、フルスクリーンのスクローラー。ウィンドウをスクロールしようとすると、ブラウザウィンドウの縦幅単位でスクロールするアレです。最近じゃAppleなんかも製品ページとかでよく使ってますね。ページ右端には各ページへのダイレクトリンクも用意されており、各ページにはアンカーで飛べる仕組みになっているので、固定リンクも可能。ソースコードはGithubから一式ダウンロードできるようです。全画面背景画像とか、パララックススクロールあたりと組み合わせるのも良いですな。
[CSS] CSS clip-path maker – CSSを使ったクリッピングパスのジェネレーター
CSSを使って画像のクリッピングパスができるジェネレーター。画面左にある様々なシェイプで画像にマスクをかける事ができます。クリップした内容はページ下部にあるコードエリアにリアルタイムに反映されるので、思った通りのクリップパスが描けたらCSSコードをコピペするだけで使えます。ここで使われるプロパティは“clip-path”というもの。シェイプを選んだり修正したりすると、polygonの値が変化します。画像を使わずにコードだけでマスクを切る事ができるので便利ですね。ただ円形についてはグレーアウトしてて選べませんでした。polygonじゃ描けないからなのか、理由はよく分かりませんが、サークルシェイプって最近よく使われる印象なので、そこだけちょっとアレだしナニではあります。
[Web Design] 85+ Free CSS3 jQuery Tab Menus Plugins – CSSとjQueryを使ったタブメニュー
CSS3とjQueryを使ったタブメニューの作例を集めた記事。なんと85の作例がまとめられてます。よくタブメニューという限定されたテーマでこれだけ集めたな・・・と感心せざるを得ません。一般的な水平方向に並んだタブ切り替えはもちろん、垂直方向でのタブ切り替え、アニメーションを併用したものなど色々あります。それぞれリンク先で導入法やデモなどが用意されてるので、タブの作例を探す際に使えそうです。
[Design] Starter Kit – 開発を始める際に便利なスターターキットをまとめたサイト
WebやMobile Appなどの様々な開発を始める際に便利なスターターキットをまとめたサイト。紹介されてる内容がかなり幅広いんだけど、例えばiOSやAndroidなどのMobile Appの開発、Webのデザインに使えるHTMLやCSSの情報リソース、アイコンやイラストなどの画像素材、フォント、マーケティングリソース、SEO、ビデオ、UI / UX関連リソースなどがあります。サイト内の情報はタグ付けされて管理されているので、調べたい分野を絞る事ができます。ある程度知識があれば、いちから自分で作るよりもこうした素材やフレームワークを使った方が効率良く仕事できますしね。なかなかナイスなコンセプトのサイトだと思います。
[CSS3] CSS Gradient Animator – 動くグラデーション背景のジェネレーター
うっすらと背景のグラデーションが動くサイトってたまにありますよね。あれのジェネレーター。このサイトもよく見ると、うっすらとグラデーションが動いてますが、このコードを生成する事ができます。画面左にはグラデーションの方向と、アニメーションの方向指定があり、その下にはグラデーションで使う色の指定があります。色については2色だけでなく3色以上のグラデ指定もできるようです。これらを指定した後で「Preview」ボタンを押すと、サイトの背景に適用されます。指定した内容は随時右側に出てるCSSコードに反映されるので、気に入ったグラデーションが出来たらそれをコピーすればオッケ。いやーこのジェネレーター便利ですな。
[Cheat Sheet] All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery – CSS3やHTML5, jQueryに関するチートシートまとめ
CSS3やHTML5、jQueryに関するチートシートをまとめた記事。世の中にはこういうの便利なものを作ってくれる人がいて、しかもそれぞれ印刷に向いてたりWebで探すのに便利なようにインデックス化されていたりして、色々と便利です。ものによっては的を絞った内容になっていて、例えばHTML5の文章マークアップだけにフォーカスしたチートシートなどもあります。印刷したりMacの壁紙にしたりブックマークしたり、色々な使い道がありそうです。
All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery
[Web Design] Pure CSS parallax scrolling websites – JSを使わないパララックススクロール
Javascriptを使わない、Pure CSSなパララックススクロールの手法が紹介されてます。コードを見るとtransform: translateZ()を使って、ブロック要素をZ軸にズラしているようですが、細かい事は実際に導入してみないと分かりませんね。対象ブラウザはFirefox, Safari, Opera, Chromeとの事なので、ウンコIEさえ無視する事ができれば導入の敷居も低そうです。CSSだけでパララックススクロールの動きを作れるというのはなかなかナイスですな。