nicht angemeldet
<button> verwenden?
0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0 0 0 0 0 Gunnar Bittersmann
0
0
<button> verwenden?
Der Martin
Matthias ApselMoin,
ich bin durch diesen Artikel http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/ auf das HTML Element <button> aufmerksam geworden.
Ich möchte diese zwei Schaltflächen
damit umsetzten. Bin ich da auf dem richtigen Weg, oder doch lieber ein <span> oder <div> nehmen? Würde beide Buttons als Grafik ausschneiden und als Background einbinden.
-
@@Jnnbo:
nuqneH
… auf das HTML Element <button> aufmerksam geworden.
Ich möchte diese zwei Schaltflächen … damit umsetzten. Bin ich da auf dem richtigen Weg, oder doch lieber ein <span> oder <div> nehmen?
Zum Abschicken von Formularen oder als Auslöser für JavaScript ist alles andere als <button> falsch. Für Links ist alles andere als <a href=…> falsch.
Würde beide Buttons als Grafik ausschneiden und als Background einbinden.
Würde ich nicht. Den Text würde ich als Text auf den Button setzen. Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein. Bleiben nur noch die Icons als Grafiken; und zwar SVG.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Ich möchte diese zwei Schaltflächen
damit umsetzten.
Würde beide Buttons als Grafik ausschneiden und als Background einbinden.
Würde ich nicht. Den Text würde ich als Text auf den Button setzen. Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein. Bleiben nur noch die Icons als Grafiken; und zwar SVG.
Bleibt noch der obere Lichtkegel?
-
Bleibt noch der obere Lichtkegel?
Was meinst du mit Lichtkegel?
-
Bleibt noch der obere Lichtkegel?
Was meinst du mit Lichtkegel?
-
So genau nehme ich das nicht, hab da einfach bisschen mit Gimp herumgespielt :)
-
Hallo,
hab da einfach bisschen mit Gimp herumgespielt :)
hab da einfach bisschen mit jsfiddle herumgespielt. Ein Anfang...
Gruß
Kalk
-
-
-
-
@@Mitleser:
nuqneH
Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.
Bleibt noch der obere Lichtkegel?
Ich sagte: Es werde Licht. Und es ward Licht.
Wo Licht ist, ist auch Schatten.
Qapla'
PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo,
Ich sagte: Es werde Licht. Und es ward Licht.
Das war jemand anderes!
Gruß
Kalk-
Mahlzeit,
Ich sagte: Es werde Licht. Und es ward Licht.
Das war jemand anderes!das schon, aber großartige Leistungen inspirieren auch immer irgendwelche Nachahmer.
Ciao,
Martin--
Ein Snob ist ein Mensch, der sich auf ein Stachelschwein setzt, ohne eine Miene zu verziehen - nur weil ihm jemand gesagt hat, das sei ein Designersessel.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.
Bleibt noch der obere Lichtkegel?
Ich sagte: Es werde Licht. Und es ward Licht.
Wo Licht ist, ist auch Schatten.
PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!
Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.
-
Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.
Wie hier schon geschrieben kommt es mir nicht auf jedes Detail an, aber auch mich würde es interessieren, wie man so ein Button komplett mit CSS inkl. dem Lichteffekt so umgesetzt bekommt.
-
Hakuna matata!
Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.
http://jsfiddle.net/sysrcakf/1/
Die Fraben hab einfach mal nach Augenmaß justiert.
--
“All right, then, I'll go to hell.” – Huck Finn-
Fein! Ich sollte mal meine CSS-Kenntnisse auffrischen :-)
-
Hallo,
wow, das sieht richtig toll aus. Hab mal noch ein Icon eingefügt http://jsfiddle.net/sysrcakf/2/ jetzt stoße ich aber an ein weiteres Problem, wie kann ich dem Icon sagen, er soll bisschen Abstand zum Text haben und der Text bzw. das Icon soll Mittig vom Text (oben nach unten) sein. Vielleicht könntest du mir hier nochmals helfen.
-
Om nah hoo pez nyeetz, Jnnbo!
Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.
Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.
Sowie background-position
Matthias
-
@@Matthias Apsel:
nuqneH
Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.
Schlage dir line-height aus dem Kopf.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Moin Matthias,
Mögliche Lösungsansätze: padding, vertical-align, line-height. Schlage die Suchbegriffe in unserem Wiki nach.
ok, hat geklappt http://jsfiddle.net/sysrcakf/3/
button::before { content: url(http://fs1.directupload.net/images/150221/4wlu6kbs.png); vertical-align: sub; margin-right: 7px; }
-
-
-
-
@@Mitleser:
nuqneH
Der Hintergrund kann ein Gradient und ein Schatten mit CSS sein.
Bleibt noch der obere Lichtkegel?
Ich sagte: Es werde Licht. Und es ward Licht.
Wo Licht ist, ist auch Schatten.
PS: Wenn meine Worte unverständlich erscheinen, noch mal lesen!
Ich glaube, die Worte verstanden zu haben. Wie man den Effekt mit CSS-Schatten hinbekommen soll, bleibt für mich aber im Dunkeln verborgen.
Am Anfang war das Wort „inset“.
Hat 1UP ja schon eindrucksvoll demonstriert. Warum aber mit jsfiddle, was dazu nicht sonderlich taugt?
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
Hallo,
Zum Abschicken von Formularen oder als Auslöser für JavaScript ist alles andere als <button> falsch. Für Links ist alles andere als <a href=…> falsch.
ist mein HTML und CSS richtig? http://jsfiddle.net/sysrcakf/5/
.registrieren { font-size: 0.9em; text-decoration: none; color:hsl(20,50%,40%); padding:0.5em 0.5em 0.5em 0.8em; background-color:white; background-image: linear-gradient(hsl(0,0%,95%), hsl(0,0%,90%)); border-radius:0.5em; border: 1px solid hsl(0,0%,88%); text-shadow: white 1px 1px; width: 7em; display: block; } .registrieren::before { content: url(http://fs1.directupload.net/images/150221/4wlu6kbs.png); vertical-align: sub; margin-right: 8px; }<a href="#" class="registrieren">Registrieren</a> <br><br><br>-
Hallo,
ist mein HTML und CSS richtig?
Das können dir entsprechende Validatoren viel schneller und genauer beantworten.
Von mir zwei Anmerkungen: du missbrauchst offensichtlich <br> für Abstand. Dafür nimmt man besser CSS. Dem Button verpasst du eine feste Breite, das führt bei mir dazu, dass das Icon über dem Text steht. Ist das gewollt?
Gruß
Kalk-
Hallo,
Von mir zwei Anmerkungen: du missbrauchst offensichtlich <br> für Abstand. Dafür nimmt man besser CSS. Dem Button verpasst du eine feste Breite, das führt bei mir dazu, dass das Icon über dem Text steht. Ist das gewollt?
die <br> sind doch nur in diesem Beispiel drin, dass ich beide Buttons untereinander habe. Auf meiner Seite, gibt es später ein Button, da kommen die <br> natürlich wieder raus.
Kann ich nicht bestätigen, dass das Icon über dem Text steht. Und ja der Button hat eine feste Breite, denn in meinem Design hat der Button einen festen Platz, da kann ich nicht sagen, nimm dir den Platz, den du brauchst.
-
Hallo,
Kann ich nicht bestätigen, dass das Icon über dem Text steht.
Achso, wenn es bei dir passt, isses ok. Ich hatte nur gedacht, du suchst feedback.
Gruß
Kalk-
Hallo,
Achso, wenn es bei dir passt, isses ok. Ich hatte nur gedacht, du suchst feedback.
Feedback ist natürlich erwünscht nur mich wundert es eben gerade bisschen warum bei dir das Icon über dem Text steht, was natürlich _nicht_ sein sollte. Mit welchem Browser schaust du?
-
-
-
-
-
