I Heart CSS

Ich betrachte CSS gerne als eine Liebessprache. Wenn sie gut geschrieben ist, kann sie so schön sein wie Poesie. Es gibt Regeln, Semantik und, wie die Liebe selbst, kann sie auf viele Arten kommuniziert werden. Betrachten Sie die Vielfalt der Optionen, die wir haben, um black in CSS zu schreiben.

• #000000
• #000
• rgb(0, 0, 0)
• hsla(360, 100%, 0%, 1)
• black

Im Geiste des Valentinstags dachte ich, es wäre lustig, dieses Konzept mit den vielen Möglichkeiten, wie wir Herzen in HTML & CSS erstellen können, noch weiter zu treiben.

Ein einfaches Hintergrundbild

Wir können ein Bild eines Herzens aufrufen und es als Hintergrund eines Elements festlegen.

.heart {
  background-image: url("heart.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

Siehe den Pen I Heart You – Background Image von CSS-Tricks (@css-tricks) auf CodePen.

HTML & ASCII-Symbole

Das ist richtig. Wir können das Web für uns zeichnen lassen.

.heart {
  content: '&#9829';
}

Siehe den Pen I Heart You – ASCII von CSS-Tricks (@css-tricks) auf CodePen.

CSS-Form

Herzen sind im echten Leben kompliziert, aber in CSS sind sie nur zwei Kreise und ein gedrehtes Quadrat.

Das können wir dank der ::before und ::after Pseudo-Elemente mit einem einzigen Element zeichnen.

.heart {
  background-color: red;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}

Siehe den Pen I Heart You – CSS Shape von CSS-Tricks (@css-tricks) auf CodePen.

Icon Font

Icon Fonts wurden in einem Käfigkampf mit Inline-SVG verprügelt, aber hier erfüllen sie immer noch ihren Zweck. Wir bräuchten unser Herz-Symbol in verschiedenen Schriftdateiformaten und würden es mit @font-face anwenden, aber wir werden die We Love Icon Fonts-Seite verwenden, um dies für uns zu generieren.

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: red;
}

Siehe den Pen I Heart You – Icon Font von CSS-Tricks (@css-tricks) auf CodePen.

Inline SVG

Okay, das ist zwar nicht gerade CSS, aber wir bei CSS-Tricks lieben SVG.

I 

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
	c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

Fügen wir eine Pulsanimation hinzu, nur als Ausrede, um etwas CSS einzustreuen.

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

Siehe den Pen I Heart You – SVG von CSS-Tricks (@css-tricks) auf CodePen.

Teilt die Liebe

Zweifellos gibt es noch mehr Wege, dies zu tun. Teilt eure Pens in den Kommentaren und wir werden sie zur Sammlung hinzufügen.

Und natürlich einen schönen (etwas verspäteten) Valentinstag!