Skip to content

Instantly share code, notes, and snippets.

View MichaelSRose's full-sized avatar

Michael S Rose MichaelSRose

  • self
  • Columbia, Maryland USA
View GitHub Profile
@MichaelSRose
MichaelSRose / index.html
Created September 10, 2017 19:23
Progress Nav
<nav class="toc">
<ul>
<li><a href="#intro">Intro</a></li>
<li>
<a href="#dev">Developer Mode</a>
<ul>
<li><a href="#dev-edit-html">Edit HTML</a></li>
<li><a href="#dev-element-classes">Element Classes</a></li>
<li><a href="#dev-slide-classes">Slide Classes</a></li>
<li><a href="#dev-export-html">Export HTML</a></li>
@MichaelSRose
MichaelSRose / css-camera.markdown
Created September 6, 2017 08:58
CSS Camera
@MichaelSRose
MichaelSRose / index.html
Created August 15, 2017 22:14
WrOqma
<body>
<div class="MainContent">
Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page.
</div>
<div class="Footer">
However, thanks to flexbox, I've been put in my place.
</div>
</body>
@MichaelSRose
MichaelSRose / index.html
Created August 14, 2017 07:22
Mana Button
<div class="row middle-on-small center-on-small">
<div class="column small-12 medium-6 large-4">
<a href="#!" class="c-button c-button--gooey">
Need mana
<div class="c-button__blobs">
<div></div>
<div></div>
<div></div>
</div>
</a>
@MichaelSRose
MichaelSRose / css-overlay-navigation-animation.markdown
Created August 14, 2017 07:20
CSS Overlay Navigation Animation
@MichaelSRose
MichaelSRose / index.html
Created August 14, 2017 07:17
Info on Hover
<!-- Instead of using the 'title' attribute, simply use 'data-info' -->
<h1>Info on Hover!</h1>
<h2>Prettifying the 'title' attribute without Javascript!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <dfn data-info="Lorem ipsum dolor sit amet, perspiciatis consectetur dolor.">Perspiciatis consectetur</dfn> Et delectus ut neque quod porro maiores est. Asperiores aspernatur rerum, explicabo ipsa consequatur, accusantium <dfn data-info="Lorem ipsum dolor sit amet.">provident optio</dfn> officia maxime libero sint esse.</p>
<p>Lorem ipsum dolor sit amet, perspiciatis consectetur adipisicing elit. Dolor perspiciatis deserunt adipisci rem deserunt iste nulla tenetur. <dfn data-info="Lorem ipsum dolor sit amet, perspiciatis consectetur dolor.">Iste aliquid perspiciatis</dfn> dolorem laborum, nulla fugit accusamus possimus id tenetur officiis, impedit necessitatibus illo!</p>
@MichaelSRose
MichaelSRose / demo-four-levels-of-enhancement.markdown
Created July 27, 2017 16:22
Demo: Four levels of enhancement
@MichaelSRose
MichaelSRose / css-only-image-slider-using-svg-patterns.markdown
Created July 17, 2017 17:49
CSS-only image slider using SVG patterns

CSS-only image slider using SVG patterns

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.

CHANGELOG

Added will-change property to improve performance.

A Pen by Damián Muti on CodePen.

@MichaelSRose
MichaelSRose / index.html
Created April 29, 2017 00:16
SVG Line Loader (success)
<div class="container">
<svg class="lineSVG" version="1.1" x="0px" y="0px" width="900px" height="600px" viewBox="0 0 900 600">
<defs>
<filter id="glow" width="400%" x="-50%" y="-50%" height="200%">
<feGaussianBlur stdDeviation="2 2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
@MichaelSRose
MichaelSRose / index.html
Created January 18, 2017 21:07
input field with underline under each character
<input maxlength='7' value='0123456'/>