Eine CSS -Golfübung

Code -Golfing ist eine Art von Programmierung, bei der das Ziel darin besteht, eine Aufgabe mit so wenigen Bytes wie möglich zu erfüllen. CSSBATTLE ist ein Schlachtfeld mit dem Code -Golf -Schlachtfeld, auf dem die Spieler die Zielbilder mithilfe von CSS und HTML erstellen.

Die Regeln sind ziemlich einfach:

• Keine externen Ressourcen (Entschuldigung, nein )
• Ihre Lösung muss sich in Chrom korrekt abgeben (nur zu Bewertungszwecken)

Dies kann eine ziemlich lustige Abreise von der täglichen Front-End-Arbeit sein. Es ist keine Notwendigkeit, sich Sorgen um Wartbarkeit, Semantik, Leistung, Zugänglichkeit oder etwas anderes zu machen, als etwas wirklich, sehr klein zu machen und trotzdem richtig zu rendern.

Eine Golflösung in 12 Versuchen

Diese Art des Denkens ist eine ziemlich dramatische Abkehr davon, wie die meisten von uns Front-End-Code für Produktionsstandorte schreiben (ich hoffe!), Deshalb habe ich alle meine Lösungen für Github gepostet, um sowohl Wissen zu teilen als auch von anderen zu lernen. Als glücklicher Nebeneffekt bedeutet dies auch, dass meine Einreichungen eine ziemlich detaillierte Geschichte gibt.

Hier ist ein Start-to-Finish-Bericht über meine Versuche von CSSBattle, das 7. Ziel, das so aussieht:

Die Methode „einfach nur das Ding Thing zentrieren“

Ein vernünftiger erster Ansatz besteht darin, einfach ein Element in die Mitte der Seite zu stecken, einen Kastenschatten und einen Randradius darauf zu schlagen und ihn fertig zu machen. Wenn wir dies „für Real“ schreiben würden, könnte es so aussehen:

 

  <kopf>
    <styles>
      Körper {
        Hintergrund: #0b2429;
        Rand: 0;
      }

      .Blatt {
        Breite: 150px;
        Höhe: 150px;
        Grenzradius: 67% 0;
        Hintergrund: #F3AC3C;
        Rand: 75px 0 75px 175px;
        Box-Shadow:
          -50px 0 #998235, 
          -100px 0 #1A4341
      }
    
  
  
    <div></div>
  
</styles></kopf>

Das obige ist der detaillierte Inhalt vonEine CSS -Golfübung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!