Wie erstelle ich ein Miniaturbild mit abgerundeten Ecken, das das Bild des Beitrags enthält?

Wenn ich in Photoshop abgerundete Rechtecke erstelle, kann ich Bilder über diesen abgerundeten Rechtecken maskieren, um ihnen abgerundete Ecken zu geben.

Wenn ich jedoch Websites erstelle, bin ich mir nicht sicher, wie ich Bildern abgerundete Ecken geben soll.

Ich weiß nicht, wie man Vektormasken auf der Website verwendet, denken Sie, dass es die richtige Lösung ist? Bitte, wenn mir jemand ein Tutorial oder irgendetwas zur Verfügung stellen kann, bin ich sehr dankbar.

Online-Beispiel:

Geben Sie hier die Bildbeschreibung ein

Antworten (3)

Dieser Effekt wird mit CSS erzeugt.

Fügen Sie Ihrem Bild einfach ein border-radiusAttribut hinzu, damit es abgerundete Ecken hat.

Beispiel:

img {
border-radius: 10px;
}

(Das würde es auf alle Bilder anwenden)

Hier ist ein Live-Beispiel , mit dem Sie herumspielen können.

Also in der PSD-Datei, wenn ich die Schnittstelle designe, sollte ich nichts in meine Überlegungen einbeziehen, weil ich möchte, dass die Miniaturansichten abgerundete Rechtecke sind !!
Wenn Sie die Benutzeroberfläche in Photoshop entwerfen, verwenden Sie einfach das, was Sie gewohnt sind (verwenden Sie Masken, um abgerundete Bilder zu erstellen), aber wenn Sie dieses Design dann auf einer Webseite implementieren, verwenden Sie das CSS-Attribut.
Diese Antwort ist genau richtig, aber lassen Sie mich Ihnen noch eines sagen, Sie können abgerundete Ecken in CSS für IE nicht einfach erreichen . Alle anderen modernen Browser werden sich entsprechend verhalten, aber IE wird mehr Anstrengungen erfordern.
Johannes: Danke, ich wähle "Rechteck-Werkzeug" > Form erstellen > Abgerundetes Rechteck auswählen > Subtrahiere (-) die abgerundete Rechteckform von der Rechteckform. Einfach die Rechteckbox wird von Rounded Rectangle Box subtrahiert und dann füge ich das Bild ein unter dieser Schicht, so dass es mit abgerundeten Ecken aussieht. Dies ist der einzige Weg, den ich kenne ... das Problem, dass ich die Größe der Bilder ändern muss, damit sie nicht an den Seiten erscheinen, sehen Sie sich bitte dieses Bild an. img546.imageshack.us/img546/6223/webdesign2s.jpg ist dieser gute Weg für CSS oder es gibt ein besserer Weg, wenn es Ihnen nichts ausmacht, senden Sie mir bitte ein Tutorial.
Gibt es ein Problem, wie ich es mache? oder spielt es keine Rolle, weil es alles in CSS-Händen ist, nicht in Photoshop-Händen? Was ist der optimale Weg, um es zu machen, wenn ja oder nein?
Dafür würde es meiner Meinung nach etwas komplizierter werden und Sie müssten Javascript verwenden.

Sie können auch timthumb verwenden, damit Sie sich keine Gedanken über genaue Bildgrößen für Ihre Rechtecke machen müssen, und dann Johannes Tipp oben für die abgerundeten Ecken verwenden.

http://www.binarymoon.co.uk/projects/timthumb/

Mir ist klar, dass sich Ihre Frage wirklich auf den CSS3-Randradius bezieht, aber ich dachte, ich würde diesen Link auf PolyClip setzen , mit dem Sie Vektormasken in einem Webbrowser erstellen können. Dadurch können Sie eine viel kleine JPG-Datei und einen Beschneidungspfad anstelle einer großen PNG-Datei mit Alpha-Transparenz verwenden. Wenn Sie also komplexere Bilder als abgerundete Ecken ausschneiden möchten, ist dies der richtige Weg.

Hey JamEs, das Problem, ich bin kein CSS-Experte, alles, was ich tun muss, ist, Photoshop-PSD-Dateien an den Entwickler zu übergeben, da ich eine Person auslagere und gut mit Photoshop umgehen kann. Ich weiß also nicht, ob die Rahmen mit abgerundeten Ecken gemacht werden sollten die psd-datei oder zeig ihm einfach seine abgerundeten ecken und er macht es mit css !! 2- Die Benutzer-Thumbnails haben auch abgerundete Ecken. Als ich zum Beispiel Twitter GUI PSD sah, sah ich, dass er einen grauen Maskenvektor mit abgerundeten Ecken gemacht hatte, was ich nicht weiß, ob ich das tun sollte, weil ich nicht weiß, wie man abgerundete Ecken macht Frames, die zu CSS passen. Ich kann es nur im Allgemeinen tun
Verwenden Sie die abgerundeten Ecken in Photoshop, um zu zeigen, was Ihre Web-Person nachbilden soll, dann kann sie die abgerundeten Ecken mit Code erstellen. Wenn Sie die Site codieren und nicht mit der Ausgabe des Codes vertraut sind, schlage ich etwas wie border-radius.com vor, mit dem Sie die gewünschte Box visuell erstellen und dann den Code ausgeben können, den Sie kopieren und in ein Stylesheet einfügen können .
Wie erstelle ich ein Miniaturbild mit abgerundeten Ecken, das das Bild des Beitrags enthält?
AntwortenHierDatenschutz-Bestimmungen1y, 0v