CSS: interessante Randradius-Funktionen

Ursprünglicher Autor: Nils Binder
  • Übersetzung
  • Tutorial
Was kann mit CSS-Eigenschaften gemacht werden border-radius? Der Autor des Materials, dessen Übersetzung wir veröffentlichen, sagt mehr als es auf den ersten Blick scheint. Insbesondere sprechen wir davon, dass die Winkel von Elementen, die mit dieser Eigenschaft gerundet werden, eine sehr interessante Form haben können.


Wir bieten an, über die Feinheiten der Verwendung zu sprechen border-radius.

Ältere Immobilien und modernes Webdesign


In diesem Jahr auf einem Frontend - Konferenz Zürich , Rachel Andrew hat einen Bericht über die CSS Grid - Technologie Möglichkeiten. Am Ende der Rede sagte sie etwas über alte CSS-Eigenschaften und ihre Worte faszinierten mich. Es klang nämlich so: „Das Bild wurde ausschließlich mit einem gut gepflegten Grundstück rund gemacht border-radius. Denken Sie daran, dass altes CSS noch existiert und nützlich sein kann. Sie müssen nicht immer etwas völlig Neues verwenden, um Effekte zu erzeugen. “

Einige Zeit nach dieser Rede hatte ich die Idee, dass der Kreis nur ein kleiner Teil dessen ist, was mit Hilfe getan werden kann border-radius. Fasziniert von dieser Idee entschied ich mich für den Umgang mit dieser Immobilie.

Grenzradius beherrschen


▍Einzelwert


Beginnen wir mit den Grundlagen. Ich hoffe, Sie langweilen sich nicht bei diesem Beispiel. Sie sind möglicherweise mit CSS und der Eigenschaft vertraut border-radius. Es existiert schon lange, und sie werden hauptsächlich dazu verwendet, den einzigen Wert anzugeben. Es sieht wie folgt aus : border-radius: 1em. Vielleicht war dies eine der am meisten diskutierten Funktionen von CSS3 im Jahr 2010, als css3please.com der beste Freund des Designers war .

Wenn Sie einen einzelnen Wert für die border-radiusEcken des Elements verwenden, werden sie entsprechend diesem Wert abgerundet.


Abrunden der Ecken eines Quadrats, in Übereinstimmung mit einem einzigen Wert des Grenzradius

Wie aus dem obigen Beispielsehen, auf feste Werte eingestellt werdennicht nur nachbestimmten Anzahl von Einheiten ein, wie beispielsweisepx,remoderemaber das Prozentzeichen. Dies wird normalerweise verwendet, um quadratische Kreise zu erstellen, wennborder-radiussie auf 50% gesetzt sind. Der prozentuale Wert basiert auf der Breite und Höhe des Elements. Daher werden die resultierenden Winkel bei der Anwendung auf Rechtecke nicht symmetrisch sein. Hier ist ein Beispiel, das den Unterschied zwischen Eigenschaftenborder-radius: 110pxundborder-radius: 30%einem Rechteck zeigt.


Runden der Ecken eines Rechtecks

Beachten Sie, dass die Ecken des rechten Rechtecks ​​nicht symmetrisch sind. Denken Sie daran. Wir brauchen es etwas später.

Vier verschiedene Werte


Wenn Sie mehr als einen Wert verwenden border-radius, passen Sie die Parameter für jeden Winkel an, indem Sie oben links beginnen und sich im Uhrzeigersinn bewegen. Auch hier können Sie Prozentwerte verwenden. Sie können auch mit festen Werten gemischt werden.


Parameter für die vier Ecken des Elements einstellen

Ос Acht durch einen Schrägstrich getrennte Werte


