Lieber Undertaker,
erst mal Gratulation zum neuen Design vom Blog. Mir gefällt es sehr gut. Ich habe die letzten zwei Wochen die Fortschritte beobachtet und fand es eine süße Idee, die Blogleser mit einzubinden.
Ist ganz super toll geworden.
Mich würde aber interessieren, wie du den blauen Neon-Glow-Effekt um die Eingabefelder bei den Kommentaren gemacht hast.
Ist das Skript oder CSS?
Vielen Dank für die netten Zeilen.
Das ist CSS und zwar so:
#commentform textarea:focus, #commentform input]:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
und von Leser Paul optimiert sieht es so aus:
#commentform textarea:focus, #commentform input]:focus {
-webkit-box-shadow: 0 0 5px #51cbea;
-moz-box-shadow: 0 0 5px #51cbea;
box-shadow: 0 0 5px #51cbea;
border: 1px solid #51cbea;
}
Die Farbangabe #51cbea kann man natürlich an seine persönlichen Vorlieben anpassen.
Hashtags:
Ich habe zur besseren Orientierung noch einmal die wichtigsten Schlagwörter (Hashtags) dieses Artikels zusammengestellt:
Keine Schlagwörter vorhanden
Blau? Sehe ich hier nicht.
Ich muss also doch halbblind sein.
Ich sehe auch nix. FF 13.0 unter WinXP. Vermisse aber ehrlich gesagt auch keine Effekte, kann gerne so bleiben.
Hum, vielleicht ist das Betriebssystem ausschlaggebend? Ich habe Windows 7 Enterprise X64.
@Al: das geht nicht in jedem Browser. In Chrome (und damit wahrscheinlich auch Safari) ist der blaue Schimmer sichtbar, während im Firefoy nur ein grauer Rand sichtbar ist.
Bei mir geht es auch im Firefox.
Das sind die letzten Worte eines Programmierers, bevor der Kunde ihm an die Gurgel springt wie Ignaz.
Ich kann ja nix anderes machen, als die Effekte immer in den gängigsten Browsern gegen zu checken.
Da hab ich ein Zwinkersmilie vergessen. Hier, gratis Nachlieferung:
😉
Bei mir schimmert nix in Chrome.
Ich hab auch keinen Schimmer.
Bakenfalter
Ich habe hier den Glow auf: Firefox 13, SR-Ware Iron 18, Google Chrome 19, Opera 11.64 und Internet Explorer 9. Welchen Browser setzt du ein, Big Al?
Google Chrome 19.0.1084.56 m.
Ahhhhh!
Im Feuerfuchs geht es jetzt.
Mal den Browser-Cache gelöscht? Sonst einfach abwarten, die Seite hier wird auch gecached. Irgendwann ist der Effekt da.
Man sieht ihn sowieso nur, wenn man die Eingabefelder anklickt.
Das geht in jedem Browser.
Ist nämlich ein Märchen, dass alles was anderswo funzzt bei einem selbst nie geht, weil der Browser dass nicht kann.Mal abgesehen von so Schrott wie IE gehen die meisten Sachen überall.
Die Box-Shadow-Eigenschaft wird noch nicht von jedem Browser unterstützt, da sie relativ neu ist (allerdings sollten die aktuellen Versionen von Firefox, Chrome, Safari, Opera und auch Internet Explorer dazu in der Lage sein) und ihr bisheriger W3C-Status (das ist das Konsortium, das über neue Html-/Css-Eigenschaften entscheidet) erst auf „candidate recommendation“ steht (im Prinzip die 1. Vorstufe zur finalen Implementierung im jeweiligen Browser).
Damit solche in der Entwicklung befindlichen Css-Eigenschaften trotzdem angezeigt werden können, empfiehlt es sich, sie im Css mit dem browsertypischen Präfix anzugeben:
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
Außerdem erfolgt im o.g. Beispiel die Farbangabe mittels rgba(), das auch nicht alle Browser verstehen. Da die Transparenz aber eh auf 1 gesetzt ist, kann dafür auch der notwendige Hex-Code
#51cbeeaangegeben werden, das kann die Darstellungsprobleme minimieren.Cool, Paul, danke! Auch wenn deine Farbangabe etwas kryptisch ist 😉
Ups, da ist mir das „a“ mit reingerutscht.
#51cbeeist natürlich der richtige Farbwert 🙂Danke für die Ergänzung im Artikel. Leider fehlt bei der
moz-Angabe noch das-vor demmoz. Diese „Entwicklungseigenschaften“ müssen immer in der Form-Präfix-Eigenschaftangegeben sein, ansonsten ignorieren die Browser sie (des Öfteren leidvoll festgestellt: Da sucht man einen Fehler und es ist ein fehlendes Minus… Oder ein Semikolon, das ist genauso schön).Also, nochmal zusammenhängend in richtig:
-moz-box-shadow: 0 0 5px #51cbee;Test in Chrome ohne Adblock plus.
Da geht es jetzt mit dem Blau.
Und jetzt geht es auch mit AdBlock plus. Aha.
In meinem Opera 11.64 geht’s. Ohne JavaScript und Plug-Ins. Sehr schön. Ist mir aber erst aufgefallen, als ich das hier gelesen hab…
Das ist schon saustark, wie die Portierung geglückt ist. Design passt und ist ansprechender geworden, die Geschichten sind da und einsortiert, die Funktionen sind wie gewohnt, als hätte sich unter der Motorhaube gar nix geändert, und das alles fast ohne Auszeit. Toll gemacht!
Die HTML-Tags für die Kommentare finde ich übrigens besser als in der alten Version. Praktisch, dass da unten ein Spickzettel steht. In der alten Version musste ich den Code immer durchprobieren, weil ich mir den nie
merkelnmerken konnte. Nur die Fohrschau führs Korekturlasern fehlt mir 😉Mir vällt auch die Fohrschau 😉
Vorschau ist doch da. Musstu rischtisch gucken!
Noch mehr Vorschau geht gar nicht!
Noch ein Test.
Nach dem Entmüllen meines Caches sehe ich den Gloweffekt zwar (man muss übrigens in ein Feld klicken, sonst ist er nicht sichtbar), dafür ist die komplette Seitenleiste rechts wieder mal verschwunden.
Und den schmerzlich vermissten Forschaubatten hab ich auch schon so ein, zweimal erwähnt… *mitm Pfahl wink*
mitmPfahlwink: Guckstu unten. Jetzt zufrieden? Menno, und morgen noch nen kostenlosen Kaffee für alle. Unersättliches Volk! 😉
Also Kaffee nehm ich immer gern. Jetzt war ich grad am schreiben, wie unendlich leid es mir tut, das ich trotz Augen offen, Brille auf und Cache löschen keinen Vorschaubutton sehe.
Und dann hab ich versehentlich ein Stückchen weiter runter gescrollt und hab die Vorschau gesehen. Für alle die noch suchen: es wird live beim Tippen schon wie ein fertiger Beitrag unter dem Button „Kommentar senden“ angezeigt. Da muss man erst mal rauf kommen 🙂
Boooh ey und ich dachte schon, ich sehe + poste doppelt. Auf den Schreck erst mal einen Eimer Kaffee!
🙂
Dito, nach einem kompletten Refresh (Ctrl+F5) sehe ich die Glow-Effekte im FF 12.0, davor waren sie nicht sichtbar.
Rambomur sagte zu Plagidimo: „Verrecke, Schurke, elender Morkel, Du!“
Morkel, ist das der lange vermisste Bruder von der Stinkmorchel?
Nein, es ist der Magier von Otaramba N’Gwolon, der die Bücher der Weisen von Alamptia gestohlen hat und das Volk von Mitteldeutscherrundfunkerde in Verdammnis gestürzt hat, wenn nicht der kleine Morph mit seinen Gesellen Schukola, M’Bari und Phtolon rechtzeitig das Horn des Einhorns Gasella streichelt.
Menno, kennst Du die 17-teilige Buchserie: „Das Mär von Alagonia“ etwa nicht?
Nö.
TESTtesttest123