Share on Tumblr
Home

CSS Prototyping mit Grid-Raster direkt im Browser

Wenn man direkt im Browser seine Webseiten entwickelt und testet, kommt man schnell an den Punkt an dem man unkompliziert überprüfen möchte, ob Webseitenelemente sich noch im Grid befinden, b.z.w sauber ausgerichtet sind.
Da man im Browser über keine praktischen Lineale wie z.B. in Photoshop verfügt bleiben einem meist nur noch Tools wie das von mir schon vorgestellte Pixelstick oder aber, was das arbeiten sehr erleichtert, man greift auf einen kleinen Trick von Thierry Koblentz zurück.

Und zwar bindet man während der Entwicklung folgenden Codeblock in sein CSS mit ein und erhält dadurch ein Grid-Raster, welches sich über die Webseite legt.
Da ich meist eh in einem WebKit fähigen Browser wie z.B. Safari arbeite, nutze ich persönlich lieber die überarbeitet Version von Christophe Benoliel Molina, welche ohne grid.png auskommt.

Da viele meiner Webeseiten eher dazu tendieren relativ hell zu sein habe ich für mich die Rasterfarbe noch in Rot geändert, aber den persönlichen Vorlieben sollten da keine Grenzen gesetzt sein.

/*   prototyping Grid
******************************************************* */
    body::before {
      content:"";
      position:fixed;
      background-color:rgba(34,102,153,0.5);
    background:     linear-gradient(white 2px, transparent 2px),
                    linear-gradient(0, white 2px, transparent 2px),
                    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
                    linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
    background:     -webkit-linear-gradient(red 2px, transparent 2px),
                      -webkit-linear-gradient(0, red 2px, transparent 2px),
                      -webkit-linear-gradient(rgba(255,0,0,.3) 1px, transparent 1px),
                      -webkit-linear-gradient(0, rgba(255,0,0,.3) 1px, transparent 1px);
    background:     -moz-linear-gradient(white 1px, transparent 1px),
                    -moz-linear-gradient(0pt 50% , white 1px, transparent 1px),
                    -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
                    -moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size:     50px 50px,
                        50px 50px,
                        10px 10px,
                        10px 10px ;
    background-position: -2px -2px,
                         -2px -2px,
                         -1px -1px,
                         -1px -1px ;
      z-index:1;
      top:0;
      right:0;
      bottom:0;
      left:0;
      opacity:.3;
      pointer-events:none;
    }
/*   END prototyping Grid
******************************************************* */
Seite 2 von 22123451020...Letzte »