縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。
![これは簡単でいいね!コンテンツの区切りを斜め線にするテクニック(レスポンシブ対応) -Angled Edges](https://cdn-ak-scissors.b.st-hatena.com/image/square/571f0eebf8688bc0fe08bb3362648d11b3012da2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120801.png)
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション12の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの12の基本原則(12 basic principles of animation - Wikipedia)デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
こんにちは、てつです。 実は最近、ブログのシェアボタンをこそっと変えていました。 はてなブログ純正のシェアボタンでもいいのですが、どうもデザインが気に入らず。(特にTwitterボタン) なにか良いシェアボタンないかなーと探していたらいい感じのものがありましたので、今日はブログに簡単に設置でき、デザインもいい感じのシェアボタンを紹介します。 AddThisがいい感じ 海外のツールですが、シェアボタンの設置やフォローボタン、A/Bテストを簡単に行えるAdd thisがいい感じに進化していました。 しかも、このサービスは海外発ですけど、なんとはてなボタンも設置できるんですよ! これは本当にありがたい。 はてなブログはもちろん、Wordpressでブログを運営している人にもオススメのツールです。 AddThisの特徴を説明すると コードのコピペ1発でオシャレなデザインのシェアボタンが設定できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く