"E-Mail Icon" auf der Website?

Question

Ich lerne gerade, wie ich mit Html, Css und JavaScript eine funktionierende Website erstelle. Jetzt frage ich mich aber, wie ich es schaffen kann, ein rundes Icon mit den Anfangsbuchstaben der E-Mail oder wie auf dem Bild mit einem Hintergrund (meinem Google-Hintergrund) hinzuzufügen.

Welche Programmiersprachen benötige ich dazu, was muss ich ungefähr machen oder gibt es gute Videos, die ich mir dafür angucken kann?
Bei meiner eigenen Recherche konnte ich leider nur Tutorials darüber entdecken, wie man sein Google-Hintergrundbild ändert.
Danke für alle Antworten!

regex9 · Accepted Answer

Für das bloße Anlegen eines runden Icons mit Text/Bild benötigst du keine Programmiersprache.

Du kannst mit CSS einen entsprechend kreisförmigen Ausschnitt auswählen oder (günstig im Falle des Texticons) eine Box mit kreisförmigen Rand definieren.

Beispiel 1 (Bildicon):

<!doctype html>
<head>
  <title>Example</title>
  <style>
    .icon {
      clip-path: circle(40%);
      width: 100px;
    }

    .icon__image {
      height: auto;
      width: 100%;
    }
  </style>
</head>
<body>
  <div aria-hidden="true" class="icon">
    <img alt class="icon__image" height="200" src="some-image.png" width="300">
  </div>
</body>

In diesem Fall wird ein Container mit einem Bild angelegt, dessen Größenverhältnis bei 300:200 liegt. Das Bild wird unter Berücksichtigung dieses Seitenverhältnisses auf die Größe des Containers skaliert. Mit clip-path wird ein kreisförmiger, sichtbarer Bereich bestimmt. Alles außerhalb des Bereichs wird ausgeblendet.

Da es sich um ein Icon handelt, erhält das Bild keinen alternativen Beschreibungstext (alt) und der Container wird generell für Screenreader ausgeblendet (aria-hidden).

Beispiel 2 (Texticon):

<!doctype html>
<head>
  <title>Example</title>
  <style>
    .text-icon {
      align-items: center;
      background-color: rgba(246, 220, 126, 0.8);
      border-radius: 50%;
      display: flex;
      font-family: sans-serif;
      height: 80px;
      justify-content: center;
      letter-spacing: 1px;
      width: 80px;
    }
  </style>
</head>
<body>
  <div aria-hidden="true" class="text-icon">AB</div>
</body>

In diesem Fall wird ein (Flexbox-)Container mit einer festen Höhe und Breite angelegt, welcher seinen Inhalt vertikal (align-items) und horizontal (justify-content) zentriert. Zusätzlich werden eine Hintergrundfarbe und ein paar Schrifteigenschaften vorgegeben. Das border-radius-Property sorgt für abgerundete äußere Kanten.

(...) mit den Anfangsbuchstaben der E-Mail oder (...) meinem Google-Hintergrund (...)

Sofern du Bild/Text so wie in den obigen Beispielen statisch setzt, bleibt es einfach. Solltest du allerdings irgendeine Art automatisierte Logik im Sinn haben (z.B. sollen die E-Mail-Initialien oder das Bild automatisch von deinem Account gezogen werden), dann bräuchtest du tatsächlich eine Programmiersprache.

Im ersten Schritt solltest du dann aber erst klären/recherchieren:

Welche Schnittstellen dir Google bereitstellt, um deine Daten abzufragen (Bsp. für E-Mails: Die Gmail-API).
Falls du bereits einen Webspace o.ä. hast, welche Programmiersprache der darauf laufende Webserver unterstützt. Auch wenn es grundsätzliche eine größere Bandbreite geeigneter Programmiersprachen gibt, mit denen man Anfragen an eine Web-API schicken kann (z.B. JavaScript (auf Node.js-Basis), PHP, Python, Ruby, ...), ist nicht jede ohne Weiteres auf jedem Webserver lauffähig.

Der zweite Schritt wäre das Erlernen der jeweiligen Sprache. Anschließend müsstest du schauen, wie du HTTP-Requests an die entsprechende API schicken kannst und wie die API generell funktioniert (schau dafür in die passende Google API-Dokumentation).

Suiram1 · Answer

Mit HTML und CSS lässt sich rundes Bild normal erstellen. Mit einem Buchstaben innen drinnen geht das auch. Der grundsätzliche Ansatz dafür ist das man den Border Radius in CSS auf 50% setzt was die Rundung erzeugt. Um es nun besser sichtbar zu machen kann man die Border Farbe und Dicke auch noch einstellen. Um das mit einem Buchstaben zu machen kann man ein span-Element das die Buchstaben enthält in ein div-Element mit dem genannten styles packen.
Edit: Da es mit dem Anfagsbuchstaben der E-Mail sein soll, müsstest du dies entweder hard-coden oder das per JavaScript machen.
Edit 2: Videos und Tutorials gibt es für all sowas zu genüge. Generell um optisch gute Websites zu machen könntest du ein CSS Framework wie z.B. Bootstrap ausprobieren. Solche CSS Frameworks haben eine risige Menge an CSS Klassen mit dehnen man sehr einfach so einiges machen.

"E-Mail Icon" auf der Website?

2 Antworten