Skip to content

Instantly share code, notes, and snippets.

@hussienliban

hussienliban/dabblet.css

Created March 28, 2012 10:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hussienliban/2225323 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hussienliban/2225323 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hussienliban revised this gist Mar 28, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}
  2. hussienliban revised this gist Mar 28, 2012. 2 changed files with 16 additions and 11 deletions.
    19 changes: 12 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,20 +4,25 @@ body{

    .point{
    display: inline-block;
    background: #26B4FF;
    width: 200px;
    background: #23A8EF;
    width: 150px;
    height: 100px;
    border-radius: 8px;
    margin: 100px 50px;
    box-shadow:0 1px 0 #E8FEFF,inset 0 -1px 1px rgba(0,0,0,0.2);
    margin: 100px 0px 0 40px;
    box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px rgba(0,0,0,0.2);
    position: relative;
    color: white;
    font: normal 18px/90px verdana;
    text-align: center;
    -moz-transition: background 0.2s linear;
    }
    .point:hover{
    -moz-animation: delete 0.4s infinite 0.5s;
    box-shadow:inset 0 0 1px 1px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.3);
    -moz-animation: delete 0.4s infinite 1.3s;
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.3);
    background: #26B4FF;
    }
    .delete{
    opacity: 0;-moz-transition: all 0.1s linear 0.4s;
    opacity: 0;-moz-transition: all 0.1s linear 1.3s;
    position: absolute;
    display: inline-block;
    right: 5px;
    8 changes: 4 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
    <div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
    <div class='point'>～だけあって<a class='delete' href='#'>X</a></div>
    <div class='point'>～だけあって<a class='delete' href='#'>X</a></div>


  3. hussienliban revised this gist Mar 28, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -22,14 +22,14 @@ position: absolute;
    display: inline-block;
    right: 5px;
    top: 5px;
    font: bold 46px/17px 'Entypo';
    font: bold 36px/11px 'Entypo';
    color: #eee;
    text-shadow: 0 0.5px 0 #FF1C1C;
    text-decoration: none;
    background: #FF1C1C;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    height: 20px;
    width: 20px;
    text-align: center;
    box-shadow: 0 1px 0 #FFCBCB;
    text-shadow: 0 1px 0 #666;
  4. hussienliban revised this gist Mar 28, 2012. 2 changed files with 23 additions and 14 deletions.
    28 changes: 18 additions & 10 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,25 +9,33 @@ body{
    height: 100px;
    border-radius: 8px;
    margin: 100px 50px;
    box-shadow:0 1px 0 #E8FEFF,inset 0 0 1px 1px rgba(0,0,0,0.1);
    box-shadow:0 1px 0 #E8FEFF,inset 0 -1px 1px rgba(0,0,0,0.2);
    position: relative;
    }
    .point:hover{
    -moz-animation: delete 0.4s infinite 0.5s;
    box-shadow:inset 0 0 1px 1px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.3);
    }
    .point:hover .delete:after{

    opacity: 1;
    content: 'X';
    .delete{
    opacity: 0;-moz-transition: all 0.1s linear 0.4s;
    position: absolute;
    display: block;
    display: inline-block;
    right: 5px;
    top: -12px;
    font: bold 55px 'Entypo';
    color: #FF1C1C;
    top: 5px;
    font: bold 46px/17px 'Entypo';
    color: #eee;
    text-shadow: 0 0.5px 0 #FF1C1C;
    text-decoration: none;
    background: #FF1C1C;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    text-align: center;
    box-shadow: 0 1px 0 #FFCBCB;
    text-shadow: 0 1px 0 #666;
    }
    .delete:after{opacity: 0;-moz-translate: opacity 0.5s linear 0.5s;}
    .point:hover .delete{opacity: 1;}

    @-moz-keyframes delete {
    0%{-moz-transform: rotate(0deg)}
    33%{ -moz-transform: rotate(-3deg)}
    9 changes: 5 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>
    <div class='point'><a class='delete' href='#'>X</a></div>


  5. hussienliban created this gist Mar 28, 2012.
    36 changes: 36 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    body{
    background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF;
    }

    .point{
    display: inline-block;
    background: #26B4FF;
    width: 200px;
    height: 100px;
    border-radius: 8px;
    margin: 100px 50px;
    box-shadow:0 1px 0 #E8FEFF,inset 0 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
    }
    .point:hover{
    -moz-animation: delete 0.4s infinite 0.5s;
    }
    .point:hover .delete:after{

    opacity: 1;
    content: 'X';
    position: absolute;
    display: block;
    right: 5px;
    top: -12px;
    font: bold 55px 'Entypo';
    color: #FF1C1C;
    text-shadow: 0 0.5px 0 #FF1C1C;
    }
    .delete:after{opacity: 0;-moz-translate: opacity 0.5s linear 0.5s;}
    @-moz-keyframes delete {
    0%{-moz-transform: rotate(0deg)}
    33%{ -moz-transform: rotate(-3deg)}
    66%{-moz-transform: rotate(3deg) scale(1.01) }
    99.99%{-moz-transform: rotate(0deg)}
    }
    5 changes: 5 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>
    <div class='point'><div class='delete'></div></div>

    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"css"}