Bestehende JPG in Fusion Ecken abrunden (abgerundete Ecken)

[websee]

Hallo Zusammen

Ist es Möglich in Fusion bei einem Bild JPG nächträglich einfach die Ecken zu Runden

(könnte man ja auch im vorraus machen mit Photoshop) aber wäre Super wenn es im Fusion geht

Danke für Eure Hilfe

RS

[Cadfael]

Photoshop ist definitv die bessere Methode, da sie in allen Browsern funktioniert.

Vor ein paar Tagen hat Zappelo (an anderer Stelle) eine Anleitung ins Netz gestellt, wie man Felder anrunden und mit Schatten versehen kann.

Anhand dieser Anleitung habe ich experimentiert und die css so vereinfacht, dass auch Programmier-Deppen wie ich damit umgehen können.

Resultat ist eine Methode, Felder, Tabellen und Bilder anzurunden und/oder mit Schatten zu versehen. Das fuktioniert allerdings im IE8 NICHT! In den aktuellen FF, Opera, Chrome und Safari klappt es. Ab welchen Versionen kann ich allerdings nicht sagen!

Hier eine Seite, in der ich Bilder (im "großen Fenster) mit (leichen) Ecken und Schatten versehen habe. Das Bild oben links (Kalender) hat mit Absicht keine angerundeten Ecken, aber der Schatten ist wie bei den anderen (Kalenderbild liegt auf einem Textfeld, dem der Schatten zugewisen wurde):
http://www.bj250.de/html/bildergalerie.html

Die Schatten und Rundungen der "Kästchen" links hingegen sind Bilder - und funktionieren daher in jedem Browser.

Falls Du sowas willst, verrate ich, wie ich es (anhand Zappelos Anleitung) gemacht habe.

Gruß
Andreas

[websee]

Sieht beides super aus Motorrad und die Runden Ecken 

Kannst du mir den Trick verraten ?

Würde mich freuen

Rene

[Sagesse]

@catfael
mir gefällt diese Seite auch sehr gut - ich hab nur eine kleine Anmerkung:
warum ist der Banner nicht zentriert?
LG Sagesse

[websee]

ich rafs nicht....bin scheinbar der super CODE dummy...

http://www.zappelo.bplaced.net/nof/runde-ecken/

Andreas kanns du mir auf die Spünge helfen...

Habe Fotos als Bild und wäre super wenn ich mit CSS runde Ecken hinzufügen kann...aber ich begreif css schon nicht ganz ....wo muss ich was hochladen und einfügen


gruss rene

PS catfeal ...es geht hier nicht ums zentrieren

[nettesekel]

Den Code den Zappe dort gepostet hat,

Code: [Auswählen]

@charset "utf-8";
.rund {
border: 1px solid #b8b5b5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #ffffff;
height: 33px;
width: 250px;
padding: 1px;
}
kopierst du, öffnest deinen Windoofseditor, fügst ihn dort ein und gehst auf Datei speichern unter.
Als Dateinamen trägst du „gerundet.css” ein. Mit dem Punkt und css!!!

Die gespeicherte Datei kopierst du in den Ordner lokale Publizierung>>html und natürlich auch auf deinen Server in den html-Ordner.

In der Arbeitsansicht der Seite, in der du die runden Ecken nutzen willst, drückst du auf der Tastatur einmal F9 und dann auf der Eigenschaftenpalette den html-Button. Zwischen den headtags fügst du dann folgenden Code ein:

Code: [Auswählen]

<link href="./gerundet.css" rel="stylesheet" type="text/css" />
Falls du das Ganze auf der Startseite nutzt, muss der Code so aussehen:

Code: [Auswählen]

<link href="./html/gerundet.css" rel="stylesheet" type="text/css" />
Dann noch die Formatvorlage „rund” anlegen, wie Zappe es beschrieben hat und diese dem Objekt deiner Wahl zuweisen.

[Cadfael]

Uuuuups sorry! 
Habe damals nicht geantwortet ... 

Ich habe mir eine css-Datei gemacht, in der direkt mehrere Möglichkeiten stehen.
Aus Zappelos Beispiel darf man viel weglassen!

Die Datei angerundet.css darf so aussehen:

Code: [Auswählen]

@charset "ISO-8859-1";

.angerundet-1 {
border: 0px;
border-radius: 7px;
}

.angerundet-2 {
border: 1px solid #990000;
border-radius: 11px;
background: #F4F4F4;
box-shadow: 4px 4px 4px #CECECE;
}

.schatten-1 {
border: 0px;
border-radius: 0px;
background: #F4F4F4;
box-shadow: 5px 5px 5px #CECECE;
}

Dann kann ich einem Bild je nach Geschmack zuordnen:

class="angerundet-1" (Rundung aber kein Schatten, keine Umrandung)
class="angerundet-2" (Rundung, Schatten, Umrandung)
class="schatten-1" (keine Rundung, Schatten, keine Umrandung),

Wie man die css-Datei einbindet, hat NE beschrieben.
Die Class gibt man über den HTML-Button "im Tag" als "innen" ein.

Im Code  steht vor jeder "Schatten-/Eckenart" ein Punkt. Dann folgen in den Klammern die Anweisungen.
In der Class wird der Punkt nicht gemacht!!!

Gruß
Andreas

[Cadfael]

@catfael
mir gefällt diese Seite auch sehr gut - ich hab nur eine kleine Anmerkung:
warum ist der Banner nicht zentriert?
LG Sagesse

Hallo Sagesse,

was meinst Du mit "Banner"
Die Überschrift "Bildergalerie"?
Weil ich das auf den meisten Seiten so gemacht habe - und weil es bei bestimmten Seiten sogar "sein muss" (weil rechts dann noch was steht).

Gruß
Andreas

[websee]

..kämpfe...

Wie man die css-Datei einbindet, hat NE beschrieben.
Die Class gibt man über den HTML-Button "im Tag" als "innen" ein.

Im Code  steht vor jeder "Schatten-/Eckenart" ein Punkt. Dann folgen in den Klammern die Anweisungen.
In der Class wird der Punkt nicht gemacht!!!


?????????????

[nettesekel]

Versuchs doch erstmal mit meiner Erklärung. https://www.nof-community.de/index.php/topic,254.msg2482.html#msg2482 Danach verstehst du die ganze Materie vielleicht etwas besser und kannst auch Cadfaels Variante umsetzen.

[Cadfael]

Ich habe websee auch eine Mail geschrieben ... 

Man muss
1.) eine css-Datei erzeugen in der steht, was gemacht werden soll.
2.) die css-Datei über die Verwaltung einbauen ("immer publizieren")
3.) den Pfad wo die caa-Datei zu finden ist in den html-Code der Seite einbauen
4.) dem Bild sagen, dass es etwas machen soll, was in dieser Datei steht ...