Ich denke, viele von Ihnen haben bereits alles versucht, worüber wir oben gesprochen haben. Jetzt ist es Zeit für einige wirklich interessante Experimente. Was passiert, wenn die Werte durch einen Schrägstrich getrennt werden und Sie bis zu acht Werte angeben können? Sehen Sie sich zuerst die Spezifikation an . Es sagt uns, dass, wenn die Werte vor und nach dem Schrägstrich gesetzt werden, die Werte vor dem Schrägstrich den horizontalen Radius und die Werte nach der Vertikalen angeben. Wenn es keinen Schrägstrich gibt, sind beide Radien gleich.

Daher sind die Werte vor dem Schrägstrich für die horizontalen Abstände verantwortlich und die Werte nach dem Schrägstrich für die vertikalen. All das ist gut, aber dann stellt sich die logische Frage: "Worum geht es?". Erinnern Sie sich an den Prozentsatz der Rundungswerte für rechteckige Formen? Für vertikale und horizontale Abstände wurden unterschiedliche absolute Werte verwendet, und asymmetrisch abgerundete Ecken waren vorhanden. Dieser Effekt kann durch einen Schrägstrich beim Einrichten erzielt werden border-radius.

Vergleichen wir die Effekte, die folgende Einstellungen ergeben: border-radius: 4em 8emund border-radius: 4em / 8em. Die Ergebnisse sind sehr unterschiedlich.


Die symmetrischen Ecken des linken Elements sind ein Viertel eines Kreises, und die asymmetrischen Ecken des linken Elements sind Teile einer Ellipse.

Um ehrlich zu sein, sehen die Zahlen, die Sie durch Anwenden der oben beschriebenen Einstellungen erhalten, seltsam aus. Aber vergessennichtdass die Kreise erstellt werdendiese Parameter:border-radius: 50%. Der Kreis wird erhalten, weil die zwei Werte, die eine Seite angeben, aufaddiert werden und sich zu 100% (50% + 50% = 100%) ergibt und es keine geraden Linien vom ursprünglichen Quadrat gibt. Spekulieren wir auf dieselbe Weise über die acht Werte, die bei der Festlegung der Eigenschaft verwendet wurdenborder-radius, stellt sich heraus, dass man mit ihrer Hilfe eine Figur beschreiben kann, die wie ein Gitarrenmediator oder eine Zelle eines lebenden Organismus aussieht.


Die Form wird durch Anwenden von 8 durch einen Schrägstrich getrennten Werten erhalten


Vier überlappende Ellipsen, die eine Form bilden,

brauchte einige Zeit, um mich daran zu gewöhnen. Manchmal sind alle diese Entwürfe schwer verständlich. Wenn Sie von komplexen Formen von Elementen angezogen werden, die mit anpassbar sindborder-radius, können Sie dieses kleine Werkzeug verwenden.

Ergebnisse


Nun, da Sie wissen, dass Sie beim Einrichten border-radius8 Werte verwenden können , können Sie, wenn Sie das oben genannte Tool ausprobiert haben, eine leichte Enttäuschung empfinden, da Sie nicht jeden Wert unabhängig voneinander steuern können. Wenn dies der Fall ist, dann ist hier , besonders für Sie, die Version, die die unabhängige Anpassung aller acht Werte unterstützt. Bevor Sie es verwenden - erinnern Sie sich an ein Gespräch aus dem Film "Ghostbusters" von 1984:

- Überqueren Sie nicht die Streams.
- Warum?
- Es wird schlimm sein.


Tatsache ist, dass wenn Sie die Manipulatoren so bewegen, dass sie sich auf einer Seite der Figur kreuzen, sich das zu benehmen beginnt ... Lassen Sie uns einfach sagen, dass es sich unvorhersehbar verhalten wird. Was kann ich sagen - schauendich selbst Am Ende wird es nicht zu einer universellen Katastrophe führen. Denken Sie jedoch daran, dass wir Sie gewarnt haben.

Liebe Leserinnen und Leser! Verwenden Sie die CSS-Eigenschaft "border-radius"?


Jetzt auch beliebt: