Skip to content

Instantly share code, notes, and snippets.

View stanwmusic's full-sized avatar
🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
108 followers · 737 following
View GitHub Profile
@stanwmusic
stanwmusic / Vertical-Centering.markdown
Created March 18, 2014 01:13
A Pen by Eric.
@stanwmusic
stanwmusic / Navigation-menus-using-CSS-flexbox.markdown
Created March 18, 2014 05:02
A Pen by Terry Mun.

Navigation menus using CSS flexbox

A simple demonstration of three very common ways of arranging and sizing menu items, all achieved with the help of CSS flexbox.

A Pen by Terry Mun on CodePen.

License.

@stanwmusic
stanwmusic / Collapsible-Hover-Table-of-Contents.markdown
Created March 18, 2014 07:30
A Pen by Joe Schmoe.
@stanwmusic
stanwmusic / animar-un-sinus-sobre-una-cuadricula.markdown
Created March 18, 2014 07:41
A Pen by Jesús.
@stanwmusic
stanwmusic / Background-Image-Slideshow-Menu.markdown
Created March 19, 2014 02:34
A Pen by Stan Williams.

Background Image Slideshow Menu

This is a slideshow using background images in divs. The advantage is you can use inset box shadows and can place text in the divs as captions.I added links.

A Pen by Stan Williams on CodePen.

License.

@stanwmusic
stanwmusic / cssPanelMenu.markdown
Created March 19, 2014 03:10
A Pen by Stan Williams.
@stanwmusic
stanwmusic / index.html
Created March 19, 2014 07:11
A Pen by Stan Williams.
<ul class="navigation">
<li><a href="#" target="_blank">
<h2>Home</h2></a>
<p></p>
</li>
<li><a href="#" target="_blank">
<h2>Media</h2></a>
<p>Music/Photos</p>
</li>
<li><a href="#" target="_blank">
@stanwmusic
stanwmusic / Pure-CSS3-breadcrumb-navigation,--pixel-perfect-.markdown
Created March 19, 2014 07:21
A Pen by Stan Williams.

Pure CSS3 breadcrumb navigation, pixel perfect

The problem with most CSS3 based breadcrumbs is that they use border based triangles for the arrows which is awful because:

  1. Hover effects are not pixel perfect - hovering on the arrows creates issues because they appear to be triangles but occupy a square region. So hovering/clicking at the edge of a link could trigger the event on the next/previous link actually.

  2. You cannot use gradients on borders which means you are stuck with flat colored breadcrumb links.

  3. You cannot animate the links along with the arrows using CSS3 transitions.

@stanwmusic
stanwmusic / Jquery-and-CSS3-powered-Lightbox-Gallery.markdown
Created March 19, 2014 07:30
A Pen by Stan Williams.
@stanwmusic
stanwmusic / Glazing-ribbon-screensaver-effect-in-HTML5-canvas.markdown
Created March 19, 2014 09:39
A Pen by Stan Williams.

Glazing ribbon screensaver effect in HTML5 canvas

Randomly moving invisible particles connected with colored lines(strokes) produces this cool effect.

Blending the colors using globalCompositeOperation gives the glaze to the ribbons

A Pen by Stan Williams on CodePen.

License.