自分の経験をシェアしたい。Webデザインのテクニック&効率化。
投稿日：
アニメーションは、CSSの方がスピードも速くていいのですが、面倒なのがCSSの指定方法です。
そんな場合に簡単に、CSSアニメーションを作れるのが、「WAIT! Animate」です。
作例では、待機時間と14種類の動きを指定でき、その場でプレビューできます。
コピペできるので、ペーストするだけで動く簡単さです。
カスタムでは、アニメーションの時間や角度など細かく指定できます。
アイコンは、Webフォントを使うと簡単に動きます。
待機時間が指定できるので、ちょっとしたアクセントに便利ですね！
執筆者：KIYOTA
関連記事
アイデアのヒントになる。Swiss Styleを動かしているアニメーション。
Swiss in CSS: animating the International Typographic Styleで、Swiss Styleを動かしているアニメーションが紹介されていました。 Se …
iPhoneのoverflowをスムーズにスクロールさせるCSS
iPhoneでoverflow: scroll;の時に、 -webkit-overflow-scrolling: touch; を追加すれば、滑らかに慣性スクロールできます。 overflow: sc …
最近は、SASSを使えば、フォントサイズをpxからem/%に変換するのは簡単です。 しかし、以前作ったサイトを更新する際に、フォントサイズの一覧がない場合は、pxからem、%に計算するのが面倒です。 …
フラットデザイン向けのシンプルで美しいCSS3グラデーションジェネレーター
「Blend—Generate Simple and Beautiful CSS3 Gradients」は、 フラットデザインにあう色が限定に、 グラデーション用のCSSジェネレーターです。 Blen …
CSSのcalcで、width:100%からマイナスpx指定する
CSSでcalcがあるのを知ってましたが、使いどころがわからずに、放置していました。 例えば、こちらのサンプルのように、レスポンシブなどで、画像の幅は固定し、テキスト部分は伸縮する時に使えますね。 c …
2023/05/05
2022/08/15
Webデザイナーが残業代をもらっていたら、いくらになったのか？
2022/06/12
2022/02/06
2018/10/11
Webデザイナーで、転職がうまくいかない場合のひとつの方法として