Wednesday, January 31, 2018
Copy to clipboard CSS LESS SCSS .parallelogram { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 150px; height: 100px; border: none; font: normal 100em/normal Arial, Helvetica, sans-serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(-90deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: -moz-linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); } .parallelogram:hover { background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; }
Copy to clipboard
CSS
LESS
SCSS
.parallelogram {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 150px;
height: 100px;
border: none;
font: normal 100em/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-90deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71;
background: -moz-linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71;
background: linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71;
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg);
transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg);
}
.parallelogram:hover {
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment