EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

/* ---------------------------------------------------------------------
 Base Styles
------------------------------------------------------------------------ */

.isHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    clip: rect(1px 1px 1px 1px) !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    overflow: hidden !important;
}

img { max-width: 100%; }

/* ---------------------------------------------------------------------
 Base
------------------------------------------------------------------------ */

body {
    background-color: black;
    background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    -webkit-animation: move-back 3s infinite linear;
}

@-webkit-keyframes move-back {
    0% {background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;}
    100% {background-position: 550px 0, 390px 60px, 380px 270px, 220px 100px;}
}

.stage {
    position: relative;
    margin: 50px 0 0 100px;
}

/* ---------------------------------------------------------------------
 Text
------------------------------------------------------------------------ */

.info {
    position: absolute;
    top:600px;
    left: 50px;
    color: #f6f6f6;
    text-transform: uppercase;
    font-size: 22px;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    text-shadow: 3px 3px 5px #5590c6;
}

.info-hd { margin-bottom: 15px; }

.hdg {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 4px;
}

/* ---------------------------------------------------------------------
 Disc
------------------------------------------------------------------------ */

.disc {
    position: absolute;
    opacity: 1;
    border-radius: 50%;
    -webkit-transform: rotate(-28deg);
}

.disc_main {
    width: 635px;
    height: 300px;
    top: 70px;
    left: 20px;
    z-index: 42;
    box-shadow: -2px 0px 1px 1px #6b6b6b;
    background: rgb(206,206,206); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.disc_shadow {
    width: 645px;
    height: 320px;
    top: 70px;
    left: 20px;
    z-index: 41;
    background: rgb(54,54,54); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(54,54,54,1) 1%, rgba(131,131,131,1) 11%, rgba(228,228,228,1) 26%, rgba(228,228,228,1) 56%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(54,54,54,1)), color-stop(11%,rgba(131,131,131,1)), color-stop(26%,rgba(228,228,228,1)), color-stop(56%,rgba(228,228,228,1)), color-stop(79%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.disc_ring1 {
    width: 460px;
    height: 210px;
    top: 95px;
    left: 110px;
    z-index: 43;
    box-shadow: 2px 2px 3px 2px #fff;
    background: rgb(206,206,206); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.disc_ring1:after {
    position: absolute;
    border-radius: 50%;
    content: "";
    width: 460px;
    height: 210px;
    top: 0px;
    left: 0px;
    box-shadow: -3px 0px 2px 0px #6b6b6b;
}

.disc_ring2 {
    width: 350px;
    height: 160px;
    top: 115px;
    left: 165px;
    z-index: 44;
    box-shadow: 5px 0px 0px -1px #6b6b6b;
}

.disc_ring2:after {
    position: absolute;
    border-radius: 50%;
    content: "";
    width: 350px;
    height: 160px;
    top: 0px;
    left: 0px;
    box-shadow: -5px 0px 0px -1px #fff;
}

.disc_ring3 {
    width: 295px;
    height: 125px;
    top: 128px;
    left: 195px;
    z-index: 45;
    box-shadow: 2px 2px 3px 2px #fff;
    background: rgb(206,206,206); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.disc_ring3:after {
    position: absolute;
    border-radius: 50%;
    content: "";
    width: 295px;
    height: 125px;
    top: 0px;
    left: 0px;
    box-shadow: -3px 0px 2px 0px #6b6b6b;
}

.disc_bridge1 {
    width: 30px;
    height: 20px;
    top: 170px;
    left: 323px;
    z-index: 61;
    border: 1px solid #d9d9d9;
    background: rgb(75,75,75); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(75,75,75,1) 0%, rgba(188,188,188,1) 23%, rgba(255,255,255,1) 44%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(75,75,75,1)), color-stop(23%,rgba(188,188,188,1)), color-stop(44%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.disc_bridge2 {
    width: 40px;
    height: 30px;
    top: 166px;
    left: 319px;
    z-index: 60;
    box-shadow: 2px 2px 1px 1px #fff;
    background: #e5e5e5;
}

.disc_bridge2:after {
    position: absolute;
    border-radius: 50%;
    content: "";
    width: 40px;
    height: 30px;
    top: 0px;
    left: 0px;
    box-shadow: -3px 0px 1px 1px #6b6b6b;
}

/* ---------------------------------------------------------------------
 Spine
------------------------------------------------------------------------ */

.spine {
    position: absolute;
    opacity: 1;
}

.spine_discTip {
    top: 120px;
    left: 145px;
    width: 100px;
    height: 200px;
    background: #c8c8c8;
    border-radius: 50%;
    z-index: 30;
}

.spine_discFront {
    top: 145px;
    left: 143px;
    width:0;
    height:35px;
    border-right:350px solid #c8c8c8;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
    z-index: 59;
    -webkit-transform: skew(-40deg) rotate(13deg);
}

.spine_discBack {
    top: 203px;
    left: 437px;
    width:0;
    height: 61px;
    border-left:156px solid #c8c8c8;
    border-top: 2px solid transparent;
    border-bottom: 0px solid transparent;
    z-index: 59;
    -webkit-transform: skew(-39deg) rotate(14deg);
}

.spine_discSide1 {
    top: 167px;
    left: 152px;
    width:0;
    height: 6px;
    border-left: 91px solid #4b4b4b;
    border-top: 0px solid transparent;
    border-bottom: 8px solid transparent;
    z-index: 58;
    -webkit-transform: rotate(20deg);
}

.spine_discSide2 {
    top: 209px;
    left: 236px;
    width:0;
    height: 6px;
    border-right: 160px solid #4b4b4b;
    border-top: 0px solid transparent;
    border-bottom: 3px solid transparent;
    z-index: 58;
    -webkit-transform: rotate(19.5deg);
}

.spine_discSide3 {
    top: 250px;
    left: 370px;
    width:0;
    height: 12px;
    border-right: 135px solid #4b4b4b;
    border-top: 0px solid transparent;
    border-bottom: 22px solid transparent;
    z-index: 58;
    -webkit-transform: rotate(18deg);
}

.spine_discSide4 {
    top: 268px;
    left: 458px;
    width: 32px;
    height:0;
    border-top:50px solid #4b4b4b;
    border-left:50px solid transparent;
    border-right:0px solid transparent;
    z-index: 58;
    -webkit-transform: rotate(16deg);
}

.spine_curve1 {
    top: 177px;
    left: 192px;
    width: 29px;
    height: 5px;
    border-radius: 50%;
    background: #eaeaea;
    z-index: 59;
    -webkit-transform: rotate(14deg);
}

.spine_curve2 {
    top: 211px;
    left: 236px;
    width: 148px;
    height: 10px;
    border-radius: 50%;
    background: #eaeaea;
    z-index: 59;
    -webkit-transform: rotate(21deg);
}

.spine_curve3 {
    top: 260px;
    left: 399px;
    width: 33px;
    height: 5px;
    border-radius: 50%;
    background: #eaeaea;
    z-index: 59;
    -webkit-transform: rotate(25deg);
}

.spine_pulseEngine1 {
    top: 219px;
    left: 552px;
    width:50px;
    height:40px;
    opacity: 1;
    -webkit-transform: rotate(14deg);
    background: rgb(234,46,65); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(234,46,65,1) 81%, rgba(132,26,45,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(81%,rgba(234,46,65,1)), color-stop(100%,rgba(132,26,45,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#841a2d',GradientType=1 ); /* IE6-9 */
}

.spine_pulseEngine2 {
    top: 254px;
    left: 503px;
    width:90px;
    height:50px;
    z-index: 31;
    -webkit-transform: rotate(-42deg);
    background: #ea2e41;
}

.spine_pulseEngine3 {
    top: 264px;
    left: 503px;
    width:90px;
    height: 49px;
    opacity: 1;
    z-index: 57;
    -webkit-transform: rotate(15deg);
    background: rgb(234,46,65); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(234,46,65,1) 37%, rgba(75,75,75,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(37%,rgba(234,46,65,1)), color-stop(100%,rgba(75,75,75,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#4b4b4b',GradientType=1 ); /* IE6-9 */

}

.spine_engineTop1 {
    top: 310px;
    left: 495px;
    width:0;
    height: 13px;
    border-left: 440px solid #e3e3e3;
    border-top: 2px solid transparent;
    border-bottom: 20px solid transparent;
    z-index: 58;
    -webkit-transform: skew(-37deg) rotate(20deg);
}

.spine_engineTop1:before {
    position: absolute;
    top: -2px;
    left: -430px;
    content:"";
    width:10px;
    height: 34px;
    z-index: 70;
    background: rgb(200,200,200); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(200,200,200,1) 0%, rgba(227,227,227,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(200,200,200,1)), color-stop(100%,rgba(227,227,227,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#e3e3e3',GradientType=1 ); /* IE6-9 */
}

.spine_engineTop2 {
    top: 332px;
    left: 522px;
    width:0;
    height: 0px;
    border-left: 350px solid #4b4b4b;
    border-top: 0px solid transparent;
    border-bottom: 45px solid transparent;
    z-index: 56;
    -webkit-transform: rotate(22.5deg);
}

.spine_engineBottom1 {
    top: 346px;
    left: 640px;
    width:0;
    height: 30px;
    border-left: 300px solid #d7d7d7;
    border-top: 3px solid transparent;
    border-bottom: 35px solid transparent;
    z-index: 39;
    -webkit-transform: skew(-25deg) rotate(20deg);
}

.spine_engineBottom2 {
    top: 309px;
    left: 510px;
    width: 150px;
    height: 25px;
    z-index: 40;
    -webkit-transform: skew(-25deg) rotate(18deg);
    background: rgb(234,46,65); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(234,46,65,1) 0%, rgba(234,46,65,1) 21%, rgba(215,215,215,1) 34%, rgba(215,215,215,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(234,46,65,1)), color-stop(21%,rgba(234,46,65,1)), color-stop(34%,rgba(215,215,215,1)), color-stop(100%,rgba(215,215,215,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */

}

.spine_engineBottom3 {
    top: 334px;
    left: 595px;
    width: 130px;
    height: 30px;
    border-radius: 50%;
    z-index: 31;
    -webkit-transform: rotate(16deg);
    background: #d7d7d7;
}

.spine_engineBottom4 {
    top: 397px;
    left: 908px;
    width: 20px;
    height: 37px;
    border-radius: 50%;
    z-index: 60;
    -webkit-transform: rotate(42deg);
    background: #d7d7d7;
}

.spine_engineBottom5 {
    top: 357px;
    left: 590px;
    width:0;
    height: 40px;
    border-left: 370px solid #4f4f4f;
    border-top: 3px solid transparent;
    border-bottom: 35px solid transparent;
    z-index: 20;
    -webkit-transform: skew(-25deg) rotate(18deg);
}

.spine_engineBottom6 {
    top: 276px;
    left: 454px;
    width: 150px;
    height:50px;
    z-index: 20;
    -webkit-transform: rotate(38deg);
    background: #212121;
}

.spine_engineBottom7 {
    top: 298px;
    left: 547px;
    width: 130px;
    height: 80px;
    border-radius: 50%;
    z-index: 20;
    -webkit-transform: rotate(8deg);
    background: rgb(33,33,33); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(33,33,33,1) 0%, rgba(79,79,79,1) 62%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(33,33,33,1)), color-stop(62%,rgba(79,79,79,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* IE10+ */
    background: linear-gradient(to right,  rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#4f4f4f',GradientType=1 ); /* IE6-9 */
}

.spine_engineBottom8 {
    top: 413px;
    left: 904px;
    width: 60px;
    height: 47px;
    border-radius: 50%;
    z-index: 20;
    -webkit-transform: rotate(18deg);
    background: #4f4f4f;
}

.spine_engineBottom9 {
    top: 414px;
    left: 900px;
    width: 60px;
    height: 38px;
    border-radius: 50%;
    z-index: 21;
    -webkit-transform: rotate(18deg);
    background: rgb(63,63,63); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(63,63,63,1) 0%, rgba(247,247,247,1) 39%, rgba(247,247,247,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,63,63,1)), color-stop(39%,rgba(247,247,247,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

/* ---------------------------------------------------------------------
 Engine Wings
------------------------------------------------------------------------ */

.engine {
    position: absolute;
    opacity: 1;
}

.engine_wingLeft {
    top: 392px;
    left: 698px;
    width:55px;
    height:0;
    z-index: 10;
    border-bottom:55px solid #ededed;
    border-left:0px solid transparent;
    border-right:50px solid transparent;
}

.engine_wingRight {
    top: 48px;
    left: 850px;
    width:43px;
    height:0;
    z-index: 11;
    border-top: 380px solid #878787;
    border-left: 105px solid transparent;
    border-right:0px solid transparent;
    -webkit-transform: rotate(75deg);
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 148px 380px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
    color-stop(0.00,  rgba(0,0,0,0)),
    color-stop(0.15,  rgba(0,0,0,0)),
    color-stop(0.151,  rgba(0,0,0,1)),
    color-stop(1.00,  rgba(0,0,0,1)));
}

.engine_wingRight:before {
    position: absolute;
    top: -390px;
    left: -90px;
    content: "";
    width: 80px;
    height: 80px;
    background: #000;
    z-index: 100;
}

.engine_wingRight:after {
    position: absolute;
    top: -400px;
    left: 40px;
    content: "";
    width: 5px;
    height: 400px;
    z-index: 101;
    -webkit-transform: rotate(0deg);background: rgb(33,33,33); /* Old browsers */
    background: #616161;
}

.engine_wingRightLight {
    top: 250px;
    left:761px;
    width: 50px;
    height: 150px;
    z-index: 11;
}

/* ---------------------------------------------------------------------
 Warp Engines
------------------------------------------------------------------------ */

#engineRight {
    position: absolute;
    top: 153px;
    left: 950px;
    z-index:70;
    -webkit-transform: rotate(15deg);
}

#engineLeft {
    position: absolute;
    top: 446px;
    left: 710px;
    z-index:70;
    -webkit-transform: rotate(15deg) scale(1.3);
}

.engine_warp1 {
    position: absolute;
    width: 230px;
    height: 60px;
    background: #757575;
    z-index:53;
}

.engine_warpText {
    position: absolute;
    top: 12px;
    left: 23px;
    width: 230px;
    height: 60px;
    color: #2d2d2d;
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    font-weight: 700;
    z-index:54;
}

.engine_warp2 {
    position: absolute;
    left: 250px;
    width:0;
    height: 27px;
    border-left: 180px solid #8d8d8d;
    border-top: 10px solid transparent;
    border-bottom: 20px solid transparent;
}

.engine_warp2:after {
    position: absolute;
    content: "";
    top: -31px;
    left: -260px;
    width: 130px;
    height: 49px;
    border-radius: 50%;
    z-index: -100;
    -webkit-transform: rotate(-2deg);
    background: rgb(215,215,215); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(215,215,215,1) 1%, rgba(215,215,215,1) 48%, rgba(228,228,228,1) 67%, rgba(228,228,228,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(215,215,215,1)), color-stop(48%,rgba(215,215,215,1)), color-stop(67%,rgba(228,228,228,1)), color-stop(100%,rgba(228,228,228,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#e4e4e4',GradientType=1 ); /* IE6-9 */
}

.engine_warp2:before {
    position: absolute;
    content: "";
    top: -10px;
    left: -263px;
    width: 130px;
    height: 60px;
    border-radius: 50%;
    z-index:-1;
    -webkit-transform: rotate(-2deg);
    background: rgb(117,117,117); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(117,117,117,1) 1%, rgba(117,117,117,1) 48%, rgba(141,141,141,1) 66%, rgba(141,141,141,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(117,117,117,1)), color-stop(48%,rgba(117,117,117,1)), color-stop(66%,rgba(141,141,141,1)), color-stop(100%,rgba(141,141,141,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#8d8d8d',GradientType=1 ); /* IE6-9 */
}

.engine_warp3 {
    position: absolute;
    left: -110px;
    width:0;
    height: 28px;
    border-right: 90px solid #5d5d5d;
    border-top: 0px solid transparent;
    border-bottom: 30px solid transparent;
    z-index:51;
}

.engine_warp3:before {
    position: absolute;
    content: "";
    left: 82px;
    width:30px;
    height: 27px;
    z-index:-1;
    -webkit-transform: rotate(-2deg);
    background: rgb(93,93,93); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(93,93,93,1) 0%, rgba(117,117,117,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(93,93,93,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#757575',GradientType=1 ); /* IE6-9 */
}

.engine_warp3:after {
    position: absolute;
    content: "";
    top: 11px;
    left: 56px;
    width:130px;
    height: 49px;
    border-radius: 50%;
    z-index:-1;
    -webkit-transform: rotate(-2deg);
    background: rgb(93,93,93); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(93,93,93,1) 0%, rgba(93,93,93,1) 19%, rgba(117,117,117,1) 40%, rgba(117,117,117,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(93,93,93,1)), color-stop(19%,rgba(93,93,93,1)), color-stop(40%,rgba(117,117,117,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#757575',GradientType=1 ); /* IE6-9 */
}

.engine_warp4 {
    position: absolute;
    top: -20px;
    left: 5px;
    width: 230px;
    height: 20px;
    background: #d7d7d7;
    z-index:50;
    -webkit-transform: skew(-30deg);
}

.engine_warp5 {
    position: absolute;
    top: -12px;
    left: 252px;
    width:0;
    height: 10px;
    border-left: 185px solid #e4e4e4;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    z-index:50;
    -webkit-transform: skew(-25deg) rotate(5deg);
}

.engine_warp6 {
    position: absolute;
    top: -14px;
    left: -107px;
    width:0;
    height: 10px;
    border-right: 90px solid #bbbbbb;
    border-top: 0px solid transparent;
    border-bottom: 8px solid transparent;
    z-index:50;
    -webkit-transform: skew(-25deg) rotate(-5deg);
}

.engine_warp6:before {
    position: absolute;
    content: "";
    top: -1px;
    left: 25px;
    width: 130px;
    height: 49px;
    border-radius: 50%;
    z-index: -1;
    -webkit-transform: rotate(-2deg);
    background: rgb(187,187,187); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(187,187,187,1) 0%, rgba(187,187,187,1) 34%, rgba(215,215,215,1) 72%, rgba(215,215,215,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(187,187,187,1)), color-stop(34%,rgba(187,187,187,1)), color-stop(72%,rgba(215,215,215,1)), color-stop(99%,rgba(215,215,215,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* IE10+ */
    background: linear-gradient(to right,  rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */
}

.engine_exhaust1 {
    position: absolute;
    content: "";
    top: 3px;
    left: 275px;
    width: 300px;
    height: 32px;
    border-radius: 50%;
    z-index: -1;
    box-shadow: 20px 0px 10px #5590c6;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%, rgba(30,87,153,1) 42%, rgba(75,133,190,1) 58%, rgba(111,171,220,0.7) 71%, rgba(125,185,232,0.47) 76%, rgba(125,185,232,0) 86%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(42%,rgba(30,87,153,1)), color-stop(58%,rgba(75,133,190,1)), color-stop(71%,rgba(111,171,220,0.7)), color-stop(76%,rgba(125,185,232,0.47)), color-stop(86%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.engine_exhaust2 {
    position: absolute;
    content: "";
    top: 3px;
    left: 275px;
    width: 300px;
    height: 32px;
    border-radius: 50%;
    z-index: -1;
    box-shadow: 60px 1px 20px #5590c6;
    background: transparent;
    -webkit-animation: flicker .07s infinite linear;
}

@-webkit-keyframes flicker {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

HTML

</div>

</div>

<div class="info">
            <div class="info-hd"><h1 class="hdg">CSS Enterprise</h1></div>
            <div class="info-bd">Built in HTML and CSS, for Chrome eyes only</div>
        </div>

</div>

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com