Ach ja; und im IE8 sieht man das nicht! In anderen Browsern aber schon!

Gruß
Andreas

[websee]

Punkt 1-2 schein ich zu begreifen :-)

Punkt 3-4 habe ich noch mühe...



Punkt 3 ist dies:
Code: [Auswählen]
<link href="./gerundet.css" rel="stylesheet" type="text/css" />

Falls du das Ganze auf der Startseite nutzt, muss der Code so aussehen:

Code: [Auswählen]
<link href="./html/gerundet.css" rel="stylesheet" type="text/css" />


Punkt 4 ...finde ich gar nicht....

Sorry aber sehe nur noch Wald

[websee]

 

...jetzt sind die ecken rund ,,,im demo von Zapello  (sprich kriege es langsam hin)

aber ich kann den CSS code dem Objekt nicht zuweisen....

müsste doch in den eigenschaften sein?

rene

[nettesekel]

Was für einem Objekt versuchst du die Klasse denn zuzuweisen? Einem Bild?

[Cadfael]

Deine "index.html" liegt ja nicht im selben Pfad wie die anderen Dateien (die im Ordner "html" liegen.

Bei einer html-Datei die im Ordner html liegt, reicht "./angerundet.css", weil die "angerundet.css" beim einbinden in die Asset-Verwaltung automatisch in den Ordner html verschoben wird.
"./" heißt: Dieser Ordner

Der "index.html" muss man aber sagen: "Gehe zuerst in den Ordner html. Dort findest Du die Datei angerundet.css."
Und das ist: "./html/angerundet.css"

Es gibt nocht eine dritte Möglichkeit, die bei beiden (auf dem Server) funktioniert. Sie funktioniert nur auf Festpatte (für die index.html) nicht.

Überall kannst Du schrieben:
<link href="../html/gerundet.css" rel="stylesheet" type="text/css" />

Das heißt: "Geh erstmal ein Verzeichnis zurück." (Bei der index.html geht das nicht, weil sie bereits am Anfangspunkt steht, bei den htmls geht es; die gehen als zur index.html)
Dann heißt es: "Jetzt geh in den Ordner html - dort ist die Datei."

Wie gesagt; funktioniert bei der index.html nicht auf der Festplatte, aber nach dem Publizieren online!

- - - - - - -

Zu 4.)
Du klickst ein Bild an und gehst rechts in den Bildeigenschaften auf den Button HTML. Den klickst Du an.
Dann sind oben links drei Zeichen (vor/innen/nach).
Klick "innen" an und der Cursor springt dort hin.

Dann muss da rein
class="angerundet-1" / class ="schatten-1"
(oder wie auch immer Du den Codeschnipsel genannt hast - nicht den Namen der css-Datei, sondern die Definition in der css mit dem Punkt davor)

Gruß
Andreas