Building a dialog component | Articles | web.dev
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る - Qiita
<section> <form id="sampleForm"> <label> 半角英数字以外を入力してみよう <input type="text" id="input" placeholder="半角英数字で入力" pattern="^[0-9A-Za-z]+$" required> </label> <button type="submit" id="submit">送信</button> </form> </section> <script> "use strict"; var form = document.getElementById("sampleForm"), input = document.getElementById("input"), submit = document.getElementById("submit"); input.addEventListener
CSSのみで、クリックするとGIFアニメが再生されるやつ | かちびと.net
Result 画像をクリックするとGIFアニメが再生される、みたいなやつです。 マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと。 方法はこの手のトリックではお馴染みのinputを利用する形となります。 css label.clicktogif {/*再生ボタン*/ background: url('image.png') DimGrey no-repeat center center; display: block; float: left; } label.clicktogif:hover, label.clicktogif:focus-within {/*再生ボタン、マウスホバー用*/ background: url('hover.png') DarkSlateGrey no-repeat center center; dis
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
