Tutorial - Kreise mit HTML und CSS

  • Guten Abend zusammen,


    ich habe mir mal überlegt ein Tutorial zu schreiben, wie man Kreise in HTML/CSS erstellt.


    Das Tutorial:


    Als erstes kommt das HTML Dokument. Dort erstellt ihr in dem Grundgerüst, im body ein div-container mit der class "kreis". In diesen erstellt ihr noch ein span-tag mit der class "name". In diesem schreibt ihr jetzt einen Namen. In diesem Tut nehmen wir "Hund Bärle". Nun sollte es so aussehen:


    Nun kommt der CSS-Teil. Dort gebe ich jetzt in dem div.kreis erstmal die background-color, höhe und breite, border, background-image, border-radius, background-repeat, background-position und background-size ein und gebt ihnen Werte.



    Nun haben wir für die class kreis schon alles gemacht. Nun möchten wir noch, dass das der text besser dargestellt wird, dazu wird dieser erstmal eine absolute Positionierung gegeben, mit Abstand von Links und Oben, die Farbe, Hintergrundfarbe und die schriftgröße.


    CSS
    1. span.name
    2. {
    3. position: absolute; /*Absolute Positionierung - aus dem Textfluss rausgenommen kann frei plaziert werden*/
    4. left: 90px; /*Abstand von der oberen li. Ecke nach links*/
    5. top: 190px; /*Abstand von der oberen li. Ecke nach oben*/
    6. color: red; /*schriftfarbe*/
    7. font-weight: 800; /*schriftstärke/-größe*/
    8. background-color: rgba(0,0,0,9); /*Hintergrundfarbe*/
    9. }



    Nun sollte es so Aussehen:


    [Blockierte Grafik: http://image.prntscr.com/image/88dceb00681d42338576e4cb1bdd376c.jpeg]



    Das war das Tutorial dazu. Hoffe ich konnte euch helfen.


    Falls Fehler oder andere Missgeschicke entdeckt werden bitte mitteilen.


    Stef