Ich habe mir einige Flash-Vorlagen auf ActiveDen angesehen, als ich auf einen Effekt gestoßen bin, den ich sehr oft in Flash-Website-Galerien sehe. Es ist ein sehr einfacher, aber schöner Effekt. Die Bilder haben einen Rahmen, aber im Gegensatz zu CSS-Rahmen verdeckt er einen Teil des Bildes. Ich wollte diesen Effekt in einer meiner Galerien verwenden, also habe ich ein wenig experimentiert und das folgende jQuery-Plugin entwickelt. Es wickelt die Bilder im Grunde in ein <div> mit den gleichen Abmessungen wie das Bild und setzt den Überlauf auf versteckt. Dann wird nach dem Bild ein weiteres <div> angehängt, dem der eigentliche Rahmen zugewiesen wird. Alle Rahmeneigenschaften können vom Benutzer geändert werden. Es funktioniert mit fast jedem Lightbox (getestet mit colorbox).
Durch die Kombination der Effekte können neue Effekte erzielt werden, und ich habe festgestellt, dass bei Verwendung eines höheren "Inset"-Wertes ein wirklich schöner Effekt auf dem Webbrowser des iPhones erzielt wird. Fühlen Sie sich frei, mit diesem Plugin zu tun, was Sie wollen.
Demo anzeigen Dateien herunterladen
So funktioniert's!
Ein riesiges Dankeschön an Chris für die Bearbeitung und Optimierung des Plugins und besonders für das Veröffentlichen dieses Artikels!
Sehr schöne Arbeit, danke, ich werde es auf meiner Seite einfügen.
Schönes Plugin, danke Chris!
Nur… warum?
Damit Bilder Innenschatten haben können, die beim Darüberfahren mit der Maus verblassen, ein Effekt, der mit CSS nicht möglich ist. Oder haben Sie herausgefunden, dass dieser Effekt für jede einzelne Website auf der ganzen Welt unangemessen ist?
Das ist ein ziemlich schöner Effekt, obwohl ich die "Rahmen" wahrscheinlich transparent machen würde, um noch den größten Teil des Bildes zu sehen.
Wie immer ein sehr robustes und tiefes Verständnis dieses Beispiels.
Danke Chris.
Außerdem sieht Ihre Demoseite großartig aus.
Vielleicht noch etwas zu erwähnen, ich hatte nicht bemerkt, dass dies ein Gastautor-Post ist, die kurze Notiz oben ist nie durchgesickert, bis ich zu dieser Seite zurückkehrte.
Danke für den Beitrag, Robin.
Ich mag den Effekt und unterstütze immer JQuery..danke…
Da haben wir es mit deiner unheimlichen Fähigkeit, genau das zu veröffentlichen, was ich für ein aktuelles Projekt brauche.
Es wäre *wirklich* cool, wenn die Rahmen etwas transparent sein könnten, so dass man einen Teil des Bildes sehen könnte. Ich habe das noch nicht gesehen (nicht einmal mit css3), aber vielleicht geht es? Mit css3's border-image und einem .png?
Man könnte die Deckkraft des angehängten Divs auf .9 oder was auch immer setzen.
div.ibe_inner { opacity: .5 !important; }
div.ibe_inner { opacity: .5 !important; filter: alpha(opacity = 50); /* nur IE */}
Man könnte dem animierten Div auch einen Hintergrund geben und damit ein opakes PNG verwenden, um den gleichen Effekt zu erzielen. Allerdings stimme ich Alistair voll und ganz zu, dass die Verwendung von CSS wahrscheinlich überlegen ist, da man keinen Text hat, um den man sich Sorgen machen muss (in diesem Fall könnte man auch rgba verwenden).
Du, warum habe ich nicht daran gedacht...
Hier ist es in Aktion (ich habe mich am Ende für die Transparenz entschieden)
Nicht viel, aber ein schöner Effekt auf einer ziemlich einfachen Seite.
Schöner Trick mit Overflow hidden zum Maskieren :-)
Wow, nett und schön, wie das Endergebnis [Demoseite]. Ich werde dies in zukünftigen Projekten verwenden, danke fürs Teilen :)
schöner Effekt
Ich habe gerade die Demo geändert, um einen neuen Effekt hinzuzufügen: unterschiedliche Innenrahmenbreite links, rechts, oben, unten.
Das "große Rahmen"-Beispiel hat Ihnen erlaubt, "nur ein Detail" zu zeigen, aber das Detail ist in der Mitte. Mit dieser kleinen Modifikation können Sie genau das Detail wählen, das Sie möchten.
Demo: http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect/index.html (Ich habe gerade den Teil "Nicht zentriert" zur ursprünglichen Demo hinzugefügt.
Zip: http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect.zip
Und es ist mir egal, ob es unterlizenziert wird, also gilt die Original-Lizenz (alle Credits gehen an den ursprünglichen Autor http://rob-thrift.com für das, was er getan hat, ich kümmere mich nicht darum, dass mir jemand Credits für meinen Teil gibt)
Clever! Ich werde es mir genauer ansehen und es einbauen, wenn ich Zeit habe.
Sehr schöner Effekt.
Bietet genau die nötige Interaktivität für Benutzer, um zu wissen, dass ein Element beim Hovern "etwas tut".
Vielen Dank fürs Teilen! =)
Chris
Ich mag diesen Effekt, ich habe beschlossen, meine Website in dieses Effektbild einzubauen!
Hallo Chris,
Wirklich schöner Effekt, danke fürs Teilen, das wird definitiv meine CSS-Sprites für Bilder für eine Weile ablösen! Es wird nicht lange dauern, bis ich eine ganze Website in jQuery baue.
Der große Rahmen würde auf einem gleichfarbigen Hintergrund toll aussehen, ähnlich wie ein Thumbnail-Effekt. Vielleicht spiele ich ein wenig mit verschiedenen Übergangseffekten herum, aber der Fade-Look funktioniert wirklich gut.
Danke für das Teilen.
Ich mag die Thumbnail-Idee. Vielleicht, wenn man diesen Effekt mit einer Größenänderung des Bildes kombiniert, den oberen und linken Offset nimmt, es absolut positioniert und dann das Ganze größer macht, hätte man einen schönen kleinen Lightbox-ähnlichen Effekt.
Ich mag den Effekt so sehr
Danke :)
Sieht aus, als hätte ich einen einfacheren Weg mit CSS3 gefunden: Man könnte dem Bild eine Umrandung (eine neue Art von Rahmen) geben und die neue Eigenschaft outline-offset mit einem negativen Wert verwenden, um die Umrandung innerhalb des Bildes zu platzieren. CSS-Animationen hinzufügen und fertig!
Eine Demo davon kann man hier sehen.
Ich habe es nur in Chrome und Firefox überprüft, aber das scheint GENAU das Gleiche zu tun, ohne JS. Einfache, schöne Lösung, Tim.
Schön =)
Das habe ich mir tatsächlich überlegt, aber wegen der Browserkompatibilität und weil ich ein großer Fan von jQuery bin, habe ich mich dagegen entschieden :)
Ein weiterer Grund, warum ich diesen Blog gerne verfolge. Danke fürs Teilen, Tim. Fantastisch!
unbezahlbar!
Vielen Dank, Chris :)
Ich habe viel von Ihrer Seite gelernt.
Danke, Chris Coyier.
Schöner Effekt; gute Arbeit Robin & Chris!
Jetzt verstehe ich.
Danke css-tricks.com
Das ist ein einzigartiger Effekt für die Bildanzeige. Danke.
Wo ist mein Kommentar, Chris?
Das ist ein fantastisches Plugin. Ich kann es kaum erwarten, einen Blick auf den Code zu werfen!
Ich bin mir nicht ganz sicher, ob dies der richtige Ort ist, um diese Frage zu stellen, aber ich habe mir den Code angesehen und er ist fantastisch. Ich hatte nur eine Frage dazu. Woher wussten Sie, dass Sie das "mouseenter"-Ereignis verwenden? Hätten Sie hover() verwenden können?
Ich habe die neue jQuery 1.4 Syntax zur Erstellung von Elementen verwendet, und ich kann "hover" meines Wissens nach nicht wirklich als Teil davon verwenden. Hover ist ohnehin kein "echtes" Ereignis in JavaScript, es wird nur auf mouseenter und mouseleave abgebildet =)
Könnte man nicht auf doppelte Divs verzichten und stattdessen einfach die box-sizing: border-box; Eigenschaft verwenden?
# -moz-box-sizing: border-box;# -webkit-box-sizing: border-box;
# box-sizing: border-box;
Sie hatten einen Artikel darüber bei Nettuts, und es scheint, dass das den gleichen Effekt hätte, ohne das zusätzliche Div.
Vielleicht? Ich weiß nicht viel darüber. Man kann auf Divs ganz verzichten mit Tim's Beispiel oben. Mit jQuery wäre es jedoch browserübergreifender als jede dieser Techniken.
Ich habe gerade Tim's Methode verwendet. Siehe hier
http://www.openfieldimage.com/concept
Aber ich mag die dünnen Linien (sieht aus wie ein dünnes Kreuz) über den Bildern nicht, wenn man Safari benutzt.
Weiß jemand, wie man das beheben kann?
Diese Linien sieht man in Firefox nicht.
Wie immer, Chris, diese Seite hat eine unheimliche Fähigkeit, unerwartet coole Dinge zu bewirken. Danke. Außerdem würde ich wetten, dass css-tricks die beste Demoseite überhaupt hat!
Klingt nach einer CSS-Galerie, die darauf wartet, gemacht zu werden.
Das ist fantastisch, Chris. Ich werde es für mein derzeit in Entwicklung befindliches Theme verwenden :)
Ja, ich denke, es ist ein universeller Effekt. Früher bin ich mit so etwas in Flash verrückt geworden.
Wage ich es zu sagen, Flash macht so viel Spaß!
Schöner Effekt. Mit etwas Transparenz wäre das meiner Meinung nach toll auf der Portfolio-Website eines Künstlers. Hey, so ähnlich wie die, an der ich gerade arbeite... was für ein Zufall!
Gute Arbeit! Ich werde es für unser nächstes Projekt verwenden. Danke!
Weiter so!
Sehr cooler Effekt
Hervorragend
Sehr interessant, sehr schick~
CSS3 könnte diesen Effekt in Zukunft erzielen.
Hat jemand Probleme mit IE und verlinkbaren Bildern, die diesen Plugin verwenden? Ich habe dieses Plugin auf meine Bilder angewendet, die zu einer Unterseite verlinken, und in IE7 & IE8 sind die Bilder nicht anklickbar und leiten zur nächsten Seite weiter (bleiben einfach auf der Seite, es werden keine Fehler angezeigt). Funktioniert in anderen Browsern wie FF (Mac & PC), Safari, Opera und Chrome einwandfrei.
Es scheint eine JS-Operation zu sein, die das Durchklicken stoppt.
Irgendwelche Gedanken?
Wage ich es zu sagen, Flash macht so viel Spaß!
Gute Arbeit! Ich werde es für unser nächstes Projekt verwenden.
Chris, ich wollte dir nur Bescheid geben, dass ich das fantastisch finde und dass diese Website dich dreist ausgenutzt hat
http://www.htmldrive.net/items/show/327/Inset-Border-Effect-jQuery-Plugin.html
Ich habe den Link nofollow'ed, damit sie keine deiner Pagerank-Props bekommen.
Mit deinen exakten Bildern und allem.
Hallo,
Ich habe dieses Plugin zusammen mit jQuery Cycle verwendet. Funktioniert in FF/Chrome großartig, aber in IE7/IE8CMode verhält es sich seltsam. Es umrandet das Bild nicht gut und ist zunächst kleiner als das Bild (lässt ca. 1 Pixel der Fotografie sichtbar) und wird dann 'plötzlich' richtig groß. Sehr seltsamer und hässlicher Effekt. Hat jemand das erlebt?
Hallo Chris, danke für dieses nützliche Plugin. Ich werde es für mein nächstes Projekt verwenden.
Ich habe eine Variante dieses schönen Plugins entwickelt, das verschiedene Konfigurationsoptionen bietet.
Ich möchte wissen, was du davon hältst?
Hier ist der Link: http://loige.altervista.org/jQueryNiftyBorders/
und das GitHub-Projekt: http://github.com/loige/jQueryNiftyBorders
Ich habe einige Probleme in IE. Die Bilder, auf die ich den Effekt anwende, sind auch auf andere URLs verlinkbar. Funktioniert in Firefox, aber die Bilder sind in IE nicht mehr anklickbar. Gibt es eine Lösung dafür. Ich habe die Klasse wie angewiesen auf img gesetzt..
Ich hoffe, Sie können helfen.. Danke.
Mike