Skip to content

Instantly share code, notes, and snippets.

Bhargav Vadher bhargav2785

View GitHub Profile
View dabblet.css
div.chart-up{
background-color: #D33682;
border: 1px solid #EEE;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
div.chart-down{
background-color: #D33682;
border: 1px solid #EEE;
border-bottom-left-radius: 50%;
@bhargav2785
bhargav2785 / dabblet.css
Created Dec 29, 2012
Pure CSS wave effect *
View dabblet.css
/** Pure CSS wave effect **/
div.wave{
position: relative;
width: 100%;
}
div.wave > span{
float: left;
width: 10%;
height: 200px;
animation: animate 1.5s ease-in-out alternate infinite;
View dabblet.css
/** TRON Clock **/
body{
background-color: black;
}
.tron{
position: relative;
width: 300px;
height: 300px;
}
.tron > span:nth-child(odd){
@bhargav2785
bhargav2785 / dabblet.css
Created Dec 4, 2012
Understanding transition on various browsers
View dabblet.css
/**
Understanding transition on various browsers
**/
.animate{
width: 100px;
height: 100px;
margin: 100px;
background-color: red;
transform: rotate3d(0,1,0,360deg);
@bhargav2785
bhargav2785 / dabblet.css
Created Dec 4, 2012
Understanding transition on various browsers
View dabblet.css
/**
Understanding transition on various browsers
**/
.animate{
width: 100px;
height: 100px;
margin: 100px;
background-color: red;
-webkit-transform: rotate3d(0,1,0,360deg);
@bhargav2785
bhargav2785 / dabblet.css
Created Nov 20, 2012
Round introduction badge *
View dabblet.css
/** Round introduction badge **/
.round-container{
background-image: url(///farm8.staticflickr.com/7032/6455698491_3b0cbcf7e3_s.jpg);
width: 200px;
height: 200px;
background-size: 100% 100%;
border-radius: 50%;
box-shadow: inset 0px 0px 1px 15px rgba(255,255,255,.5);
transition: all .5s ease;
}
View dabblet.css
/** Background **/
background: linear-gradient(bottom,
#333 50%, transparent 50%,
#777 100%);
height: 100%;
View dabblet.css
/**
* CSS shapes
*/
.shape{
margin: 20px auto;
}
.trapezoid{
position: relative;
width: 200px;
height: 200px;
View dabblet.css
/**
* css patterns
*/
div.pattern{
margin: 20px 10%;
height: 200px;
width: 200px;
/widht: 80%;
border: 1px solid #EEE;
View dabblet.css
/* Curved arrow */
.curved-arrow{
position: relative;
left: 100px;
top: 100px;
width: 0;
height: 0;
border-right: 12px solid red;
border-top: 12px solid transparent;
You can’t perform that action at this time.