Wie erstelle ich ein Raster (wie Millimeterpapierraster) nur mit CSS?

Lesezeit: 4 Minuten

Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
Amir Rustamzadeh

Wie erstelle ich ein Raster (wie Millimeterpapierraster) nur mit CSS? Ich möchte nur ein virtuelles Rasterpapier nur mit CSS erstellen.

  • Bitte schauen Sie sich diese Version an: jsfiddle.net/4e5mcmk4 Es hat eine feste Größe für Quadrate.

    – GibboK

    5. März 2015 um 10:32 Uhr

1647180728 423 Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
shunryu111

Um Raster zu erstellen, können Sie CSS-Verläufe verwenden, die in allen modernen Browsern funktionieren (siehe Caniuse).

Verwenden Sie lineare Farbverläufe, um a zu zeichnen gefüttertes Gitter:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

Verwenden Sie einen radialen Farbverlauf, um a zu zeichnen Gitter mit gepunkteten Ecken:

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

  • Klar und smart, schön!

    – 1_Fehler

    28. Februar 2017 um 12:44 Uhr

  • Danke! Irgendeine Idee, ein gestricheltes / gepunktetes Gitter zu machen?

    – Julius Š.

    27. April 2017 um 9:04 Uhr

  • Kinderleicht. Gut, dass es eine einfachere Version gibt.

    Benutzer285594

    7. September 2017 um 12:34 Uhr

  • Das ist großartig für die lokale Entwicklung, ich verwende es nur, um sicherzustellen, dass meine CSS-Implementierung sich an das Designraster hält, also mache ich mir keine Sorgen um die Cross-Browser-Unterstützung. Ich habe eine leichte Änderung für meinen Anwendungsfall vorgenommen, indem ich Prozentsätze anstelle von px verwende, erhalte ich ein Raster von 16 Spalten, unabhängig von der Breite des Ansichtsfensters: background-size: 6.25% 16pt;

    – Friedrich Brummer

    12. März 2019 um 22:39 Uhr


  • Wenn der Code von jemandem immer noch nicht funktioniert, versuchen Sie Folgendes hinzuzufügen: background-repeat: repeat;

    – Herr Fischer

    29. September 2020 um 17:12 Uhr

Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
Matthias Stephan

body {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

  • Hallo und willkommen bei SO! Bitte versuchen Sie, ein paar Zeilen hinzuzufügen, um zu erklären, warum Ihre Antwort Ihrer Meinung nach am besten zur ursprünglichen Frage passt, danke.

    – m4rtin

    7. September 2014 um 10:50 Uhr

  • Die anderen Antworten sind gut, aber dies ist die Art von Raster, an die viele Leute denken werden, wenn sie nach “Millimeterpapier” suchen, danke.

    – Lunster

    11. April 2021 um 13:36 Uhr


  • Ich mag diese Idee, aber können Sie eine einfache Version posten, die nur die grundlegende Grafik zeigt?

    – jdmayfield

    25. Oktober 2021 um 0:27 Uhr

1647180729 299 Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
chacham15

Da Sie liniertes Papier erwähnt haben:

div {
  background-color: #fff;
  background-size: 100% 1.2em;
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
  behavior: url(/PIE.htc);
}
<div style="width: 200px; height: 200px"></div>

Die letzte Zeile: behavior: url(/PIE.htc); ist ein Plugin namens css3pie, das Unterstützung für zB 6-9 hinzufügt, glaube ich. Tatsächlich stammt dieses Beispiel von ihrer Website, wo es viele weitere interessante Beispiele gibt: http://css3pie.com/demos/gradient-patterns/

1647180730 222 Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
Yi Jiang

Was Sie tun können, ist ein Rasterbild wie dieses:

Raster-PNG

Dann kacheln Sie es mit CSS:

#background {
  background: url('path/to/grid-image.png');
}

Also ja, ist es nicht nur CSS – man braucht auch das Bild, aber die Lösung sollte recht sauber sein. Hier ist es in Aktion:

#background {
    width: 200px;
    height: 160px;
    background: url('http://i.stack.imgur.com/GySvQ.png');
}
<div id="background"></div>

Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
Timothy Alexis Vass

Fertig mit png und base64. Maßstab kann mit geändert werden background-size

.square-grid {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
  background-size: 15px;
}

.full-size {
  width: 100vw;
  height: 100vh;
}
<div class="square-grid full-size" />

1647180734 900 Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
Temani Afif

Ein conic-gradient() kann die Arbeit machen

html {
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0) 
    0 0/50px 50px;
}

1647180734 821 Wie erstelle ich ein Raster wie Millimeterpapierraster nur mit CSS
David Airy

Wenn Sie die besonders kräftigen Linien von echtem Millimeterpapier erhalten möchten und nichts dagegen haben, ::before und ::after zu verwenden, können Sie dies tun:

   body {
        position: relative;
        border-radius: 0 !important;
        background-color: #ecefff;
        background-size: 0.5rem 0.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
        margin: 0;
    }
    body::before, body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 2.5rem 2.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
        z-index: -1;
    }
    body::after {
        background-size: 5rem 5rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
    }

Beispiel in Chrome in Fancybox

998010cookie-checkWie erstelle ich ein Raster (wie Millimeterpapierraster) nur mit CSS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy