Effekt erstellen

[ullihantke]

Hallo Freunde,

ich würde gerne folgende Funktion per html bzw. Css erstellen habe aber keine Ahnung ob dies möglich ist und wie es gehen soll.

Folgendes:

Es sind viele kleine und große Kreise mit einem Text innen, gerne hätte ich, dass wenn man mit der Mouse drauf geht dieses scharf wird und die anderen unscharf. Beim Start soll nur mein Logo scharf sein und die anderen iCons unscharf. Wenn man dann drauf geht würde ich gerne die anderen unscharf werden lassen während das wo die Mouse drauf ist scharf ist (wird).

Kann man da jemand helfen?

 

[afr0kalypse]

Ja das geht. Schau mal hier:
https://github.com/bronfman/css-depth-of-field

 

[MyBad]

Ja das geht. Schau mal hier:
https://github.com/bronfman/css-depth-of-field

Kann man so machen. Ist allerdings nicht gerade performant.

 

[Panta rhei]

Kann man so machen. Ist allerdings nicht gerade performant.

Himmel..., was ich solche Kommentare liebe...

Wenn dir die vorgeschlagene Lösung eines anderen Users nicht gefällt und du das schon bemerken musst, dann poste doch wenigstens einen besseren Vorschlag. Das könnte dem TE wenigstens nützen.

Oder ist dein "performantes" Fachwissen so außerordentlich streng geheim und gar nur gegen ausgiebiges Betteln und Barzahlung zu erhalten, dass du dich so unauffällig bedeckt hältst?

.....

Und nun noch für den TE, damit ich nicht auch nur einen themenfremden Kommentar abliefere:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/

 

[MyBad]

Das Problem ist, dass es keine performantere Lösung per HTML + CSS gibt. Daher auch keine Vorschläge und lediglich der Hinweis auf die ressourcenfressende Lösung.

Man sollte aber eben wissen, dass man mit dieser Geschichte den Surfspaß für Nutzer deutlich einschränkt.

Wenn man also nicht weiß, wie man mit meinem Hinweis umgehen muss, dann kann ich leider auch nichts dafür.

Deine schnell mal nebenbei gegoogelte Lösung hättest du dir im Übrigen sparen können. Wenn dir ein Kommentar nicht passt PN deinen Unmut direkt an mich.

 

[Panta rhei]

Das Problem ist, dass es keine performantere Lösung per HTML + CSS gibt. Daher auch keine Vorschläge und lediglich der Hinweis auf die ressourcenfressende Lösung.

Du bist ja ein rechter Schlaumi, oder?

Soweit ich das Anliegen des TE erfasse, hat er nicht nach einer "performanteren" (Junge, Junge... ) Lösung seines Vorhabens gefragt, sondern danach, ob und wenn ja, wie er seine Idee mit html oder CSS umsetzen kann.

Meine Antwort an den TE: Ja, geht mit html und CSS und wie es geht, dafür habe ich hier mal einen Link, der dir alles genauestens erklärt.

Was du dir daneben noch alles so für performancetechnische Gedanken zu dem Thema machst, ist hier nicht das Thema und damit auch gar nicht erwähnenswert, da du damit lediglich/bestenfalls Fragen beantwortest, die niemand gestellt hat.

 

[MyBad]

Was ist dein Problem mit meinem durchaus berechtigtem Hinweis auf Kompatibilitäts- und Performance-Probleme?

Auch wenn der TE nicht explizit danach fragt, warum sollte das nicht doch eine wichtige Einschränkung in seinem Vorhaben sein?

Lass ihn doch entscheiden, ob diese Info ihm oder auch anderen Suchenden weiterhilft. Nur weil du diesen Hinweis nicht hilfreich findest, heißt das nicht, dass es anderen genau so ergeht.

Was ist nur aus diesem Forum geworden?

ps: Deine Lösung funktiniert vielleicht bei Bildern. Bei Texten wie vom TE beschrieben, haut das schon nicht mehr hin.

 

[Gelöschtes Mitglied 562026]

Mann o Mann, ich als TE würde mir woanders Hilfestellung holen

