gesucht: Icon für CSS-Kurs

[Matthias Scharwies]

Servus!

Viele Kurse haben ja bereits ein Icon, das den kurzen, zweizeiligen Einführungstext bereichert. ^[1]

Siehe hier: Kategorie:Icon

Für den Einstieg-in-CSS- Kurs suche ich eine passende Grafik.

Was könnte man da nehmen?

Das eigentlich bekannte CSS3-Logo ist ja eigentlich gar keins: https://www.w3.org/wiki/Logos/CSS

Herzliche Grüße

Matthias Scharwies

---

1. Optimalerweise würde die Grafik später im Kurs noch mal thematisiert werden, so wie hier: CSS/Tutorials/Boxmodell/übergroßer_Inhalt ↩︎

[Rolf B]

Hallo Matthias,

es gibt einiges.

https://duckduckgo.com/?q=icon+css&va=b&t=hc&iax=images&ia=images

Nur - wovon kann man sich insprieren lassen ohne Lizenz zu zahlen...

Was ich ganz schick fände, sind die Ideen

   HTML     CSS 
   < />     {;}

wenn da nicht der dumme Fakt wäre, dass {;} genauso gut für JS stehen kann.

Das "stacked boxes" Logo, von dem die W3C Seite spricht, sagt mir übrigens gar nichts. Oder meinen sie das hier:

mich stört an der Quelle https://webiconspng.com/icon/8714 nur, dass sie weder ein "About us" noch einen Abschnitt über Lizenzierung haben. Diese drei Kisten haben sicherlich wenig Schöpfungshöhe, aber man weiß ja nie wo eine Marke lauert. Hier ist es auch - angeblich frei verwendbar.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

es gibt einiges.

https://duckduckgo.com/?q=icon+css&va=b&t=hc&iax=images&ia=images

Nur - wovon kann man sich insprieren lassen ohne Lizenz zu zahlen...

Evtl das hier: https://vectorified.com/download-image#html-css-icon-32.png

{...;}

sollte ja wie </> frei verwendbar sein. Evtl. so als Stylesheet

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

du bist zu schnell - meine Postings müssen im Editor immer etwas reifen. Guck nochmal 😉

Rolf

[Raketenwilli]

Diese drei Kisten haben sicherlich wenig Schöpfungshöhe, aber man weiß ja nie wo eine Marke lauert.

Mach es einfach bunt. Meide aber

• Magenta, sonst klagt Dir ein teutonischer Konzern einen vertikalen Spalt in den Hals.
• Die Kombination aus blau, weiß und rot. Es sei denn natürlich, Du willst auch ein güldenes Hakenkreuz drauf malen.

[Rolf B]

Hallo Raketenwilli,

Die Kombination aus blau, weiß und rot.

Ich dachte, die Unterlage für die missbrauchte Swastika wäre schwarz-weiß-rot gewesen.

Aber das ist kein Problem. Farben haben wir genug zur Auswahl.

Rolf

[Raketenwilli]

Ich dachte, die Unterlage für die missbrauchte Swastika wäre schwarz-weiß-rot gewesen.

Die gab es auch in weiß, rot, gülden.

[Matthias Scharwies]

Servus!

Hallo Matthias,

es gibt einiges.

https://duckduckgo.com/?q=icon+css&va=b&t=hc&iax=images&ia=images

Nur - wovon kann man sich insprieren lassen ohne Lizenz zu zahlen...

Was ich ganz schick fände, sind die Ideen

   HTML     CSS 
   < />     {;}

wenn da nicht der dumme Fakt wäre, dass {;} genauso gut für JS stehen kann.

Das "stacked boxes" Logo, von dem die W3C Seite spricht, sagt mir übrigens gar nichts.

Ich glaub(t)e, dass sie dieses HTML5-Logo und die daraus entstandenen Derivate für CSS und JS meinten:

Oder meinen sie das hier:

So ähnlich - jetzt auch Wikimedia gefunden:

https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets_icons

Da sieht auch das von Jörg erwähnte gnome-Logo.

