マーブル、ウォーターカラー、ウッド、ブラー、グランジなど背景デザインに役立つ素材全30種類です。 シンプルで使いやすそうなものから使い所は難しいですが上手く利用すれば独特な表現をできそうなものまで様々なものがあります。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti

メモしていたものが溜まってきて一覧化したのでシェアします。 以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。 もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :) 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

グローバルナビゲーションといえば作り込んだ感じのデザインや移動先のページの内容が把握しやすいようなアイコンなどを一緒に配置しているものをやはり多く見かけますが、中には特にミニマルデザインなサイトなどでテキストだけを並べたシンプルな水平メニューを取り入れているサイトもあります。 ただパッと見はたしかにシンプルなデザインでもホバー時にアニメーションを加えたりしているサイトも多く、自分も普段からそのようなデザインの時にはせめてホバーぐらいはちょっと手を加えたいなと思うことが多いので、その際に参考になりそうなホバーエフェクトを備忘録兼ねてまとめました。 全体的にボーダーを組み合わせたようなエフェクトが多く、実装は全てCSSで可能なものになっています。 Creative Link Effects 少し前のものですが全21種類のエフェクトがまとめられており、ボーダーやテキストにアニメーションを加えて様

画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