Recreating DeSandro's Granularity

Developer

Size

5,177 Kb

Views

18,216

Recreating DeSandro's Granularity Previews
Recreating DeSandro's Granularity HTML Codes
Recreating DeSandro's Granularity CSS Codes
Recreating DeSandro's Granularity JS Codes

How do I make an recreating desandro's granularity?

After seeing this tweet: https://twitter.com/Real_CSS_Tricks/status/795296779075993601 I thought I would try and replicate David DeSandro's piece but make it responsive and use CSS to create the background.. What is a recreating desandro's granularity? How do you make a recreating desandro's granularity? This script and codes were developed by Gray Gilmore on 08 November 2022, Tuesday.

Recreating DeSandro's Granularity Previews

Recreating DeSandro's Granularity - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recreating DeSandro's Granularity</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='line'><span class='char char1'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>I</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>f</span></span><span class='char char10'><span class='letter'>i</span></span><span class='char char26'><span class='letter'>n</span></span><span class='char char12'><span class='letter'>d</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>c</span></span><span class='char char0'><span class='letter'>o</span></span><span class='char char3'><span class='letter'>m</span></span><span class='char char5'><span class='letter'>f</span></span><span class='char char19'><span class='letter'>o</span></span><span class='char char1'><span class='letter'>r</span></span><span class='char char21'><span class='letter'>t</span></span><span class='char char25'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>i</span></span><span class='char char12'><span class='letter'>n</span></span><span class='char char6'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>t</span></span><span class='char char0'><span class='letter'>h</span></span><span class='char char13'><span class='letter'>e</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char7'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char25'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char4'><span class='letter'>g</span></span><span class='char char8'><span class='letter'>r</span></span><span class='char char22'><span class='letter'>a</span></span><span class='char char18'><span class='letter'>n</span></span><span class='char char6'><span class='letter'>u</span></span><span class='char char1'><span class='letter'>l</span></span><span class='char char0'><span class='letter'>a</span></span><span class='char char24'><span class='letter'>r</span></span><span class='char char13'><span class='letter'>i</span></span><span class='char char4'><span class='letter'>t</span></span><span class='char char6'><span class='letter'>y</span></span><span class='char char19'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>o</span></span><span class='char char5'><span class='letter'>f</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char8'><span class='letter'>w</span></span><span class='char char6'><span class='letter'>e</span></span><span class='char char2'><span class='letter'>b</span></span><span class='char char23'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>&nbsp;</span></span><span class='char char7'><span class='letter'>&nbsp;</span></span><span class='char char5'><span class='letter'>&nbsp;</span></span><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>d</span></span><span class='char char1'><span class='letter'>e</span></span><span class='char char13'><span class='letter'>s</span></span><span class='char char9'><span class='letter'>i</span></span><span class='char char16'><span class='letter'>g</span></span><span class='char char14'><span class='letter'>n</span></span><span class='char char12'><span class='letter'>.</span></span><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>E</span></span><span class='char char7'><span class='letter'>v</span></span><span class='char char26'><span class='letter'>e</span></span><span class='char char12'><span class='letter'>r</span></span><span class='char char15'><span class='letter'>y</span></span><span class='char char18'><span class='letter'>t</span></span><span class='char char26'><span class='letter'>h</span></span><span class='char char13'><span class='letter'>i</span></span><span class='char char21'><span class='letter'>n</span></span><span class='char char14'><span class='letter'>g</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>y</span></span><span class='char char22'><span class='letter'>o</span></span><span class='char char12'><span class='letter'>u</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char20'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char1'><span class='letter'>&nbsp;</span></span><span class='char char7'><span class='letter'>&nbsp;</span></span><span class='char char17'><span class='letter'>s</span></span><span class='char char9'><span class='letter'>e</span></span><span class='char char25'><span class='letter'>e</span></span><span class='char char15'><span class='letter'>&nbsp;</span></span><span class='char char23'><span class='letter'>a</span></span><span class='char char9'><span class='letter'>n</span></span><span class='char char21'><span class='letter'>d</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char17'><span class='letter'>i</span></span><span class='char char26'><span class='letter'>n</span></span><span class='char char24'><span class='letter'>t</span></span><span class='char char19'><span class='letter'>e</span></span><span class='char char23'><span class='letter'>r</span></span><span class='char char5'><span class='letter'>a</span></span><span class='char char19'><span class='letter'>c</span></span><span class='char char13'><span class='letter'>t</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span><span class='char char6'><span class='letter'>w</span></span><span class='char char26'><span class='letter'>i</span></span><span class='char char11'><span class='letter'>t</span></span><span class='char char26'><span class='letter'>h</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char4'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>c</span></span><span class='char char21'><span class='letter'>a</span></span><span class='char char13'><span class='letter'>n</span></span><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char5'><span class='letter'>b</span></span><span class='char char0'><span class='letter'>e</span></span><span class='char char16'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>b</span></span><span class='char char17'><span class='letter'>r</span></span><span class='char char19'><span class='letter'>o</span></span><span class='char char6'><span class='letter'>k</span></span><span class='char char12'><span class='letter'>e</span></span><span class='char char14'><span class='letter'>n</span></span><span class='char char22'><span class='letter'>&nbsp;</span></span><span class='char char15'><span class='letter'>d</span></span><span class='char char14'><span class='letter'>o</span></span><span class='char char7'><span class='letter'>w</span></span><span class='char char21'><span class='letter'>n</span></span><span class='char char18'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>a</span></span><span class='char char0'><span class='letter'>n</span></span><span class='char char21'><span class='letter'>d</span></span><span class='char char1'><span class='letter'>&nbsp;</span></span><span class='char char23'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>s</span></span><span class='char char22'><span class='letter'>u</span></span><span class='char char2'><span class='letter'>b</span></span><span class='char char7'><span class='letter'>-</span></span><span class='char char13'><span class='letter'>d</span></span><span class='char char19'><span class='letter'>i</span></span><span class='char char7'><span class='letter'>v</span></span><span class='char char12'><span class='letter'>i</span></span><span class='char char10'><span class='letter'>d</span></span><span class='char char7'><span class='letter'>e</span></span><span class='char char4'><span class='letter'>d</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char20'><span class='letter'>i</span></span><span class='char char17'><span class='letter'>n</span></span><span class='char char24'><span class='letter'>t</span></span><span class='char char2'><span class='letter'>o</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char18'><span class='letter'>s</span></span><span class='char char16'><span class='letter'>m</span></span><span class='char char23'><span class='letter'>a</span></span><span class='char char1'><span class='letter'>l</span></span><span class='char char22'><span class='letter'>l</span></span><span class='char char18'><span class='letter'>-</span></span><span class='char char20'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>e</span></span><span class='char char6'><span class='letter'>r</span></span><span class='char char6'><span class='letter'>,</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char18'><span class='letter'>s</span></span><span class='char char3'><span class='letter'>i</span></span><span class='char char7'><span class='letter'>m</span></span><span class='char char0'><span class='letter'>p</span></span><span class='char char13'><span class='letter'>l</span></span><span class='char char6'><span class='letter'>e</span></span><span class='char char8'><span class='letter'>r</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>c</span></span><span class='char char23'><span class='letter'>o</span></span><span class='char char9'><span class='letter'>m</span></span><span class='char char21'><span class='letter'>p</span></span><span class='char char2'><span class='letter'>o</span></span><span class='char char25'><span class='letter'>n</span></span><span class='char char3'><span class='letter'>e</span></span><span class='char char9'><span class='letter'>n</span></span><span class='char char19'><span class='letter'>t</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>&nbsp;</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>p</span></span><span class='char char19'><span class='letter'>a</span></span><span class='char char10'><span class='letter'>r</span></span><span class='char char0'><span class='letter'>t</span></span><span class='char char14'><span class='letter'>s</span></span><span class='char char22'><span class='letter'>.</span></span><span class='char char1'><span class='letter'>&nbsp;</span></span><span class='char char18'><span class='letter'>N</span></span><span class='char char10'><span class='letter'>o</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>m</span></span><span class='char char20'><span class='letter'>a</span></span><span class='char char13'><span class='letter'>t</span></span><span class='char char24'><span class='letter'>t</span></span><span class='char char5'><span class='letter'>e</span></span><span class='char char21'><span class='letter'>r</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>h</span></span><span class='char char15'><span class='letter'>o</span></span><span class='char char25'><span class='letter'>w</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char0'><span class='letter'>&nbsp;</span></span><span class='char char6'><span class='letter'>&nbsp;</span></span><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char23'><span class='letter'>&nbsp;</span></span><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char17'><span class='letter'>c</span></span><span class='char char16'><span class='letter'>o</span></span><span class='char char14'><span class='letter'>m</span></span><span class='char char0'><span class='letter'>p</span></span><span class='char char22'><span class='letter'>l</span></span><span class='char char16'><span class='letter'>e</span></span><span class='char char23'><span class='letter'>x</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char15'><span class='letter'>o</span></span><span class='char char21'><span class='letter'>r</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char12'><span class='letter'>i</span></span><span class='char char8'><span class='letter'>n</span></span><span class='char char3'><span class='letter'>t</span></span><span class='char char9'><span class='letter'>r</span></span><span class='char char22'><span class='letter'>i</span></span><span class='char char5'><span class='letter'>c</span></span><span class='char char21'><span class='letter'>a</span></span><span class='char char9'><span class='letter'>t</span></span><span class='char char11'><span class='letter'>e</span></span><span class='char char5'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char15'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char16'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char7'><span class='letter'>&nbsp;</span></span><span class='char char8'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>t</span></span><span class='char char9'><span class='letter'>h</span></span><span class='char char5'><span class='letter'>e</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char20'><span class='letter'>w</span></span><span class='char char14'><span class='letter'>o</span></span><span class='char char17'><span class='letter'>r</span></span><span class='char char0'><span class='letter'>k</span></span><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>b</span></span><span class='char char7'><span class='letter'>e</span></span><span class='char char3'><span class='letter'>c</span></span><span class='char char15'><span class='letter'>o</span></span><span class='char char16'><span class='letter'>m</span></span><span class='char char9'><span class='letter'>e</span></span><span class='char char2'><span class='letter'>s</span></span><span class='char char22'><span class='letter'>,</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>i</span></span><span class='char char13'><span class='letter'>t</span></span><span class='char char16'><span class='letter'>'</span></span><span class='char char24'><span class='letter'>s</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char18'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char19'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>a</span></span><span class='char char23'><span class='letter'>l</span></span><span class='char char6'><span class='letter'>l</span></span><span class='char char18'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>j</span></span><span class='char char20'><span class='letter'>u</span></span><span class='char char15'><span class='letter'>s</span></span><span class='char char2'><span class='letter'>t</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char15'><span class='letter'>a</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>b</span></span><span class='char char9'><span class='letter'>u</span></span><span class='char char11'><span class='letter'>n</span></span><span class='char char4'><span class='letter'>c</span></span><span class='char char17'><span class='letter'>h</span></span><span class='char char25'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>o</span></span><span class='char char23'><span class='letter'>f</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>&nbsp;</span></span><span class='char char25'><span class='letter'>&nbsp;</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char0'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>c</span></span><span class='char char7'><span class='letter'>a</span></span><span class='char char21'><span class='letter'>r</span></span><span class='char char4'><span class='letter'>e</span></span><span class='char char17'><span class='letter'>f</span></span><span class='char char18'><span class='letter'>u</span></span><span class='char char0'><span class='letter'>l</span></span><span class='char char2'><span class='letter'>l</span></span><span class='char char2'><span class='letter'>y</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>s</span></span><span class='char char17'><span class='letter'>e</span></span><span class='char char4'><span class='letter'>l</span></span><span class='char char15'><span class='letter'>e</span></span><span class='char char18'><span class='letter'>c</span></span><span class='char char21'><span class='letter'>t</span></span><span class='char char2'><span class='letter'>e</span></span><span class='char char18'><span class='letter'>d</span></span><span class='char char4'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char16'><span class='letter'>&nbsp;</span></span><span class='char char0'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>c</span></span><span class='char char9'><span class='letter'>h</span></span><span class='char char14'><span class='letter'>a</span></span><span class='char char26'><span class='letter'>r</span></span><span class='char char19'><span class='letter'>a</span></span><span class='char char6'><span class='letter'>c</span></span><span class='char char22'><span class='letter'>t</span></span><span class='char char13'><span class='letter'>e</span></span><span class='char char3'><span class='letter'>r</span></span><span class='char char9'><span class='letter'>s</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>p</span></span><span class='char char5'><span class='letter'>l</span></span><span class='char char22'><span class='letter'>a</span></span><span class='char char8'><span class='letter'>c</span></span><span class='char char15'><span class='letter'>e</span></span><span class='char char20'><span class='letter'>d</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>i</span></span><span class='char char13'><span class='letter'>n</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>a</span></span><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char11'><span class='letter'>&nbsp;</span></span><span class='char char6'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>p</span></span><span class='char char8'><span class='letter'>a</span></span><span class='char char9'><span class='letter'>r</span></span><span class='char char10'><span class='letter'>t</span></span><span class='char char16'><span class='letter'>i</span></span><span class='char char12'><span class='letter'>c</span></span><span class='char char1'><span class='letter'>u</span></span><span class='char char1'><span class='letter'>l</span></span><span class='char char19'><span class='letter'>a</span></span><span class='char char8'><span class='letter'>r</span></span><span class='char char4'><span class='letter'>&nbsp;</span></span><span class='char char23'><span class='letter'>o</span></span><span class='char char19'><span class='letter'>r</span></span><span class='char char15'><span class='letter'>d</span></span><span class='char char5'><span class='letter'>e</span></span><span class='char char23'><span class='letter'>r</span></span><span class='char char3'><span class='letter'>.</span></span><span class='char char5'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char25'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char1'><span class='letter'>&nbsp;</span></span></div><div class='line'><span class='char char2'><span class='letter'>&nbsp;</span></span><span class='char char24'><span class='letter'>&nbsp;</span></span><span class='char char15'><span class='letter'>&nbsp;</span></span><span class='char char19'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char2'><span class='letter'>&nbsp;</span></span><span class='char char16'><span class='letter'>&nbsp;</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char23'><span class='letter'>&nbsp;</span></span><span class='char char9'><span class='letter'>&nbsp;</span></span><span class='char char21'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char7'><span class='letter'>&nbsp;</span></span><span class='char char12'><span class='letter'>&nbsp;</span></span><span class='char char23'><span class='letter'>&nbsp;</span></span><span class='char char26'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>&nbsp;</span></span><span class='char char10'><span class='letter'>&nbsp;</span></span><span class='char char20'><span class='letter'>&nbsp;</span></span><span class='char char13'><span class='letter'>&nbsp;</span></span><span class='char char22'><span class='letter'>&nbsp;</span></span><span class='char char16'><span class='letter'>&nbsp;</span></span><span class='char char3'><span class='letter'>&nbsp;</span></span><span class='char char17'><span class='letter'>&nbsp;</span></span><span class='char char14'><span class='letter'>&nbsp;</span></span><span class='char char18'><span class='letter'>&nbsp;</span></span></div> <script src="js/index.js"></script>
</body>
</html>