mich stört an der Quelle https://webiconspng.com/icon/8714 nur, dass sie weder ein "About us" noch einen Abschnitt über Lizenzierung haben. Diese drei Kisten haben sicherlich wenig Schöpfungshöhe, aber man weiß ja nie wo eine Marke lauert. Hier ist es auch - angeblich frei verwendbar.

Ich lass es noch mal ein paar Tage sacken!

Rolf

Herzliche Grüße

Matthias Scharwies

[Raketenwilli]

So ähnlich - jetzt auch Wikimedia gefunden:

https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets_icons

Einige davon beinhalten etwas, was momentan (außer bei den nur nach eigenem Behaupten „gesunden“ ungeimpften Vollpatienten) sehr negative Gefühle weckt: Ein sichtbares „z“.

Aber das hier wäre mein Kandidat, weil es zeigt, wofür CSS gut ist:

https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets_icons#/media/File:Faenza-text-css.svg

[Matthias Scharwies]

Servus!

So ähnlich - jetzt auch Wikimedia gefunden:

https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets_icons

Einige davon beinhalten etwas, was momentan (außer bei den nur nach eigenem Behaupten „gesunden“ ungeimpften Vollpatienten) sehr negative Gefühle weckt: Ein sichtbares „z“.

Na ja, nicht jedes Checkmark ist ein „z“ - wobei es schon Wahnsinn ist, wie ein solches inhaltsleeres Erkennungszeichen plötzlich zum Symbol wird. In einem Zeitungsartikel las ich, dass das Zeigen eines solchen Symbols eben auch den Verzicht auf Argumente erleichtert. Es erklärt aber auch, wie die Nazis das eher undeutsche Hakenkreuz so prominent einführen konnten.

Aber das hier wäre mein Kandidat, weil es zeigt, wofür CSS gut ist:

https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets_icons#/media/File:Faenza-text-css.svg

Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.

Cards als Ersatz für Links und Icons?

Ich habe auf der Wie fange ich an?-Seite mal zwei „Cards“ angelegt.

@Der Martin @Rolf B @TS Wäre das evtl. etwas?

Man könnte …

• für Linklisten die {{nSpalten|...}} durch ein Grid ersetzen und so die Karten passend einsetzen.
• in einer weiteren Variante die Karte als Erkennungszeichen / Icon / Teasergrafik oben rechts auf die jeweiligen Portalseiten setzen.

Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).

Dann könnte man auch vorhandene - oder zu erstellende Grafiken verwenden. Es sollte aber keine festen Parameter 1=Überschrift|2=text|3=grafikenthalten, sondern so flexibel wie möglich gehandhabt werden können.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Cards als Ersatz für Links und Icons

Das sieht gar nicht schlecht aus.

Die CSS Card fand ich schlecht lesbar (das CSS war zu abgesetzt, um als Teil der Überschrift zu funktionieren), darum habe ich das nbsp entfernt und ein vertical-align:middle hinzugefügt. Nur als Idee…

Rolf

[Der Martin]

Moin,

Cards als Ersatz für Links und Icons

Das sieht gar nicht schlecht aus.

ja, gefällt mir auch gut.

Die CSS Card fand ich schlecht lesbar (das CSS war zu abgesetzt, um als Teil der Überschrift zu funktionieren), darum habe ich das nbsp entfernt und ein vertical-align:middle hinzugefügt. Nur als Idee…

Ich hab's vorher nicht gesehen. Was nur gewöhnungsbedürftig ist: Die Unterstreichung des Links bei :hover geht mitten durch das CSS.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

Die Unterstreichung des Links bei :hover geht mitten durch das CSS.

Upsa. Der Fuchs genehmigt sich einen Unterschied zu Chromia. Oder die Chromia einen Unterschied zum Fuchs?

Auf den Hover-Effekt habe ich gar nicht geachtet. Aber ganz ehrlich: Der wirkt da auch nicht so dolle, selbst wenn er nicht durch das CSS durchgeht. Die unterschiedliche Strichstärke…

Mit border-bottom statt text-decoration und einem vertical-align:1.2em auf dem "Einstieg von" Text - statt vertical-align:middle auf CSS - sieht es so aus:

