Próbuję stworzyć kilka kierowców z granicą i tekstem. Sterowniki muszą być przechylone, więc zastosowałem transform: skew();} CSS. Jednak teraz czcionka i granica poszła naprawdę rozmyta. Rozumiem, że możliwe jest dodanie czcionki wygładzające do elementu, ale nie jestem pewien, jak również wygładzić moją granicę?

Chciałbym, aby te kierowcy były pełną szerokością przeglądarki, bez białej przestrzeni po 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/

9
Sam 20 luty 2018, 00:11

3 odpowiedzi

Najlepsza odpowiedź

Muszę jeszcze zobaczyć jakieś rozwiązanie CSS, aby naprawić rozmyty tekst po przekształceniu - ale cieszę się, że jestem udowodniony!

Znalazłem go najlepiej, aby nigdy nie przekrzywić ani przekształcić tekstu i zamiast tego skewisz obraz, granicę itp., Po prostu umieść tekst na górze. Na przykład:

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: Postępując zgodnie z poniższymi komentarzami, <nav> wynosi 100% szerokości okna i przesunięte w lewo, aby usunąć początkową szczelinę utworzoną przez skewę. <aside> jest teraz width: 110%, który usuwa luki końcową.

Aktualizacja 2: Nigdy nie byłem zadowolony z width:110%, aby usunąć szczelinę końcową, więc teraz użyłem transform-origin: bottom center;, aby skośnie pozostawić samotną krawędź (więc transformacja jest wokół środkowego punktu na dolnej krawędzi), tym samym nigdy nie tworząc lukę końcowej! Kilka marginesów zostało dostosowanych do tekstu w najnowszym kodzie również.

9
andyb 6 marzec 2018, 00:44

Niezależnie od tego, czy transformacje powoduje rozmywanie, są specyficzne artefakty przeglądarki i renderowania.

Uważam, że Firefox ma tendencję do renderowania tekstu po przekształceniu bez rozmycia lepiej niż Chrome w ogóle. Twój przykład pracował bez modyfikacji i bez rozmycia w Firefoksie (Linux, z grafiką Intel).

W mojej maszynie, jeśli usuniesz -webkit-backface-visibility: hidden; z .driver, Chrome również sprawi, że tekst bez rozmycia.

Lepsze ogólne rozwiązanie zwykle należy unikać transformacji tekstów. A zamiast tego dodaj tekst po przekształceniu wszystkiego, co nie jest tekstem.

0
Lie Ryan 5 marzec 2018, 14:49

Usuń właściwość " -Webkit-backface-widoczności: ukryty; " z :: przed :: po zajęciach. tak, że będzie działać idealnie.

Jest dla mnie pracował. W Chrome, Firefox i Edge

body{ margin: 0; }
.top { height: 100px; }
.main { 
background: linear-gradient(0deg, #FFFFFF 0%, #d1d1d1 100%);
position: relative;
color: #fff;  
z-index: 1;
color: #fff;
font-family: arial, sans-serif;
margin: 100px 0;
padding: 10% 10px;
text-align: center;}

.main:before{
  content:  '';
  background: #d1d1d1; 
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0; 
  z-index: -1;
 /* -webkit-backface-visibility: hidden;*/
  top: 0;
  transform: skewY(-5deg); 
  transform-origin: 1%;
}

.main:after{
  background: #d1d1d1;
  content:  '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0; 
  z-index: -1;
 /* -webkit-backface-visibility: hidden; */
  top: 0;
  transform: skewY(5deg); 
  transform-origin: 1%;
}
<div class="top"></div>
<div class="main">
  <h1>CONTENT</h1>
</div>
0
Srinivasan Kasiram 6 marzec 2019, 05:56