[B! CSS3][css] fumiruiのブックマーク

ひたすらハンバーガーアイコンを作ったので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. よくみかける動き動き出す前の傾きとバーの位置をtransf ormで調整をします。こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;

fumirui 2018/05/23

リンク

CSSで実現！目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ

普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。 HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめコピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニ

fumirui 2017/08/20

リンク

::before,::after擬似要素を使って、よくあるパターンをつくってみよう。

2015年12月07日 ::before,::after擬似要素を使って、よくあるパターンをつくってみよう。コーダーのあーだこーだこんにちは。コーディングファクトリー部　コーダーの丸山です。このコーナーでは、コーディングファクトリーの仕事のスタイルや、深堀りしたコーディング技術をメインにお伝えしていきたいと思っています。また、コーダーが各々のコーディング論を語る座談会なども企画してますのでお楽しみに！今回は私がこの要素を知ってから（コーディングの）世界観が変わった！というCSSの要素の一つである『::before,::after擬似要素』の特徴とコーディング例をご紹介します。 ::before,::after擬似要素とは擬似要素（pseudo elements）は、W3Cによると"文書言語(HTML)に記された以上の抽象概念や情報を与えるもの"とされています。::before

fumirui 2017/07/04

css
CSS3

リンク

:before, :after擬似要素の使い方を基本からマスターするためのチュートリアル | コリス

擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。擬似クラス、擬似要素擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。サポートブラウザブラウザ「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利

fumirui 2017/06/29

リンク

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。色によっては、蛍光ペンや絵筆みたいにもできますね。デモページ ※リンク切れ実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。スラッシュで区切ることにより、水平

fumirui 2016/11/14

リンク

【第2弾】少しのコードで実装可能な20のCSS小技集

2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！目次画像を丸く表示 1本線のテーブル 1本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズ Webフォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット線のオフセット設定 HTML・CSSの全