ひたすらハンバーガーアイコンを作ったので9種のソースを公開します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。 これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き 動き出す前の傾きとバーの位置をtransformで調整をします。 こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
