diff options
Diffstat (limited to 'build/aui')
| -rw-r--r-- | build/aui/index.html | 28 |
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’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 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; @@ -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’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; @@ -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’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> |