Gamification Message Box. So you can add animation interest to your basic notifications. This is an example jankoatwarpspeed shared that i extended for my own uses.
A Pen by michael hood on CodePen.
michael hood siliconhacker
siliconhacker
/ Gamification-Message-Box.markdown
Created
August 22, 2013 07:09
A CodePen by michael hood.
siliconhacker
/ Link-out-and-fade-in!.markdown
Last active
September 2, 2016 20:39
Link out and fade in!
The goal of this model was to have a slick gamified way to go through a series of links or tags. Then when all the tags are completed present a final tag for consumption.
Click away each of the three links then a new link will appear. This is user driven easter egg style content.
A Pen by michael hood on CodePen.
siliconhacker
/ Dyanmic-Scrolling-Content.markdown
Last active
September 2, 2016 20:40
Dynamic Scrolling Content
making an endless page style. this was an example of adding divs as you scroll down the page.
code inspired by adam khoury background by Auke Zwart
A Pen by michael hood on CodePen.
siliconhacker
/ Sweet-Question-Validation-Form-Template.markdown
Last active
September 2, 2016 20:43
Smoke Out Validation Form
The goal is to have a reusable form to capture a series of question for account registration.
Simple form layout for ease of reuse when cloning multiple registration steps and swapping controls.
Gamified form is a user proof way of getting a full name.
Customized basic validation to keep the user honest.
The goal is to have a user proof way of getting a date. Using either clicks or key strokes. Surprisingly, i could not just find an example of this. The js could use some logic to dynamically create the days and years.
View the original article and download the Sass source at: cssflow.com/snippets/dark-and-light-dropdown-lists
Original PSD by Hemn Chawroka.
A Pen by michael hood on CodePen.
siliconhacker
/ index.html
Last active
September 2, 2016 20:41
tight and simple Positive Alert ui widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="positiveAlertIcon"> | |
| <ul id="positiveAlertInfo"> | |
| <li><i class="ui-icon ui-icon-info"></i></li> | |
| <li class="soft">Step</li> | |
| <li> </li> | |
| <li>1 of 4</li> | |
| </ul> | |
| </div> |
siliconhacker
/ Image-Click-Selects-Dropdown-Item.markdown
Last active
September 2, 2016 20:41
Image Click Selects Dropdown Item
i was looking for a nice little combo tool that would assist the user by letting the click an image or use the drop down tool. I found this slick code written by Will Bontrager Software; its perfect!
Select the wallpaper of your choice by clicking on it. Alternatively, use the dropdown list.
A Pen by michael hood on CodePen.
I see beautiful forms all over the web with the default check boxes, UGG!
My goal is to have some really slick looking checkboxes at will work in asp net and html5.
Furthermore, I did not want checkboxes based on loading images.
This css will port right into an asp.net site and all asp:checkbox objects will render the same look and feel.
siliconhacker
/ Gamification-Message-Box.markdown
Last active
September 2, 2016 20:42
Gamification Message Box
The goal was to add animation interest to your basic notifications. The Gamification Message Box was created. This features responsive design and floats above content. So you can grad the users attention with 1 of the 4 animations. This is an example jankoatwarpspeed inspired that i extended for my own uses. background by by Atle Mo (design), Sébastien Grosjean (code)
A Pen by michael hood on CodePen.
This was my initial stab at doing some three dimensional coding using JavaScript instead of CSS.
I added a star gate to have a sweet animation. This is not part of the original star wars world but maybe i have insider knowledge and it will be in the new part 7 released by Disney. Where Disney gets rid of that old tired jump to light speed and bring an interstellar teleportation device known as the star gate.
My goal is to have some html 5 3D under my belt.
No css logic included for the 3D.
OlderNewer