ウォーターカラーエフェクト(水彩画風)を取り入れているwebデザインのまとめです。 ウォーターカラーはふわっと優しい雰囲気のサイトによく使われている印象があり、以下で紹介させていただくのもそういった感じのサイトが多めですが、それ以外にもクールなデザインや幻想的な雰囲気を持つデザインなどもあります。 また、特にこれから水彩画風デザインをやってみようと思う方には参考になると思うチュートリアルエントリーも併せて紹介します。
ウォーターカラーエフェクト(水彩画風)を取り入れているwebデザインのまとめです。 ウォーターカラーはふわっと優しい雰囲気のサイトによく使われている印象があり、以下で紹介させていただくのもそういった感じのサイトが多めですが、それ以外にもクールなデザインや幻想的な雰囲気を持つデザインなどもあります。 また、特にこれから水彩画風デザインをやってみようと思う方には参考になると思うチュートリアルエントリーも併せて紹介します。
実際の動きは以下デモで確認できます。 CSSで実装する CSSで実装したい場合はopacityを使った透過処理をanimation, @keyframesを使ったアニメーションと組み合わせる形で実装できます。 a:hover { opacity: 1; -webkit-animation-duration: 1s; -webkit-animation-name: flash; animation-duration: 1s; animation-name: flash; } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } 上記を記述することで、a要素にホバーした時に一瞬だけ点滅す
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く