html - Font inheriting from transition -


i'm trying make transition stuff -25 degrees want transit "box", not font. thing don't understand how make :before/:after. whenever try via css ignores setting i've made specific container.

.option:hover { font-style: normal !important; background-color: green; cursor: pointer; box-sizing: border-box; transition-property: background; transition-duration: .4s; left: 0; top: 0; -webkit-transform: skew(-25deg); } 

http://jsfiddle.net/3fndahd2/

the thing skew whole div, includes inside. there's no way exclude anything.

there 2 ways around this:

  1. apply opposite skew inner elements, i.e. have additional container text skewed other way around in order straight again. wouldn't this, because may lead blurry result or artifacts.
  2. use css3 pseudo-elements: create element using ::before, give full parent size , skew one. it's outside text, that's not affected transform. in addition, use z-index place behind parent div. jsfiddle

Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -