Eureka UI Kit

Eureka UI Kit.markdown

Eureka UI Kit

(WebKit only - I did my best) A friend of mine, Kévin Bonache, helped me with the UI elements for my game, providing the image on the left. Here I take his static image and turn it into a live demo (on the right).

A Pen by Alex Gryson on CodePen.

License.

index.html

<img src='http://agryson.net/media/cnetests/EUREKA_UI_KIT.png' />

<div class='test_container'>
  <h1>EUREKA UI KIT</h1>
  <div class='left container'>
    <form>
      <input id='noCheck' type='checkbox' />
      <label for='noCheck'>
        <span></span>
      </label>
      <span class='noCheck'>No</span>
      <input id='noRadio' name='eureka' type='radio' />
      <label for='noRadio'>
        <span></span>
      </label>
      <span class='noRadio'>No</span><br><br>
      <input id='hoverCheck' type='checkbox' />
      <label for='hoverCheck'>
        <span></span>
      </label>
      <span class='hoverCheck'>Hover</span>
      <input id='hoverRadio' name='eureka' type='radio' />
      <label for='hoverRadio'>
        <span></span>
      </label>
      <span class='hoverRadio'>Hover</span><br><br>
      <input id='yesCheck'type='checkbox' checked='checked' />
      <label for='yesCheck'>
        <span></span>
      </label>
      <span class='yesCheck'>Yes</span>
      <input id='yesRadio' name='eureka' type='radio' checked='checked' />
      <label for='yesRadio'>
        <span></span>
      </label>
      <span class='yesRadio'>Yes</span>
      <input type='range' class='slider' value='50' min='0' max='100' step='1' />
    </form>
      <span id='slider'>Slider</span>
  </div>
  <div class='right container'>
    <input class='text_input' type='text' placeholder="Dashboard Password"/>
    <div class='btn_container'>
      <button class='grey_btn'>Button</button>
      <button class='green_btn'>Button</button>
      <button class='grey_btn_hover'>Button</button>
      <button class='green_btn_hover'>Button</button>
      <button class='grey_btn_pressed'>Button</button>
      <button class='green_btn_pressed'>Button</button>
    </div>
  </div>
  <div class='dark_green swatch'></div>
  <div class='light_green swatch'></div>
  <div class='light_grey swatch'></div>
</div>

style.css

/*Inputs*/
input[type="checkbox"], input[type="radio"] {
    display:none;
}

/* Check Boxes*/
input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  float: left;
  top: -3px;
  margin: 0 10px 0 25px;
  width:20px;
  height:20px;
  box-shadow: inset -3px 3px 0 0 #303030, inset -2px 1px 3px 2px #1C1C1C, 0 1px 1px -1px #6C6C6C;
  background: #252525;
}

input[type="checkbox"] + label:hover, #hoverCheck + label {
  display:inline-block;
  width:20px;
  height:20px;
  box-shadow: inset -3px 3px 0 0 #303030, inset -2px 1px 3px 2px #1C1C1C, inset -2px 1px 0 3px #13CF0C;
  background: #252525;
}

input[type="checkbox"]:checked + label span {
  display:inline-block;
  width:20px;
  height:20px;
  background: url('http://agryson.net/media/cnetests/check.png') 1px 2px;
}

span.noCheck, span.hoverCheck{
  position: absolute;
  left: 85px;
  color: grey;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Annie Use Your Telescope', cursive;
}

span.yesCheck{
  position: absolute;
  left: 85px;
  color: white;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: 'Annie Use Your Telescope', cursive;
}
/* END ofCheck Boxes*/

/*Radios*/
input[type="radio"] + label{
  position: relative;
  display: inline-block;
  float: right;
  top: 1px;
  right: 100px;
  margin: 0 10px 0 25px;
  width:17px;
  height:17px;
  border-radius: 10px;
  box-shadow: inset 0 0 3px 1px #1C1C1C, 0 1px 1px -1px #9C9C9C;
  background: #252525;
}

span.noRadio, span.hoverRadio{
  position: absolute;
  color: grey;
  left: 200px;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Annie Use Your Telescope', cursive;
}

