Skip to content

Instantly share code, notes, and snippets.

@ryderr

ryderr/textbgmask.css

Created July 25, 2012 21:21
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. ryderr revised this gist Aug 19, 2012. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions textbgmask.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@
    margin: 0;
    padding: 0;
    float: left;
    height: 500px;
    width:100%;
    height: 400px;
    width:400px;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    @@ -34,6 +34,8 @@
    .block:hover h1 {
    cursor: pointer;
    display: table-cell;
    text-shadow:0px 0px 0px white;
    text-shadow:0px 0px 0px transpaent;
    opacity:0.5;
    color:black;
    -webkit-text-stroke: 1px black;
    }​
  2. ryderr revised this gist Aug 19, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions textbgmask.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,24 @@
    .block {
    display: table;
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
    height: 250px;
    width:250px;
    height: 500px;
    width:100%;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background:black url(http://img.gawkerassets.com/img/17twy6q7m9o2ljpg/medium.jpg)no-repeat center;
    background-size:cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }

    .block h1 {
    font-size: 2.2rem;
    font-size: 8.2rem;
    text-decoration: none;
    vertical-align: middle;
    font-weight:bold;
  3. ryderr revised this gist Aug 19, 2012. 1 changed file with 29 additions and 29 deletions.
    58 changes: 29 additions & 29 deletions textbgmask.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,39 +1,39 @@

    .block {
    display: table;
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
    height: 250px;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background:white url(img.jpg)no-repeat center;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: table;
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
    height: 250px;
    width:250px;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background:black url(http://img.gawkerassets.com/img/17twy6q7m9o2ljpg/medium.jpg)no-repeat center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }

    .block h1 {
    font-size: 2.2rem;
    text-decoration: none;
    vertical-align: middle;
    font-weight:bold;
    display: table-cell!important;
    padding: 0 20px;
    font-size: 2.2rem;
    text-decoration: none;
    vertical-align: middle;
    font-weight:bold;
    display: table-cell!important;
    padding: 0 20px;
    }

    .block:hover {
    background:black;
    -webkit-background-clip: none!important;
    background-clip:content-box;
    }

    .block:hover h1 {
    cursor: pointer;
    display: table-cell;
    text-shadow:0px 0px 0px white;
    color:black;
    }
    cursor: pointer;
    display: table-cell;
    text-shadow:0px 0px 0px white;
    color:black;
    }​
  4. ryder ripps revised this gist Jul 26, 2012. No changes.
  5. ryder ripps created this gist Jul 25, 2012.
    39 changes: 39 additions & 0 deletions textbgmask.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@

    .block {
    display: table;
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
    height: 250px;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background:white url(img.jpg)no-repeat center;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }

    .block h1 {
    font-size: 2.2rem;
    text-decoration: none;
    vertical-align: middle;
    font-weight:bold;
    display: table-cell!important;
    padding: 0 20px;
    }

    .block:hover {
    background:black;
    }

    .block:hover h1 {
    cursor: pointer;
    display: table-cell;
    text-shadow:0px 0px 0px white;
    color:black;
    }