Suche Tutorial zu "abgerundeten Ecken" und"Schattenverlauf"

Webdesign & Technik Software & Hardware
1

Sersn,
Weis etz net wie des am besten sagen soll, ich möchte bei ner Webseite des menü prakisch “einfassen” aber halt mit abgerundeten Ecken, wie mach ich des am besten? Hab mir des so vorgestellt oben ne box mit linker + rechter ecke, in der mitte nen box für des menü und uten wieder eine mit den ecken. Passt des so vo der Idee? Und wie erstell ich dann die Grafiken?

Und zum zweiten, ich hab praktisch die komplette webseite in nen container der zentriert wird. Etz möchte ich aber da drumrum nen Schatten habn. Wie mach ich etz des dann? Also der Schatten is ja denk ich a ganz einfacher farberlauf… aber wie mach ich des das der farberlauf jeweils von der richtung her passt also vom Inhalt weggeht?

Sorry hab in dem gebiet absolut keine ahnung.

mfg Karl

2

Und ich versteh bei dir nur Bahnhof :hammer:.

Welches Programm hast denn erstmal?

3

Hi Karl,

das habe ich selbst noch nicht gemacht, aber bei selfhtml ist zumindest die Box mit den runden Ecken ganz gut beschrieben.
Hier der Link: aktuell.de.selfhtml.org/artikel/css/runde_ecken/

Ciao,
Jens

4

Danke werd ich mir mal genauer anschaun.

mfg Karl

5

Generator für Ecken:
roundedcornr.com/

6

@Scrappy: Sorry hatte deinen Post übersehen. Ich arbeite hauptsächlich mit Photoshop CS 3. Hab aber auch Corel Paint Shop.

Also ich check des etz einfach net wie ich mit Photoshop “abgerundetes Rechteckwerkzeug” in des Rechteck dann nen Farbverlauf reinbring…

7

Moin,

also vorweg ich hab das mit GIMP gemacht.

Schritt 1:
-> Bild erstellen mit relativ hohen Werten (vll. das Doppelte oder Dreifache des gewünschten Endwertes).

Schritt 2:
-> Bild einfärben wie gewünscht. Ob Farbverlauf oder nicht ist egal.

Schritt 3:
-> Filter -> Dekoration -> Runde Ecken -> nach Wunsch abrunden; keinen Hintergrund hinzufügen.

Schritt 4:
-> die Runde Ecke auswählen, kopieren

Schritt 5:
-> eventuell Weichzeichnen, skalieren

Fertig.

MfG
myPages

8

Danke, werd ich heut abend probiern, muss aber etz auf ne Beerdigung :frowning:

Kann des sein das bei CSS trotz der angabe width: 100% noch links und rechts ein Rand bleibt?

Siehe klakal.dyndns.org/style

EDIT: Hat sich erledigt, die Angaben im body margin:0 und padding:0 ham gefehlt

9

Guten Morgen,

wie du vorgehst hängt nicht zuletzt davon ab, wie aufwendig deine “runden” Ecken werden sollen. Hab mir deinen Style mal angeschaut. So aufwendig ist der ja nicht.

Zeichne dir in PS nen Rechteck mit abgerundeten Ecken in der Wunschfarbe.
Slice dir den oberen und den unteren streifen mit den jeweils 2 Ecken raus.
und dann:

<div>
   <div>background oberer Streifen mit runden Ecken</div>
   <div>backgrundcolor deine Farbe</div>
   <div>background unterer Streifen mit runden Ecken</div>
</div>

ähnlich kannst du mit den Schatten verfahren. Verpasst dem Rechteck über die Fülloptionen nen Schlagschatten. Sliced das ganze wieder in 3 Teile und verpasst den mittleren Div das mittlere Slice als Background, rechts angeordnet mit repeat-y, fertig.

Da du dich schon ein wenig mit CSS auskennst, geh ich einfach davon aus das dir die Erläuterung reicht, ansonsten halt nachfragen :slight_smile:

MfG Phil

10

So hab ichs ja jetzt gemacht, nur in photoshop hab ich des ganze nicht richtig gespeichert, drum sahs net ganz richtig aus. hab mir etz grad photoshop wieder installiert, weil ich mein rechner neu installiert hab und werd des etz so gut ich kann machen. Aber eine frage noch, wie speichert man die Slice ausschnitte?

mfg Karl

11

hm, ganz einfach (du befindest dich im SliceModus) :

Datei -> Für WebSpeichern -> Fertig klicken -> bei der Frage nach Dateinahmen steht da noch HTML, wählst du drunter anstelle von Bilder und HTML einfach nur Bilder aus, und er speicherts dann im angegebenenOrdner/Bilder/

da liegen dann alle Slices drin, sauber durchnummeriert :slight_smile:
(zumindestens bei PS7.0 sollte aber in CS3 nicht anders sein)