e1blue

<nav class="menu">
  <ol>
    <li class="menu-item">
      <a href="#0" class="home">
        <i class="ion ion-md-home"></i>
        <span>Home</span>
      </a>
    </li>
    <li class="menu-item">
      <a href="#0" class="about">

e1blue

<div id="app">
	<div class="search">
		<div class="icon">
			<div class="circle"></div>
			<div class="bar"></div>
		</div>
		<div class="search-input">
			<input type="text" placeholder="Search..." v-model="searchQuery">
		</div>
	</div>

e1blue

Click & hold menu with rxjs observables

A Pen by Jason Weaver on CodePen.

License.

e1blue

<div id="app">
	
</div>

e1blue

<div id="app"></div>

e1blue

<div id="app" :style="{background: gradient}">
	<div class="container">
		<transition-group name="flip-list" tag="ul">
			<li v-for="(color,index) in colors" :key="color.id" :class="{shake : color.last}">
								<div class="move">
					<button class="up" @click="up(index)" v-if="index>0"></button>
					<button class="down" @click="down(index)" v-if="index<colors.length-1"></button>
				</div>
				<input type="text" v-model.trim="color.hex" maxlength="7" :style="{color: color.hex}" :class="{pin : color.disabled}" :disabled="color.disabled">
				<button @click="lockColor(index)" :class="{locked : color.disabled}"></button>

e1blue

<div class="header">
  <h1>Waves</h1>
  <p>Waves generated with javascript and &lt;canvas&gt;.</p>
</div>
<div class="canvas-wrap">
  <canvas id="canvas"></canvas>
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate rerum nemo, autem. Maiores quibusdam asperiores iste laboriosam deleniti quo ratione voluptatem expedita temporibus facere velit cum nesciunt, doloremque ducimus consequuntur numquam, accusamus porro a quam. Perspiciatis quo voluptates dolores error temporibus optio, placeat minus deserunt accusamus, doloribus repellat sed ut!</p>
  <p>Beatae ullam repellendus tempore, dicta excepturi necessitatibus magnam praesentium illum voluptates nihil, fugiat est, corporis. Reiciendis veritatis facere reprehenderit nemo quod temporibus ea assumenda nulla iure, mollitia beatae debitis consequuntur a blanditiis quasi suscipit eos ab repellendus deleniti fuga accusamus officia maxime perferendis modi! Fugiat libero incidunt sunt nostrum harum?</p>

e1blue

<div id="app"></div>

e1blue

canvas#mycanvas

e1blue

<svg id="symbols">
  <symbol id="square" viewBox="0 0 128 128">
    <path style="fill:none;stroke:#aad400;stroke-width:4px;stroke-linecap:square;" d="M35,43 l0,40 l30,0 l0,-40 l30,0 l0,40" />
  </symbol>
  <symbol id="sawtooth" viewBox="0 0 128 128">
    <path style="fill:none;stroke:#c83737;stroke-width:4px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l30,-40 l0,40 l30,-40 l0,40"/>
  </symbol>
  <symbol id="triangle" viewBox="0 0 128 128">
    <path style="fill:none;stroke:#2a7fff;stroke-width:4px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l17,-40 l17,40 l17,-40 l17,40"/>
  </symbol>