<a href="/wiki/CSS/Tutorials/Einstieg" title="CSS/Tutorials/Einstieg">
  <span style="vertical-align: 1.2em;">Einstieg in </span>
  <span style="color:#c82f04;font-size: 4em;">CSS</span>
</a>

Wenn man das sauber ohne inline-styles lösen will, müsste man wohl einen Span drumrum legen mit einer Klasse "borderlink" oder so, womit man dann aus der common.css heraus in die Dekoration des Links eingreifen kann. Gerne auch vorlagengetrieben... Aber ohne die Spans als Formatierungsziel geht's auch nicht.

Eine Vorlage für die Card braucht's dann sowieso. Ich würde die Gestaltung des Links aber nicht an die Gestaltung der Card koppeln, das sollten getrennte Vorlagen sein.

Wenn man das Thema denn weiter verfolgt. Bislang gips ja nur 3 Äußerungen.

Rolf

[TS]

Hello,

Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.

Cards als Ersatz für Links und Icons?

Ich habe auf der Wie fange ich an?-Seite mal zwei „Cards“ angelegt.

@Der Martin @Rolf B @TS Wäre das evtl. etwas?

Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben und sich z. B. farblich unterscheiden. Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?

Glück Auf
Tom vom Berg

[Matthias Scharwies]

Servus!

Hello,

Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.

Cards als Ersatz für Links und Icons?

Ich habe auf der Wie fange ich an?-Seite mal zwei „Cards“ angelegt.

@Der Martin @Rolf B @TS Wäre das evtl. etwas?

Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben

Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:

 .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  }

und sich z. B. farblich unterscheiden.

Ja, im Rahmen unserer Farbtabelle, wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben

Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).

Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?

Ja, wobei ich mir noch nicht im Klaren bin, ob man …

<a href="....">
  <div class="card">
  ...
 </div>
</a>

oder

<div class="card">
  <a href="....">
    ...
  </a>
</div>

nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟

[[EDIT]] Habe mal hier etwas versucht: Benutzer:MScharwies/cards

Fazit

• grid geht
• Es ist in Mediawiki unmöglich Links um Block-Elemente zu legen. Es wäre möglich, mit vielen spans zu arbeiten. Bilder können aber nur mit [[Datei:xxx|link=yyy]]- eingebunden werden, was aber nicht innerhalb eines wikilinks geht.
• einzelne Bilder (siehe untere Reihe) sehen ok aus.

[/EDIT]]

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

Icvh habe noch mal gehirnt, wie man das ohne Extension halbwegs sortiert hinkriegt:

Prämisse: Wiki-Link darf nur Inline-Elemente enthalten!

1. Schritt: Vorlage:Card

Wiki-Link mit einem „container“-span

• class="card", die im CSS
  • die text-decoration des Links aussschaltet
  • Höhe, (Innen)-Abstände + Rahmendicke festlegt.

2. Schritt: weitere Parameter:

• Farbe (für Text und Rahmen)
• Kind-spans mit beliebigem Inhalt und Aussehen.

über Mediawiki:Commons.css erhalten alle spans die volle Breite, damit die gesamte Fläche der Card anklickbar ist.

.card-container span span {
  display:inline-block;
  width:100%;
}

Evtl kann man das ganz als grid gestalten, damit die letzte Zeile immer unten am Kasten hängt. (könnte man aber auch als span class="footer" realisieren)

Trotzdem bleibt eine Card mit Text und Bild so erst einmal unmöglich. 😟

Herzliche Grüße

Matthias Scharwies

[TS]

Hello,

Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.

Cards als Ersatz für Links und Icons?

Ich habe auf der Wie fange ich an?-Seite mal zwei „Cards“ angelegt.

@Der Martin @Rolf B @TS Wäre das evtl. etwas?

Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben

Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:

 .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  }

und sich z. B. farblich unterscheiden.

Ja, im Rahmen unserer Farbtabelle, wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben

Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).

Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?

Ja, wobei ich mir noch nicht im Klaren bin, ob man …

<a href="....">
  <div class="card">
  ...
 </div>
</a>

oder

<div class="card">
  <a href="....">
    ...
  </a>
