diff options
Diffstat (limited to 'build/aui/index.html')
| -rw-r--r-- | build/aui/index.html | 74 |
1 files changed, 48 insertions, 26 deletions
diff --git a/build/aui/index.html b/build/aui/index.html index 956b6a9..94dfeb7 100644 --- a/build/aui/index.html +++ b/build/aui/index.html @@ -1,41 +1,50 @@ <!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>Aqua UI CSS Buttons</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>Aqua UI CSS Buttons</h1> +<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><figure> -<img src="/public/images/aqua-ui-css-buttons.webp" alt="Old macOS Buttons"> -<figcaption>My initial Dribbble shot, which can be found <a href="https://dribbble.com/shots/4561658-Aqua-Buttons-UI">here</a>.</figcaption> -</figure></p> -<p>Since I've been wanting to dip my toes into more tutorial-based articles (maybe I'll even do some screencasts in the future), I decided to start out simple. Let's walk through how to implement these 'aqua' UI buttons with pure CSS.</p> -<h3>Starting with a basic foundation</h3> -<p>Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward:</p> -<pre><code><button class="cancel">Cancel</button> -<button class="confirm">Confirm</button> + +<p>Since I’ve been wanting to dip my toes into more tutorial-based articles (maybe I’ll even do some screencasts in the future), I decided to start out simple. Let’s walk through how to implement these ‘aqua’ 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><button class="cancel">Cancel</button> +<button class="confirm">Confirm</button> </code></pre> -<h3>Styling the buttons</h3> -<p>The first step is to remove the browser'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> + +<h3 id="styling-the-buttons">Styling the buttons</h3> + +<p>The first step is to remove the browser’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; @@ -43,7 +52,7 @@ border-radius: 125px; box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); cursor: pointer; - font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; + font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; font-size: 2rem; margin: 5rem 1rem; padding: 1.2rem 4rem; @@ -51,26 +60,32 @@ 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; color: #fff; } -</code></pre> -<pre><code>button.cancel { + +button.cancel { background: #D0D0D0; border-color: #B8B8B8; color: #6F6F6F; } </code></pre> -<h3>Playing with pseudo elements</h3> -<p>Now that the button is styled and structured with basic formatting, it's time to add that classic 'shine' seen in the original Dribbble shot.</p> + +<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3> + +<p>Now that the button is styled and structured with basic formatting, it’s time to add that classic ‘shine’ 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; - content:''; + content:''; height: 50px; left: 4%; position: absolute; @@ -79,16 +94,23 @@ width: 92%; } </code></pre> -<h3>Adding interaction</h3> + +<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's it!</p> -<h3>See it live on CodePen</h3> -<p>You can view this project on CodePen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm">here</a>.</p> + +<p>That’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> |