diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/notice | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/notice')
| -rw-r--r-- | build/notice/index.html | 68 |
1 files changed, 44 insertions, 24 deletions
diff --git a/build/notice/index.html b/build/notice/index.html index 573a2d2..b0aa333 100644 --- a/build/notice/index.html +++ b/build/notice/index.html @@ -1,32 +1,42 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>RE: Creating a Simple HTML/CSS Notice Box</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>RE: Creating a Simple HTML/CSS Notice Box</h1> +<h1 id="re-creating-a-simple-htmlcss-notice-box">RE: Creating a Simple HTML/CSS Notice Box</h1> + <p>2022-09-22</p> -<p>I recently read Kev Quirk's post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML/CSS Notice Box</a> and loved the simplicity of it. I'm a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements...</p> -<h2>Bad Semantics</h2> + +<p>I recently read Kev Quirk’s post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML/CSS Notice Box</a> and loved the simplicity of it. I’m a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements…</p> + +<h2 id="bad-semantics">Bad Semantics</h2> + <p>I need to make it clear right away: <strong>these implementations are not semantic</strong>. They are valid HTML, but I am technically using these tags incorrectly. <em>You have been warned!</em></p> -<h2>Setting Fieldsets</h2> + +<h2 id="setting-fieldsets">Setting Fieldsets</h2> + <p>The first approach is to wrap everything inside HTML <code>fieldset</code> tags:</p> -<pre><code><fieldset> - <legend>Notice</legend> - <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.</p> -</fieldset> + +<pre><code><fieldset> + <legend>Notice</legend> + <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.</p> +</fieldset> </code></pre> -<p>Then you can include minor styling to closely match the design of Kev's notice box:</p> + +<p>Then you can include minor styling to closely match the design of Kev’s notice box:</p> + <pre><code>fieldset { border: 3px solid; font-family: sans-serif; @@ -45,14 +55,19 @@ fieldset legend { text-transform: uppercase; } </code></pre> -<h2>The Devil is in the Details</h2> + +<h2 id="the-devil-is-in-the-details">The Devil is in the Details</h2> + <p>The other option is utilizing the HTML <code>details</code> tag:</p> -<pre><code><details open> - <summary>Notice</summary> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?</p> -</details> + +<pre><code><details open> + <summary>Notice</summary> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?</p> +</details> </code></pre> -<p>You'll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + +<p>You’ll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + <pre><code>details { border: 3px solid; font-family: sans-serif; @@ -68,16 +83,21 @@ details summary { text-transform: uppercase; } </code></pre> -<p>Important to note: you can hide the default "arrow toggle" on <code>summary</code> elements by including the following:</p> -<pre><code>details > summary { + +<p>Important to note: you can hide the default “arrow toggle” on <code>summary</code> elements by including the following:</p> + +<pre><code>details > summary { list-style: none; } -details > summary::-webkit-details-marker { +details > summary::-webkit-details-marker { display: none; } </code></pre> -<h2>Seeing is Believing</h2> -<p>I've put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + +<h2 id="seeing-is-believing">Seeing is Believing</h2> + +<p>I’ve put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/jOxLdQP">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> |