Ich habe durch Dribbble gescrollt und konnte sehr beeindruckende Webdesign-Aufnahmen sehen. Bisher erstelle ich nur einfach aussehende Websites, aber ich würde meine Benutzeroberfläche gerne mit ein bisschen Grafikdesign verbessern. Wie kann ich etwas erreichen, das ein Design hat, das Kurven zu haben scheint und nicht auf ein CSS-Box-Modell beschränkt ist, wie im Bild unten?
Alle Weblayouts sind auf das CSS-Box-Modell beschränkt. Sie erzeugen nur die Illusion, dass dies nicht der Fall ist, indem Sie clevere Positionierungstricks anwenden.
In Ihrem Beispiel haben sie tatsächlich ein SVG-Bild (den grünen Teil) und ein bisschen CSS-Positionierung verwendet. Das SVG hat eine normale Kastenform, überlappt jedoch den darunter liegenden Inhalt.
Sie können dies mit anderen Tricks für verschiedene Effekte kombinieren, wie zum Beispiel Randradius und/oder abgeschrägte Kanten.
Sie müssen lernen, die Einschränkungen von HTML + CSS zu umgehen, um die gewünschten Effekte zu erzielen. Anstatt in Dribbble zu stöbern (wo Sie nur die Designs sehen), sollten Sie sich eine Web-Inspirationsgalerie wie Codepen ansehen , wo Sie den Code hinter den Designs sehen können.
Billy Kerr
Luciano
Billy Kerr