#dailycssimages 39 - Keyboard

dailycssimages-39-keyboard.markdown

#dailycssimages 39 - Keyboard

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="box-shadow">
	<div class="text-shadow">
    <i class="fa fa-keyboard-o" aria-hidden="true"></i>
    <div class="spacebar"></div>
  </div>
</div>

script.js

// Source: https://cdn.vectorstock.com/i/composite/94,63/keyboard-flat-icon-vector-3439463.jpg

style.css

.box-shadow {
	width:220px;
	height:220px;
	overflow : hidden;
	display: table;
	margin: 0 auto;
	border-radius:10px;
	background-color : #3398DC;
  position: absolute;
  left: 5em;
  top: 5em;
}

.text-shadow{
  position: relative;
	color: #ffffff;
	font-size: 115px;
	font-weight: bold;
	-webkit-text-stroke: 0px #FFFFFF;
	-moz-text-stroke: 0px #FFFFFF;
	-o-text-stroke: 0px #FFFFFF;
	-webkit-text-stroke: 0px #FFFFFF;
	width: 100%;
	height: 100%;
	text-align: center;
	letter-spacing : 5px;
	line-height: 1;
	display: table-cell;
	vertical-align: middle;
	text-shadow:0px 0px 0px rgb(13, 114, 182) ,
	1px 1px 0px rgb(13, 114, 182) ,
	2px 2px 0px rgb(14, 115, 183) ,
	3px 3px 0px rgb(14, 115, 183) ,
	4px 4px 0px rgb(14, 115, 183) ,
	5px 5px 0px rgb(15, 116, 184) ,
	6px 6px 0px rgb(15, 116, 184) ,
	7px 7px 0px rgb(15, 116, 184) ,
	8px 8px 0px rgb(15, 116, 184) ,
	9px 9px 0px rgb(16, 117, 185) ,
	10px 10px 0px rgb(16, 117, 185) ,
	11px 11px 0px rgb(16, 117, 185) ,
	12px 12px 0px rgb(17, 118, 186) ,
	13px 13px 0px rgb(17, 118, 186) ,
	14px 14px 0px rgb(17, 118, 186) ,
	15px 15px 0px rgb(18, 119, 187) ,
	16px 16px 0px rgb(18, 119, 187) ,
	17px 17px 0px rgb(18, 119, 187) ,
	18px 18px 0px rgb(19, 120, 188) ,
	19px 19px 0px rgb(19, 120, 188) ,
	20px 20px 0px rgb(19, 120, 188) ,
	21px 21px 0px rgb(20, 121, 189) ,
	22px 22px 0px rgb(20, 121, 189) ,
	23px 23px 0px rgb(20, 121, 189) ,
	24px 24px 0px rgb(21, 122, 190) ,
	25px 25px 0px rgb(21, 122, 190) ,
	26px 26px 0px rgb(21, 122, 190) ,
	27px 27px 0px rgb(22, 123, 191) ,
	28px 28px 0px rgb(22, 123, 191) ,
	29px 29px 0px rgb(22, 123, 191) ,
	30px 30px 0px rgb(23, 124, 192) ,
	31px 31px 0px rgb(23, 124, 192) ,
	32px 32px 0px rgb(23, 124, 192) ,
	33px 33px 0px rgb(23, 124, 192) ,
	34px 34px 0px rgb(24, 125, 193) ,
	35px 35px 0px rgb(24, 125, 193) ,
	36px 36px 0px rgb(24, 125, 193) ,
	37px 37px 0px rgb(25, 126, 194) ,
	38px 38px 0px rgb(25, 126, 194) ,
	39px 39px 0px rgb(25, 126, 194) ,
	40px 40px 0px rgb(26, 127, 195) ,
	41px 41px 0px rgb(26, 127, 195) ,
	42px 42px 0px rgb(26, 127, 195) ,
	43px 43px 0px rgb(27, 128, 196) ,
	44px 44px 0px rgb(27, 128, 196) ,
	45px 45px 0px rgb(27, 128, 196) ,
	46px 46px 0px rgb(28, 129, 197) ,
	47px 47px 0px rgb(28, 129, 197) ,
	48px 48px 0px rgb(28, 129, 197) ,
	49px 49px 0px rgb(29, 130, 198) ,
	50px 50px 0px rgb(29, 130, 198) ,
	51px 51px 0px rgb(29, 130, 198) ,
	52px 52px 0px rgb(30, 131, 199) ,
	53px 53px 0px rgb(30, 131, 199) ,
	54px 54px 0px rgb(30, 131, 199) ,
	55px 55px 0px rgb(31, 132, 200) ,
	56px 56px 0px rgb(31, 132, 200) ,
	57px 57px 0px rgb(31, 132, 200) ,
	58px 58px 0px rgb(31, 132, 200) ,
	59px 59px 0px rgb(32, 133, 201) ,
	60px 60px 0px rgb(32, 133, 201) ,
	61px 61px 0px rgb(32, 133, 201) ,
	62px 62px 0px rgb(33, 134, 202) ,
	63px 63px 0px rgb(33, 134, 202) ,
	64px 64px 0px rgb(33, 134, 202) ,
	65px 65px 0px rgb(34, 135, 203) ,
	66px 66px 0px rgb(34, 135, 203) ,
	67px 67px 0px rgb(34, 135, 203) ,
	68px 68px 0px rgb(35, 136, 204) ,
	69px 69px 0px rgb(35, 136, 204) ,
	70px 70px 0px rgb(35, 136, 204) ,
	71px 71px 0px rgb(36, 137, 205) ,
	72px 72px 0px rgb(36, 137, 205) ,
	73px 73px 0px rgb(36, 137, 205) ,
	74px 74px 0px rgb(37, 138, 206) ,
	75px 75px 0px rgb(37, 138, 206) ,
	76px 76px 0px rgb(37, 138, 206) ,
	77px 77px 0px rgb(38, 139, 207) ,
	78px 78px 0px rgb(38, 139, 207) ,
	79px 79px 0px rgb(38, 139, 207) ,
	80px 80px 0px rgb(39, 140, 208) ,
	81px 81px 0px rgb(39, 140, 208) ,
	82px 82px 0px rgb(39, 140, 208) ,
	83px 83px 0px rgb(39, 140, 208) ,
	84px 84px 0px rgb(40, 141, 209) ,
	85px 85px 0px rgb(40, 141, 209) ,
	86px 86px 0px rgb(40, 141, 209) ,
	87px 87px 0px rgb(41, 142, 210) ,
	88px 88px 0px rgb(41, 142, 210) ,
	89px 89px 0px rgb(41, 142, 210) ,
	90px 90px 0px rgb(42, 143, 211) ,
	91px 91px 0px rgb(42, 143, 211) ,
	92px 92px 0px rgb(42, 143, 211) ,
	93px 93px 0px rgb(43, 144, 212) ,
	94px 94px 0px rgb(43, 144, 212) ,
	95px 95px 0px rgb(43, 144, 212) ,
	96px 96px 0px rgb(44, 145, 213) ,
	97px 97px 0px rgb(44, 145, 213) ,
	98px 98px 0px rgb(44, 145, 213) ,
	99px 99px 0px rgb(45, 146, 214) ,
	100px 100px 0px rgb(45, 146, 214) ,
	101px 101px 0px rgb(45, 146, 214) ,
	102px 102px 0px rgb(46, 147, 215) ,
	103px 103px 0px rgb(46, 147, 215) ,
	104px 104px 0px rgb(46, 147, 215) ,
	105px 105px 0px rgb(47, 148, 216) ,
	106px 106px 0px rgb(47, 148, 216) ,
	107px 107px 0px rgb(47, 148, 216) ,
	108px 108px 0px rgb(47, 148, 216) ,
	109px 109px 0px rgb(48, 149, 217) ,
	110px 110px 0px rgb(48, 149, 217) ,
	111px 111px 0px rgb(48, 149, 217) ,
	112px 112px 0px rgb(49, 150, 218) ,
	113px 113px 0px rgb(49, 150, 218) ,
	114px 114px 0px rgb(49, 150, 218) ,
	115px 115px 0px rgb(50, 151, 219) ,
	116px 116px 0px rgb(50, 151, 219) ,
	117px 117px 0px rgb(50, 151, 219) ,
	118px 118px 0px rgb(51, 152, 220) ,
	119px 119px 0px rgb(51, 152, 220);
}

.spacebar {
  position: relative;
  width: 58px;
  height: 9px;
  background-color: #2E3D48;
  top: -46px;
  left: 79px;
  -webkit-animation: 2s blink ease-in infinite;
  -moz-animation: 2s blink ease-in infinite;
  -ms-animation: 2s blink ease-in infinite;
  -o-animation: 2s blink ease-in infinite;
  animation: 2s blink ease-in infinite;
}

@keyframes "blink" {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black
   ;
  }
}

@-moz-keyframes blink {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black
   ;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}

@-ms-keyframes "blink" {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}

@-o-keyframes "blink" {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}