fix
Matt Wing
Ran into @enjoycss today and made an awesome button in like 30 seconds. Check it out if you hate coding CSS like me!
Proceed(9)
Thanks for your like.
You've done it, haven't you?
{"sid":"zO","rid":2,"page":"code","page_params":[],"username":""}
Skip
Next

We'll add only required prefixes
for browsers you gonna choose,
based on data from caniuse.com
4+
4+
9+
10.5+
4+
5.0+
2.1+
7+
Hide default rules
Copy to clipboard
HTML
<div class="front_upper">ЗАГОЛОВОК ГРАФИКА</div>
Copy to clipboard
CSS
LESS
SCSS
.front_upper {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  position: relative;
  padding: 3%;
  border: none;
  font: normal normal bold 12px/normal Verdana, Geneva, sans-serif;
  color: rgba(0, 0, 0, 0.560784);
  text-align: right;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgb(254,254,254) 0, rgb(254,254,254) 4%, rgb(244,244,244) 100%), -webkit-linear-gradient(-90deg, #fefefe 0, #fefefe 4%, #f4f4f4 100%), rgba(0,0,0,0);
  background: -moz-linear-gradient(180deg, rgb(254,254,254) 0, rgb(254,254,254) 4%, rgb(244,244,244) 100%), -moz-linear-gradient(180deg, #fefefe 0, #fefefe 4%, #f4f4f4 100%), rgba(0,0,0,0);
  background: linear-gradient(180deg, rgb(254,254,254) 0, rgb(254,254,254) 4%, rgb(244,244,244) 100%), linear-gradient(180deg, #fefefe 0, #fefefe 4%, #f4f4f4 100%), rgba(0,0,0,0);
  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: rotateZ(-90deg)   ;
  transform: rotateZ(-90deg)   ;
  -webkit-transform-origin: 90% 100% 0;
  transform-origin: 90% 100% 0;
}

.front_upper::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 90%;
  height: 50%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  border: none;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0, 0, 0, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  background: -moz-linear-gradient(180deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  background: linear-gradient(180deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  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;
  text-shadow: none;
  -webkit-transform:   translateY(-100%) ;
  transform:   translateY(-100%) ;
  -webkit-transform-origin: 100% 100% 0;
  transform-origin: 100% 100% 0;
}

.front_upper::after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 10%;
  height: 50%;
  position: absolute;
  content: "";
  top: 0;
  left: 90%;
  border: none;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0, 0, 0, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  background: -moz-linear-gradient(180deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  background: linear-gradient(180deg, rgb(165,166,170) 0, rgb(199,199,201) 100%), rgba(0,0,0,0);
  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;
  text-shadow: none;
  -webkit-transform:   translateY(-100%) skewX(22deg);
  transform:   translateY(-100%) skewX(22deg);
  -webkit-transform-origin: 100% 100% 0;
  transform-origin: 100% 100% 0;
}