Texte können übrigens auch Bilder sein...

 

[Panta rhei]

ps: Deine Lösung funktiniert vielleicht bei Bildern. Bei Texten wie vom TE beschrieben, haut das schon nicht mehr hin.

Schon mal davon gehört, dass man auch Texte als Bild darstellen kann?

Ist aber auch egal, denn bislang hat der TE sich nicht wieder zu Wort gemeldet und das sollten wir doch einfach abwarten.
Bislang hat er Antwort auf seine Fragestellung bekommen und sollte er doch etwas anderes brauchen, so wird er sicher danach fragen und dann kannst du dich ja gerne wieder einbringen.

 

[Myhar]

Texte können übrigens auch Bilder sein...

Nein können sie nicht. Entweder sie sind Texte, dann sind sie keine Bilder oder sie sind Bilder, dann sind es keine Texte. Texte auf Bildern sind nämlich auch nur Bilder.

 

[ullihantke]

Was für eine Schlacht hier....

Zurück zum Thema.

Das mit dem Mouse over kenne ich und würde ich auch ohne Probleme hinbekommen.

Was aber mein Problem ist, ich möchte dass wenn die Besucher auf meine Website kommen, ein Kreis scharf ist (mein Logo) und die anderen unscharf. Wenn jetzt der Besucher auf ein unscharfes Bild geht (welches dann scharf wird), soll das Hauptbild unscharf werden, wenn er dann die Mouse wieder weg bewegt soll es wieder unscharf werden und das Hauptbild scharf...

Hier steckt das Problem

 

[Myhar]

Und wo genau steckt dein Problem? Du musst :hover Anweisungen nicht als letztes im CSS haben.

div:hover .icon1{background-image:url(blurred1.jpg);}
div:hover .icon2{background-image:url(blurred2.jpg);}
div:hover .icon3:hover{background-image:url(unblurred.jpg);}

<div> <div class="icon1"> </div> <div class="icon2"> </div> <div class="icon3"> </div></div>>

 

[ebene11]

Noch als Ergänzung zur Unschärfe:

- Wenn es nur Text ist, kannst du über text-shadow eine Unschärfe erzeugen
- als Alternative zu den SVG-Filtern ist eine CSS-Eigenschaft in Arbeit (http://www.w3.org/TR/filter-effects/)

 

[ullihantke]

Es sind Bilder, kein Text.

Danke

 

[ullihantke]

Hallo Freunde,

ich stehe mal wieder vor einem Problem.

ich möchte ein Mouse over per Hintergrundbild machen.

Das mouseover Bild soll dann langsam überblenden. Ich habe auch ein Code dafür gefunden nur entstehen da leichte Probleme.

Code:
#slider-wrapper{
background: url(../img/startbild-web.png)no-repeat center bottom fixed ;
transition-duration: 1.9s;
background-size: cover;
/* Firefox */
-moz-transition-duration: 1.9s,0.5s;

/* Safari / Chrome */
-webkit-transition-duration: 1s,0.5s;

/* Opera */
-o-transition-duration: 1s,0.5s;
width: 100%;
min-height: 1120px;
padding-top: 80px;
}

#slider-wrapper:hover {
background: url(../img/startbild-web-over.png)no-repeat center bottom fixed;
background-size: cover;
}

Problem:

Bei Firefox (aktuelle Version und IE aktuelle Version) funktioniert der Effekt nicht.
Bei allen Browser ist es so, dass wenn ich mit der Mouse drüber es kurz ausblendet und dann wieder kommt. Es blinkt quasi vorher... und dann geht es.

Es macht den Anschein als ob es erst laden muss bevor es funktionier.... Warum?

 

[MyBad]

Das ist normal. Du müsstest die zweite Grafik also am besten ebenfalls schon zu Beginn laden. Zum beispiel als 2. background-image (mit CSS3 kein Problem).

Die schickste Lösung dabei wäre aber wohl mit Sprites zu arbeiten (alle Zustände in einer Grafik).

 

[ullihantke]

das mit dem als background-image zu laden hat klasse funktioniert. Nur habe ich immer noch das Firefox und IE Problem.