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); }
the thing skew whole div, includes inside. there's no way exclude anything.
there 2 ways around this:
- 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.
- 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
Post a Comment