I'm trying to create some drivers with a border and text. The drivers need to be tilted so I have applied the transform: skew(); CSS rule. However, now the font and the border have gone really blurry. I understand it is possible to add font smoothing to an element but I'm not sure how to smooth my border as well?
I would like these drivers to be full width of the browser, with no white space after the skew.
CSS -
.flex-inline{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .driver-wrap{ overflow: hidden; margin-bottom: 75px; } .driver{ flex: 1; background-color: #fff; min-height: 250px; position: relative; transform: skew(-15deg, 0deg); -webkit-backface-visibility: hidden; overflow: hidden; cursor: pointer; } .content{ background-image: url('https://i.imgur.com/oKWAofK.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: -50px; right: -50px; bottom: 0; transform: skew(15deg, 0deg); } .text{ position: absolute; bottom: 10px; left: 75px; width: 70%; transform: rotate(360deg); } h2{ font-family: $heading; font-size: 28px; color: #fff; margin: 0px 0px; text-transform: capitalize; } p{ color: #fff; font-size: 18px; margin-top: 5px; } .driver:nth-child(1){ margin-left: -50px; border-right: 20px solid #fdcb6e; } .driver:nth-child(2){ border-right: 20px solid #e84393; } HTML -
<div class="driver-wrap flex-inline"> <div class="driver"> <div class="content"> <div class="text"> <h2>Building training</h2> <p>lorem ipsum text here</p> </div> </div> </div> <div class="driver"> <div class="content"> <div class="text"> <h2>Building training</h2> <p>lorem ipsum text here</p> </div> </div> </div> <div class="driver"> <div class="content"> <div class="text"> <h2>Building training</h2> <p>lorem ipsum text here</p> </div> </div> </div> </div> JSFiddle - https://jsfiddle.net/zhhpm02y/10/
2 Answers
Answers 1
I have yet to see any pure CSS solution to fix blurry text after a transform - but I'm happy to be proven wrong!
I've found it best to never skew or transform text and instead skew the image, border etc., then just position the text over the top. For example:
body { margin: 0; } nav { display: flex; margin-left: -54px; overflow: hidden; } article { position: relative; width: 100%; } section { min-width: 300px; margin-top: 130px; margin-left: 70px; } aside { background-image: url('https://i.redd.it/kvowi2zio7h01.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; transform: skew(-15deg, 0deg); transform-origin: bottom center; z-index: -1; width: 100%; height: 200px; } aside::after { content: ""; height: 100%; position: absolute; border-right: 20px solid #fdcb6e; } article:nth-child(2n) aside::after { border-right-color: #e84393; } h2 { font-family: Verdana; font-size: 25px; color: #fff; margin: 0; } p { color: #fff; font-size: 18px; margin-top: 5px; }<nav> <article> <section> <h2>Building training</h2> <p>lorem ipsum text here</p> </section> <aside></aside> </article> <article> <section> <h2>Building training</h2> <p>lorem ipsum text here</p> </section> <aside></aside> </article> <article> <section> <h2>Building training</h2> <p>lorem ipsum text here</p> </section> <aside></aside> </article> </nav>Update: Following some comments below, the <nav> is 100% of the window width and shifted left to remove the initial gap created by the skew. The <aside> is now width: 110% which removes the end gap.
Update 2: I was never happy with the width:110% to remove the end gap so I've now used transform-origin: bottom center; to make the skew leave the bottom edge alone (so the transformation is around the middle point on the bottom edge), thereby never actually creating an end gap! A few margins were adjusted for the text in the latest code too.
Answers 2
Whether transforms causes blurriness are browser and renderer specific artifacts.
I find that Firefox tend to be able to render text after transformations without blurriness better than Chrome in general. Your example worked without modifications and without blurriness in Firefox (Linux, with Intel graphic).
In my machine, if you remove -webkit-backface-visibility: hidden; from .driver, Chrome will also render the text without getting blurry.
The better general solution is usually to avoid transforming texts. And instead add text after transforming everything else that isn't text.
0 comments:
Post a Comment