css3 – CSS transform skew without blur – Stack Overflow

0
78

css3 – CSS transform skew without blur – Stack Overflow

css3 – CSS transform skew without blur – Stack Overflowhttps://stackoverflow.com/questions/48874231/css-transform-skew-without-blur
CSS transform skew without blur

Vote count:
4

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://ift.tt/2NevFvq);
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 –

Building training

lorem ipsum text here

Building training

lorem ipsum text here

Building training

lorem ipsum text here

JSFiddle –
https://ift.tt/2tX8Q6A

edited Feb 27 at 9:29

asked Feb 19 at 21:11

Sam

2 Answers

Vote count:
5accepted

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: -27px;
overflow: hidden;
}

article {
position: relative;
width: 100%;
}

section {
min-width: 300px;
margin-top: 130px;
margin-left: 35px;
}

aside {
background-image: url(‘https://ift.tt/2tIrTCe);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: 0;
transform: skew(-15deg 0deg);
z-index: -1;
width: 110%;
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;
}

Building training

lorem ipsum text here

Building training

lorem ipsum text here

Building training

lorem ipsum text here

Update: Following some comments below the
is 100% of the window width and shifted left to remove the initial gap created by the skew. The is now width: 110% which removes the end gap.

edited Feb 27 at 11:40

answered Feb 20 at 23:44

andyb

Vote count:
0

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.

answered 8 hours ago

Lie Ryan

Let’s block ads! (Why?)

via My Reading List: Read and Unread http://ift.tt/2oRLYTK

Tags: blogga

LEAVE A REPLY

Please enter your comment!
Please enter your name here