サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
dubdesign.net
2024年4月24日 JavaScriptのgetBoundingClientRect();でカードをクリックしたらカードからモーダルを拡大縮小して表示
CSS /* 001 */ .button001 a { background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 280px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; } .button001 a:hover { background: #313131; color: #FFF; } .button001 a:after { content: ''; width: 5px; height: 5px; border-top
DUB DESiGNはデザインをテーマにしたメディアです。 Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に記事を配信しています。
HTML<div class="l-wrapper_01"> <article class="card_01"> <div class="card__header_01"> <p class="card__title_01">サムネイルのタイトル</p> <figure class="card__thumbnail_01"> <img src="https://dubdesign.net/wp-content/uploads/2020/05/0514_inhouse_designereyecatch.jpg" alt="サムネイル" class="card__image_01"> </figure> </div> <div class="card__body_01"> <p class="card__text2_01">これはカード型のデザインです。これはカード型のデザインです。これはカー
モーダルの中身 ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ HTML <center> <a href="#modal-01" class="modal-button"> モーダルを表示 </a> </center> <div class="modal-wrapper" id="modal-01"> <a href="#!" class="modal-overlay"></a> <div class="modal-window"> <div class="modal-content"> <p class="modal_title">モーダルの中身</p> <p> あああああああああああ
このページを最初にブックマークしてみませんか?
『DUB DESiGN|デザイナーのライフハックメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く