Skip to content

Instantly share code, notes, and snippets.

View owngeek's full-sized avatar

owngeek owngeek

View GitHub Profile
owngeek / select_option_styling.html
Created June 3, 2016 13:34
Html Select option Styling
<option class="font1" value="volvo">Volvo</option>
<option class="font2" value="saab">Saab</option>
<option class="font3" value="opel">Opel</option>
<option class="font4" value="audi">Audi</option>
owngeek / select_option_styling.html
Created June 3, 2016 13:56
Html Select option Styling
.font1{ font-style:italic;}
.font3{ font-weight:600;}
.font4{ background-color:#0CC}
owngeek / select_option_underline.html
Created June 3, 2016 14:00
Html Select option Styling (underline)
li, span {text-decoration: underline; }
.ui-selectmenu-button { width:150px !important; }
owngeek / gradient_hover.html
Created June 14, 2016 07:14
CSS3 Gradient hover Transition
<div class="box"></div>
owngeek / gradient_hover.css
Last active January 25, 2017 21:35
CSS3 Gradient hover Transition
.box{ width:300px; height:300px; background-color:#30F; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.box:hover{ background-color: #ff007c;
background-color: rgba(255,0,124,0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9,157,179,0.6)), to(transparent));
background-image: -webkit-linear-gradient(top, rgba(9,157,179,0.6), transparent);
background-image: -moz-linear-gradient(top, rgba(9,157,179,0.6), transparent);
background-image: -o-linear-gradient(top, rgba(9,157,179,0.6), transparent);
background-image: linear-gradient(to bottom, rgba(9,157,179,0.6),transparent);
#collapse * {
#collapse ul li {
.title{ width:100%; float:left; color:#fbfbfb; font-size:16px; margin-left:25px; font-family:"Arial Black", Gadget, sans-serif}
/*-----Both Horizontally and Vertically--------*/
.wrpr{background-color: #999999; position:relative; height:500px; width:500px; float:left;}
.centre{ width:200px; height:200px; background-color:#C30; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
/*-----Both Horizontally and Vertically--------*/
/*-----one element in horizontaly centre --------*/
.wrpr2{background-color: #999900; height:500px; width:500px; margin:0; float:left; }
.rollover figure {
position: relative;
overflow: hidden;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
.rollover figure figcaption {
div {
width: 100px;
height: 100px;
background-color: #990;
position: absolute;
left: 0;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;