Ich versuche, einige Treiber mit einem Rahmen und Text zu erstellen. Die Treiber müssen gekippt werden, so dass ich die transform: skew(); CSS-Regel angewendet habe. Jetzt sind die Schrift und die Grenze jedoch sehr verschwommen. Ich verstehe, dass es möglich ist, einem Element Schriftglättung hinzuzufügen, aber ich bin mir nicht sicher, wie ich meinen Rand glätten soll.
Ich möchte, dass diese Treiber die volle Breite des Browsers haben, ohne Leerraum nach dem Skew.
CSS -
%Vor%HTML -
%Vor%JSFiddle - Ссылка
Ich habe noch keine reine CSS-Lösung gefunden, um unscharfen Text nach einer Transformation zu korrigieren - aber ich bin froh, dass ich mich als falsch erwiesen habe!
Ich habe es am besten gefunden, niemals Text zu verzerren oder zu transformieren und stattdessen das Bild, den Rand usw. zu verzerren, dann positioniere den Text einfach über dem oberen Rand. Zum Beispiel:
Update: Nach einigen Kommentaren ist <nav> 100% der Fensterbreite und nach links verschoben, um die anfängliche Lücke zu entfernen, die durch den Skew entsteht. Die <aside> ist jetzt width: 110% , wodurch die Endlücke entfernt wird.
Update 2: Ich war nie glücklich mit der width:110% , um die Endlücke zu entfernen, also habe ich jetzt transform-origin: bottom center; benutzt, damit die Skew die untere Kante alleine verlässt (also die Transformation ist) um den mittleren Punkt an der Unterkante), dadurch entsteht nie eine Endlücke! Ein paar Ränder wurden auch für den Text im neuesten Code angepasst.
Ob Transformationen zu Unschärfe führen, sind Browser- und Renderer-spezifische Artefakte.
Ich finde, dass Firefox dazu in der Lage ist, Text nach Transformationen ohne Unschärfe besser darzustellen als Chrome im Allgemeinen. Ihr Beispiel funktionierte ohne Änderungen und ohne Unschärfe in Firefox (Linux, mit Intel Grafik).
Wenn Sie in meinem Gerät -webkit-backface-visibility: hidden; von .driver entfernen, wird Chrome den Text auch rendern, ohne verschwommen zu wirken.
Die bessere allgemeine Lösung besteht normalerweise darin, die Umwandlung von Texten zu vermeiden. Fügen Sie stattdessen Text hinzu, nachdem Sie alles andere, das kein Text ist, transformiert haben.
Tags und Links css css3 css-transforms fonts