Recreating DeSandro's Granularity - Script Codes CSS Codes

body { margin: 0; font-size: 0; background: #eed;
}
.char { display: inline-block; position: relative; width: calc(100% / 27); height: 0; padding-top: calc(100% / 13.5); color: #a68; font-family: Futura, 'Century Gothic', Arial, sans-serif; font-size: 3vw; text-align: center; text-transform: uppercase;
}
.char:before, .char:after { position: absolute; left: 50%; width: 100%; height: 0; padding-top: 100%; transform: translateX(-50%); content: "";
}
.char:before { bottom: 0;
}
.char:after { top: 0;
}
.letter { position: absolute; left: 50%; bottom: 25%; transform: translate(-50%, 50%); width: 100%; z-index: 1;
}
.char1 { background: #dba;
}
.char1:before { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char1:after { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char2 { background: #dba;
}
.char2:before { background: #dba; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char2:after { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char3:before { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char3:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char4 { background: #dba;
}
.char4:before { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char4:after { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char5 { background: #dba;
}
.char5:before { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char5:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char6:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char6:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char7:before { background: #eed; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char7:after { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char8:before { background: #eed; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char8:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char9:before { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char9:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char10 { background: #dd9;
}
.char10:before { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char10:after { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char11 { background: #dd9;
}
.char11:before { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char11:after { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char12:before { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char12:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char13 { background: #dd9;
}
.char13:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char13:after { background: #dba; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char14 { background: #dd9;
}
.char14:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char14:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char15:before { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char15:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char16:before { background: #eed; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char16:after { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char17:before { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char17:after { background: #dd9; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char18:before { background: #eed; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char18:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char19 { background: #eed;
}
.char19:before { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char19:after { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char20 { background: #eed;
}
.char20:before { background: #dba; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char20:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char21:before { background: #dba; border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char21:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char22 { background: #eed;
}
.char22:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char22:after { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char23 { background: #eed;
}
.char23:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char23:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char24:before { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char24:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char25:before { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char25:after { background: #dba; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
.char26:before { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 0;
}
.char26:after { background: #dd9; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.char27:before { background: #eed; border-top-left-radius: 0; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 15px;
}
.char27:after { background: #eed; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

Recreating DeSandro's Granularity - Script Codes JS Codes

(function() {
}).call(this);

Home Page	Home
Developer	Gray Gilmore
Username	graygilmore
Uploaded	November 08, 2022
Rating	3
Size	5,177 Kb
Views	18,216

Do you need developer help for Recreating DeSandro's Granularity?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gray Gilmore (graygilmore) Script Codes

Name	Size
Full Page Backgrounds, iOS Fail	2,494 Kb
Search functionality	2,081 Kb
Cross Fade Images with CSS	3,832 Kb
Form Submission from Anywhere	3,563 Kb
Fizz-Buzz Test, Sass Style	2,551 Kb
Vertical Alignment with Inline Block	2,121 Kb
Vertical Alignment with Line Height	2,065 Kb
Feedback-color Demo	3,964 Kb
A Pen by Gray Gilmore	1,798 Kb
Webkit Backface Visibility Border Bug	2,182 Kb

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Wikipedia Viewer	Odylic	2,333 Kb
A Pen by Alex Bergin	Abergin	3,347 Kb
Two joint circles - One element	Berdejitendra	1,704 Kb
Svg sky	Omodev	7,070 Kb
Client-side Email Validation	Collizo4sky	1,538 Kb
React JS Movie Info App	MTushar	4,870 Kb
SVG email test v2.0	M_J_Robbins	2,090 Kb
Halo 5 REQ Guide Bookmarklet	Cwacht	3,993 Kb
My three.js practice	Esambino	3,203 Kb
SCSS Unit Conversion	Jakob-e	8,210 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!