</div>

nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟

[[EDIT]] Habe mal hier etwas versucht: Benutzer:MScharwies/cards

Fazit

• grid geht
• Es ist in Mediawiki unmöglich Links um Block-Elemente zu legen. Es wäre möglich, mit vielen spans zu arbeiten. Bilder können aber nur mit [[Datei:xxx|link=yyy]]- eingebunden werden, was aber nicht innerhalb eines wikilinks geht.
• einzelne Bilder (siehe untere Reihe) sehen ok aus.

[/EDIT]]

Man könnte aber (mit Hover) ein transparentes Bild darüber legen, dass dann den Link enthält, oder? Aber dann kommt der Vorleser vermutlich nicht mehr an die Texte in der Card?

Glück Auf
Tom vom Berg

[Matthias Scharwies]

Guten Morgen,

Man könnte aber (mit Hover) ein transparentes Bild darüber legen, dass dann den Link enthält, oder? Aber dann kommt der Vorleser vermutlich nicht mehr an die Texte in der Card?

Den Screenreader interessiert position:absolute ja nicht. Die Texte wären da, aber nicht mit der Maus markierbar - braucht's das?

Aber ob man da wirklich mit absoluter Postionierung arbeiten sollte?

Es wäre mit a als Block-Element so einfach!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen,

So der span-Suppen-Entwurf sieht gar nicht mal so schlecht aus:

• Benutzer:MScharwies/cards

Evtl. könnte man einem (leeren) span ein Hintergrundbild verpassen? Innerhalb einer Vorlage müsste man evtl. nur die URL als Parameter übergeben.

Geht nicht: Mediawiki verbietet das Einfügen von Hintergrundbildern!

Was meint ihr?

Herzliche Grüße

Matthias Scharwies

[TS]

Hello,

Siehe hier: Kategorie:Icon

Mir fällt da nur ein Thema für ein Logo ein ;-)

Glück Auf
Tom vom Berg

[Raketenwilli]

Für den Einstieg-in-CSS- Kurs suche ich eine passende Grafik.

Nicht „suchen“. Finden!

~> find /usr/share/icons -name "*text-css*"
/usr/share/icons/Numix/16/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/16/mimetypes/text-css.svg
/usr/share/icons/Numix/24/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/24/mimetypes/text-css.svg
/usr/share/icons/Numix/64/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/64/mimetypes/text-css.svg
/usr/share/icons/Numix/22/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/22/mimetypes/text-css.svg
/usr/share/icons/Numix/32/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/32/mimetypes/text-css.svg
/usr/share/icons/Numix/48/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/Numix/48/mimetypes/text-css.svg
/usr/share/icons/Humanity/mimes/16/gnome-mime-text-css.svg
/usr/share/icons/Humanity/mimes/24/gnome-mime-text-css.svg
/usr/share/icons/Humanity/mimes/24/text-css.svg
/usr/share/icons/Humanity/mimes/22/gnome-mime-text-css.svg
/usr/share/icons/Humanity/mimes/22/text-css.svg
/usr/share/icons/Humanity/mimes/48/gnome-mime-text-css.svg
/usr/share/icons/Humanity/mimes/48/text-css.svg
/usr/share/icons/gnome-colors-common/24x24/mimetypes/gnome-mime-text-css.png
/usr/share/icons/gnome-colors-common/24x24/mimetypes/text-css.png
/usr/share/icons/gnome-colors-common/scalable/mimetypes/gnome-mime-text-css.svg
/usr/share/icons/gnome-colors-common/scalable/mimetypes/text-css.svg
/usr/share/icons/gnome-colors-common/32x32/mimetypes/gnome-mime-text-css.png
/usr/share/icons/gnome-colors-common/32x32/mimetypes/text-css.png
/usr/share/icons/gnome-colors-common/22x22/mimetypes/gnome-mime-text-css.png
/usr/share/icons/gnome-colors-common/22x22/mimetypes/text-css.png
/usr/share/icons/gnome-colors-common/16x16/mimetypes/gnome-mime-text-css.png
/usr/share/icons/gnome-colors-common/16x16/mimetypes/text-css.png