span.yesRadio{
  position: absolute;
  color: white;
  left: 200px;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: 'Annie Use Your Telescope', cursive;
}

input[type="radio"]:hover + label span, #hoverRadio + label {
  display:inline-block;
  width:17px;
  height:17px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #14960E, 0 1px 1px -1px #9C9C9C;
}

input[type="radio"]:checked + label span {
  display:inline-block;
  width:17px;
  height:17px;
  border-radius: 10px;
  background: -webkit-linear-gradient(bottom, #183617 0%, #14960E 100%);
  background: -moz-linear-gradient(bottom, #183617 0%, #14960E 100%);
  background: -ms-linear-gradient(bottom, #183617 0%, #14960E 100%);
  background: -o-linear-gradient(bottom, #183617 0%, #14960E 100%);
  background: linear-gradient(bottom, #183617 0%, #14960E 100%);
  box-shadow: inset 0 0 0 3px #1C1C1C, 0 1px 1px -1px #9C9C9C;
}
/* END of Radios*/
/* Range Input*/
.slider{
  position: absolute;
  top: 150px;
  left: 55px;
  -webkit-appearance: none;
  outline: none;
  height: 6px;
  width: 150px;
  border-radius: 10px;
  background-color: #222222;
  box-shadow: 0 1px 1px -1px #6C6C6C;
}

.slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 6px;
    width: 22px;
    border-radius: 3px;
    background: url(http://agryson.net/media/cnetests/thumb.png) center center no-repeat;
  box-shadow: 1px 0px 1px #000, inset 0px -1px 3px 2px #285627, inset 0 0 4px 2px #14A60E, inset 0 1px 1px #14A60E;
}
/* END of Range Input*/
/*END of Inputs*/

/*Text Input*/
.text_input{
  position: relative;
  color: #9C9C9C;
  width: 210px;
  height: 8px;
  border-radius: 3px;
  padding: 10px 0 8px 8px;
  left: -27px;
  background: -webkit-linear-gradient(bottom, #232323 0%, #282828 100%);
  background: -moz-linear-gradient(bottom, #232323 0%, #282828 100%);
  background: -ms-linear-gradient(bottom, #232323 0%, #282828 100%);
  background: -o-linear-gradient(bottom, #232323 0%, #282828 100%);
  background: linear-gradient(bottom, #232323 0%, #282828 100%);
  box-shadow: inset 0 0 15px 2px #1F1F1F, inset 0 0 5px #191919;
  border: none;
  outline: none;
}

::-webkit-input-placeholder{
  color: #858585;
  font-size: 0.8em;
}

.text_input:focus{
  box-shadow: 0 0 5px #6F6F6F;
}

.text_input:focus::-webkit-input-placeholder{
  color: #4F4F4F;
  font-size: 0.8em;
}
/* END of Text Input*/

/*Buttons*/
button{
  border: none;
  outline: none;
  border-radius: 5px;
  text-align: center;
  width: 93px;
  height: 39px;
  margin: 10px 0;
  color: white;
  font-size: 13px;
  box-shadow: 2px 2px 30px  #000;
  text-shadow: 1px 1px #1F1F1F;
}

/*Full Button Example: */
.grey_btn{
  background: #3C3C3C;
  box-shadow: inset 1px 1px 4px -2px #9C9C9C, 2px 2px 3px  #1F1F1F;
  background: -webkit-linear-gradient(bottom, #303030 0%, #3C3C3C 100%);
  background: -moz-linear-gradient(bottom, #303030 0%, #3C3C3C 100%);
  background: -ms-linear-gradient(bottom, #303030 0%, #3C3C3C 100%);
  background: -o-linear-gradient(bottom, #303030 0%, #3C3C3C 100%);
  background: linear-gradient(bottom, #303030 0%, #3C3C3C 100%);
  float: left;
}

.grey_btn:hover{
  box-shadow: inset 1px 1px 4px -2px #9C9C9C, 2px 2px 3px  #1F1F1F, inset 0 0 8px #4C4C4C;
  background: -webkit-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -moz-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -ms-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -o-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
}

.grey_btn:active{
  box-shadow: 1px 1px 4px -2px #9C9C9C, inset 1px 1px 5px  #101010;
  background: -webkit-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -moz-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -ms-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -o-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: linear-gradient(bottom, #212121 0%, #292929 100%);
}

.green_btn{
  box-shadow: inset 1px 1px 4px -2px #FFF, 2px 2px 3px  #1F1F1F;
  background: -webkit-linear-gradient(bottom, #284627 0%, #14860E 100%);
  background: -moz-linear-gradient(bottom, #284627 0%, #14860E 100%);
  background: -ms-linear-gradient(bottom, #284627 0%, #14860E 100%);
  background: -o-linear-gradient(bottom, #284627 0%, #14860E 100%);
  background: linear-gradient(bottom, #284627 0%, #14860E 100%);
  float: right;
}

.green_btn:hover, green_btn:focus{
  box-shadow: inset 1px 1px 4px -2px #FFF, 2px 2px 3px  #1F1F1F, inset 0 0 15px 2px #14860E;
  background: -webkit-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -moz-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -ms-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -o-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: linear-gradient(bottom, #285627 0%, #14960E 100%);
}

.green_btn:active{
  box-shadow: 1px 1px 4px -2px #6C6C6C, inset 1px 1px 3px #052005;
  background: -webkit-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -moz-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -ms-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -o-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: linear-gradient(bottom, #073906 0%, #154413 100%);
}

/*Hover: */
.grey_btn_hover{
  box-shadow: inset 1px 1px 4px -2px #9C9C9C, 2px 2px 3px  #1F1F1F, inset 0 0 8px #4C4C4C;
  background: -webkit-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -moz-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -ms-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: -o-linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  background: linear-gradient(bottom, #3A3A3A 0%, #3C3C3C 100%);
  float: left;
}

.green_btn_hover{
  box-shadow: inset 1px 1px 4px -2px #FFF, 2px 2px 3px  #1F1F1F, inset 0 0 15px 2px #14860E;
  background: -webkit-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -moz-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -ms-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: -o-linear-gradient(bottom, #285627 0%, #14960E 100%);
  background: linear-gradient(bottom, #285627 0%, #14960E 100%);
  float: right;
}

/*Pressed: */
.grey_btn_pressed{
  box-shadow: 1px 1px 4px -2px #9C9C9C, inset 1px 1px 5px  #101010;
  background: -webkit-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -moz-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -ms-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: -o-linear-gradient(bottom, #212121 0%, #292929 100%);
  background: linear-gradient(bottom, #212121 0%, #292929 100%);
  float: left;
}

.green_btn_pressed{
  box-shadow: 1px 1px 4px -2px #6C6C6C, inset 1px 1px 3px #052005;
  background: -webkit-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -moz-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -ms-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: -o-linear-gradient(bottom, #073906 0%, #154413 100%);
  background: linear-gradient(bottom, #073906 0%, #154413 100%);
  float: right;
}
/*END of Buttons*/


/*General Boring Stuff */
body {
  background: #3C3C3C;
  background-image: url('http://agryson.net/images/texture.png');
  font-family: 'Poiret One', cursive;
  -webkit-user-select: none;
}

h1{
  color: white;
  font-size: 40px;
  font-weight: 400;
  font-family: 'Quicksand', sans-serif;
}

.test_container{
  text-align: center;
  position: absolute;
  left: 660px;
  top: 9px;
  width: 640px;
  height: 480px;
  background: #303030;
}

.container{
  position: relative;
  float: left;
  width: 270px;
  height: 190px;
  padding: 25px;
  top: -5px;
}

.left{
  left: 0;
}

.right{
  right: 0;
}

.btn_container{
  width: 215px;
  height; 200px;
  padding-top: 10px;
}

.swatch{
  width: 25%;
  height: 10px;
  position: absolute;
  bottom: 0;
}

.dark_green{
  background: #193619;
}
.light_green{
  left: 25%;
  background: #138A0C;
}
 .light_grey{
  right: 0;
  background: #3C3C3C;
}

#slider{
  color: white;
  font-family: 'Annie Use Your Telescope', cursive;
  position: absolute;
  top: 160px;
  left: 135px;
  font-weight: 300;
  letter-spacing: 2px;
}
/* END of General Boring Stuff */