css– category –
-
cssで背景固定・フルワイドブロックをすりガラス加工
https://youtu.be/KhSf77ZjWfs YouTubeで見る -
0130グループレッスン／css
①写真の角を丸くする ②カバーブロックの角を丸くする ③WP forms lite の文字被リンク ④SWELLボタンの文字色変更 ⑤メインビジュアルの動画ループ停止 https://youtu.be/baMpFVc-9SM -
CSS「ハンバーガーメニューのデザイン応用編」
こちらのカスタマイズはWordPressテーマ「SWELL」を使っている場合を前提として説明しています。 ハンバーガーメニュー（正式名称：スマホ開閉メニュー）を自分好みにカスタマイズする方法をお伝えします。実際の完成見本はこちら↓ https://youtube.com/sh... -
css「メインビジュアルの背景固定」
https://youtu.be/8JVdjf6Jdik YouTubeで見る コードこちら /*ここからフロントページカスタム*/ /* メインビジュアル領域を固定*/ .p-mainVisual .p-mainVisual__imgLayer, /* メインビジュアル画像・動画 */ .p-mainVisual .c-filterLayer::before, .p-m... -
css「固定ページのタイトルを非表示にする」
https://youtu.be/855aFUlH8Dk YouTubeで見る /* タイトル非表示 */ .c-pageTitle { display: none; } .l-content { padding-top: 0; } .l-mainContent__inner>.post_content { margin-top: 0; } -
CSS「すりガラス風の追従ヘッダー」
https://youtu.be/ww3twxL4byU YouTubeで見る /*** PCの追従ヘッダー ***/ .l-fixHeader::before { opacity: 0.64; /*背景を透明に*/ } .l-fixHeader{ backdrop-filter: blur(5px); /*背景をぼかす*/ -webkit-backdrop-filter: blur(5px); } /*** モバイル... -
ふわっと画面を切り替えるエフェクト
https://youtu.be/6x3kCXrzdss YouTubeで見る ※SWELLの機能ではなくcssで入れる場合はこちら /* 画面フェード */ body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } -
CSSホバーアニメーション
https://youtu.be/S4dpYvFqzIc YouTubeで見る .lean{transform: rotate(0deg);/傾きをなくす/transition: all 0.3s;/傾く速度/} .lean:hover{transform: rotate(5deg);/どれぐらい傾けるか/transition: all 0.3s;} ↓傾きを大きくする .lean2{transform: ro...
1