Ovale Div's möglich?
0 0 
Felix Riesterer
0
0 0 0
Ovale Div's möglich?
---> Suche nach einer Möglichkeit, oval zu "clippen" <---
Hallo liebe Leute,
ich möchte einen bestimmten Ausschnitt eines Divs darstellen, dem eine Tranzparenz-Maske oder Ähnliches zugrunde liegt. Ziel ist ein ovaler Content-Bereich auf einer Website, dessen Inhalt mittels Buttons scrollierbar sein soll.
Gibt es eine Möglichkeit, so etwas wie eine "Opacity-Maske" für den äusseren Div zu erstellen, damit der innere Inhalts-Div tatsächlich nur innerhalb dieser ovalen Maske sichtbar ist?
Über "clip" klappt das hervorragend, sowohl im IE als auch im FF.
Aber eben nur mit einem Rechteck.
Kann mir jemand helfen, ich komme da alleine nicht mehr weiter.
Mein Beispiel (Achtung, noch in den "Kinderschuhen"):
3xw.dreams-2-illusion.com/privat/upload/
Ich freue mich über jeden Tipp hierzu.
Viele Grüße
Abraxas
-
Also, das klappt glaube ich nicht.
Falls überhaupt geht das nur mit CSS3. Du kannst Dir unter http://www.w3.org/Style/CSS/current-work#CSS3 mal die verschiedenen Dokumente ansehen, aber es wäre mir neu.
Normalerweise werden nicht-rechteckige Bereiche aus mehreren Elementen zusammengesetzt oder / und mit Grafiken so gestaltet, daß es nicht-rechteckig aussieht.
Gebogene Scrolleisten oder ähnliche denkbare Effekte lassen sich nur über Flash o.ä. realisieren.Gruß
David-
hallo,
Also, das klappt glaube ich nicht.
Dein Glaube bedarf einer Korrektur.
Gebogene Scrolleisten oder ähnliche denkbare Effekte lassen sich nur über Flash o.ä. realisieren.
Nein, das geht, wenn auch sehr mühsam, auch mit anderen Techniken, die sogar von standardkonformen Browsern verstanden werden dürften - ohne zusätzliches Plugin.
Grüße aus Berlin
Christoph S.
-
Hi,
Nein, das geht, wenn auch sehr mühsam, auch mit anderen Techniken, die sogar von standardkonformen Browsern verstanden werden dürften - ohne zusätzliches Plugin.
Ohne am Bildschirm rumzudrehen? Mich würde das mal interessieren. Wie würdest du das machen?
Grüße. ww.-
hallo wichtel,
Ohne am Bildschirm rumzudrehen?
Klar. Ich mache eben Hand- und Kopfstände abwechselnd. Im übrigen ist es ein Gewöhnungseffekt. Wenn man sechs Wochen auf dem Kopf gestanden hat und sich dann wieder um 180 Grad auf "Normalität" dreht, merkt man, daß plötzlich die "normale Welt" auf dem Kopf steht. Ein Phänomen, mit dem vor allem Augenärzte zu tun haben.
Grüße aus Berlin
Christoph S.
-
-
Moin!
Also, das klappt glaube ich nicht.
Dein Glaube bedarf einer Korrektur.
Im Sinne der weiteren Antwort von David ist dieser vollkommen korrekt informiert: Runde Ecken gehen mit DIVs oder sonstigen HTML- und CSS-Elementen nicht, man benötigt Tricks wie Hintergrundgrafiken. Sagt er ja auch:
"Normalerweise werden nicht-rechteckige Bereiche aus mehreren Elementen zusammengesetzt oder / und mit Grafiken so gestaltet, daß es nicht-rechteckig aussieht."
- Sven Rautenberg
--
"Love your nation - respect the others." -
Hallo Christoph,
der Inhalt der Divs wird immer innerhalb eines rechteckigen Bereichs gerendert.
Wenn Du Dir die Seite angesehen hast, die Abraxas erstellt hat, dann wäre es theoretisch attraktiv, daß der Text kreisförmig gerendert wird. Dies ist aber nicht möglich, schon gar nicht wenn man diesen auch noch scrollen möchte und immer im ovalen Bereich bleiben möchte.
Weitergesponnen: Der Text müßte beim Scrollen dynamisch innerhalb des Kreises umbrechen, das würde die Lesbarkeit zwar erschweren, wäre aber die logische Konsequenz.
Mich würde interessieren wo Du für einzelne Elemente ermöglichen kannst, daß nicht-rechtckig gerendert wird.Hinweis: natürlich ist es möglich Textkonturen rund aussehen zu lassen. Trotzdem bleibt der umgebende Bereich meines Wissens immer rechteckig.
Gruß
David
-
-
-
Lieber Abraxas,
---> Suche nach einer Möglichkeit, oval zu "clippen" <---
interessante Idee...
Mein Beispiel (Achtung, noch in den "Kinderschuhen"):
3xw.dreams-2-illusion.com/privat/upload/
Meintest Du damit http://3xw.dreams-2-illusion.com/privat/upload/?
Mein Firefox2.0 sagt dazu:
"Fehler: Server nicht gefunden
Der Server unter 3xw.dreams-2-illusion.com konnte nicht gefunden werden."Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Die richtige Adresse lautet:
http://www.dreams-2-illusion.com/privat/upload/testseite_wegen_layout.html
Gruß
David-
Lieber David,
Die richtige Adresse lautet:
http://www.dreams-2-illusion.com/privat/upload/testseite_wegen_layout.html
es war mir nach diesem ersten Misserfolg auch klar, dass "3xw.bla" als "www.bla" gemeint war. Aber warum macht jemand solchen Blödsinn, wenn er geholfen bekommen will? - Mir war dass dann _sofort_ zu blöd, als dass ich mich da irgendwie weiter engagieren wollte.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
Aber warum macht jemand solchen Blödsinn...
Tja, das fragst Du Ihn besser selbst. Mir fällt dazu keine sinnvolle Antwort ein.
Gruß
David
-
-
-
-
Moin!
Ohne es ausprobiert zu haben, wie wäre es, einen normalen DIV zu nehmen über den (z-index) Du eine Grafik legst. Diese Grafik ist komplett in der Hintergrundfarbe gefüllt, bis auf einen oval ausgeschnittenen Bereich. Wie bei einem Passepartout wäre dann nur der Inhalt im freien Bereich sichtbar.
-- Skeeve
-
hi,
wie wäre es, einen normalen DIV zu nehmen über den (z-index) Du eine Grafik legst. Diese Grafik ist komplett in der Hintergrundfarbe gefüllt, bis auf einen oval ausgeschnittenen Bereich.
Damit sind keinerlei Links etc. in Inhaltsbereich mehr mit der Maus bedienbar, weil sie von der Grafik überlagert sind.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Moin!
Damit sind keinerlei Links etc. in Inhaltsbereich mehr mit der Maus bedienbar, weil sie von der Grafik überlagert sind.
Guter Einwand!
Also nur nutzbar, wenn der Inhalt nur "zum Betrachten" ist.
-- Skeeve
-
-
-
Seid gegrüßt!
1. Lösungsversuch:
zwei Divs in einander. Äußeres Div enthält nur den Hintergrund (Oval) und das 2. Div. im zweiten Div (overflow:scroll;) steht der Text.2. Lösunsversuch:
eine 3x3er Tabelle, Oval zerschneiden, und in den äußeren Zellen einfügen. und in der Mitte steht der Text. ist aber reichlich unkonventionell.--
Bis Später
________________________________________________________________
[Testversion meiner Seite] [Zwei unterwegs in Australien]
-
Hallo nochmal,
ich habe eine Möglichkeit gefunden:
Im Firefox gibt es eine fantastische Möglichkeit, vektorbasierte Grafik anzuwenden und damit auch zu clippen, siehe unter:http://www.renater.fr/Video/2003ATHENS/DC-SVG_eng_2003/slide58.htm
Leider kann der IE das nicht. Hier kann ich dafür mit "Filter" und "Mask" arbeiten. Mit etwas Feinarbeit könnte ich vielleicht diese zwei Varianten zur Verfügung stellen und so angleichen, dass es gleichermaßen dargestellt wird.
Wenn ich da was ausgearbeitet habe, werde ich es mitteilen.
Viele Grüße
Abraxas