stanwmusic

<div id="app">
  <div :class="['bg', bg]">
    <header>
      <nav>
        <ul>
          <li><a class="link-bio" href="#bio" @click="bg = 'bio'">Bio</a></li>
          <li><a class="link-projects" href="#projects" @click="bg = 'projects'">Projects</a></li>
          <li><a class="link-find-me" href="#findme" @click="bg = 'find-me'">Find Me</a></li>
        </ul>
      </nav>

stanwmusic

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 179 486">
  <g>
  <path id="f1-start" fill="currentColor" d="M35.022 11.674H15.565V89.5h15.566v11.674H15.565v108.957H0V0h35.022z"/>
  <path id="f1-end" fill="transparent" d="M35.022 0v11.674H15.565V32.5h15.566v11.674H15.565V72H0V0z"/>
  <path id="f2-start" fill="currentColor" d="M35.022 231v11.674H15.565V308.5h15.566v11.674H15.565V393H0V231z"/>
<path id="f2-end" fill="transparent" d="M35.022 93v11.674H15.565V170.5h15.566v11.674H15.565V255H0V93z"/>
  <path id="f3-start" fill="currentColor" d="M35.022 414v11.674H15.565V446.5h15.566v11.674H15.565V486H0v-72z"/>
  <path id="f3-end" fill="transparent" d="M35.022 287.674H15.565V365.5h15.566v11.674H15.565v108.957H0V276h35.022z"/>
  </g>
  <g>

stanwmusic

<main id="app">
    
    <header>
        <h1>Tailwind Outside Rounded Corners</h1>
        <p>Simple outside corners using a <strong><code>radial mask</code></strong>, allowing the background to be
            exposed without any need for fake background colors. <strong>
            Even works with Gradients/Images!</strong></p>
        <p>Also <a href="https://github.com/simeydotme/tailwind-rounded-out" target="_blank">available as a Tailwind Plugin</a></p>
    </header>

stanwmusic

Chrome: CSS Scroll Based Animations

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<p class="click">Go ahead, click on it :D</p>
<div id="nav-toggle">
  <div id="nav-toggle-text">
    <span id="nav-toggle-text-open">MENU</span>
    <span id="nav-toggle-text-close">Close</span>
  </div>
<svg version="1.1" width="100px" height="100px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;">
<style type="text/css">
  .st0{fill: SLATEGREY;}
  .st1{fill: SLATEGREY;}

stanwmusic

Cross-browser peeling paper effect with transforms

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<!-- only needed to hold the filter, 
		 functionally the same as a style element, 
 		 so hide it from screen readers & zero its dimensions -->
<svg aria-hidden='true' width='0' height='0'>
	<!-- reduce filter area to exact input dimensions -->
	<filter id='extract' x='0' y='0' width='1' height='1'>
		<feComponentTransfer>
			<!-- the number of table values n (2 here) determines 
					 the number of equal sub-intervals the input alpha interval [0, 1] 
					 is split into; this number is n - 1 = 2 - 1 = 1 here

stanwmusic

CSS Tooltips (Before & After)

A set of Material design inspired tooltips. Made with Ai support. Base of CSS with a sprinkle of JS.

Fonts & Icons from https://fonts.google.com

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<div class="paper">
	<div class="grain"></div>

	<!-- ══ MASTHEAD ══ -->
	<div class="masthead">
		<div class="m-left">
			<span>Vol. LXIV</span> · <span>No. 4</span>
		</div>
		<div class="m-center">THE BEACH TOWN GAZETTE</div>
		<div class="m-right">

stanwmusic

<textarea id="default">Howdy, World!</textarea>