aboutsummaryrefslogtreecommitdiff
path: root/build/aui/index.html
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-06-08 13:43:37 -0400
committerBradley Taunt <bt@btxx.org>2024-06-08 13:43:37 -0400
commit16d28628aca9b2d356de31c319f5e7bc0f5b2b02 (patch)
tree11947abb71e38cbe75116871694a44c33d257763 /build/aui/index.html
parentdcfb172704f3afb68a30425029ec834be2883274 (diff)
Remove incorrectly generated files, fix up markdown articles
Diffstat (limited to 'build/aui/index.html')
-rw-r--r--build/aui/index.html28
1 files changed, 2 insertions, 26 deletions
diff --git a/build/aui/index.html b/build/aui/index.html
index 94dfeb7..c897c3c 100644
--- a/build/aui/index.html
+++ b/build/aui/index.html
@@ -3,11 +3,12 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Aqua UI CSS Buttons</title>
<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>
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}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>
@@ -16,35 +17,23 @@
<main>
<h1 id="aqua-ui-css-buttons">Aqua UI CSS Buttons</h1>
-
<p>2016-06-28</p>
-
<p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p>
-
<p>Since I&#8217;ve been wanting to dip my toes into more tutorial-based articles (maybe I&#8217;ll even do some screencasts in the future), I decided to start out simple. Let&#8217;s walk through how to implement these &#8216;aqua&#8217; UI buttons with pure CSS.</p>
-
<h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3>
-
<p>Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward:</p>
-
<pre><code>&#60;button class="cancel"&#62;Cancel&#60;&#47;button&#62;
&#60;button class="confirm"&#62;Confirm&#60;&#47;button&#62;
</code></pre>
-
<h3 id="styling-the-buttons">Styling the buttons</h3>
-
<p>The first step is to remove the browser&#8217;s default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p>
-
<pre><code>button {
-webkit-appearance: none;
-moz-appearance: none;
}
</code></pre>
-
<p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p>
-
<p>(Pay attention to the <code>transition</code> property as we will be returning to that shortly)</p>
-
<pre><code>button {
-webkit-appearance: none;
-moz-appearance: none;
@@ -60,9 +49,7 @@
transition: all ease .3s;
}
</code></pre>
-
<p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p>
-
<pre><code>button.confirm {
background: #4A90E2;
border-color: #3672B6;
@@ -75,13 +62,9 @@ button.cancel {
color: #6F6F6F;
}
</code></pre>
-
<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3>
-
<p>Now that the button is styled and structured with basic formatting, it&#8217;s time to add that classic &#8216;shine&#8217; seen in the original Dribbble shot.</p>
-
<p>The cleanest way to do this is by using the <code>:before</code> pseudo element paired with a linear-gradient background.</p>
-
<pre><code>button:before {
background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
border-radius: 125px;
@@ -94,23 +77,16 @@ button.cancel {
width: 92%;
}
</code></pre>
-
<h3 id="adding-interaction">Adding interaction</h3>
-
<p>The final step is adding the user hover interaction: (Remember that <code>transition</code> property?)</p>
-
<pre><code>button:hover {
box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
transform: scale(1.02);
}
</code></pre>
-
<p>That&#8217;s it!</p>
-
<h3 id="see-it-live-on-codepen">See it live on CodePen</h3>
-
<p>You can view this project on CodePen here.</p>
-
<p>Feel free to fork it or implement your own!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>