Clb (1) Anyaman

Demo:

HTML view

<style>
body {
     --u:  8vmin;  
    --c1: #ffa726;
    --c2: #e59319;
    --c3: #f1a12c;
    --c4: #cf8b26;
    --sh: #0006;
    --sh2: #0002;
    --gp: 50%/ calc(var(--u) * 2) calc(var(--u) * 2);
    height: 100vh;
  background:    
    conic-gradient(from -10deg at 60% 0%, #fff0 0 25%, var(--sh2) 28%, #fff0 31% 100%) var(--gp), 
    conic-gradient(from -5deg at 0% calc(60% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--gp),    
    conic-gradient(from 0deg at 60% calc(60% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--gp),     
    conic-gradient(from 0deg at 60% calc(60% - 1px), var(--c4) 0 25%, #fff0 0 97.5%, var(--sh) 102%) var(--gp),   
    linear-gradient(180deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 101%) var(--gp),   
    linear-gradient(180deg, #fff0 10%, var(--c3) 10% 50%, #fff0 50% 100%) var(--gp),   
    linear-gradient(90deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 100%) var(--gp),   
    linear-gradient(90deg, #fff0 10%, var(--c2) 10% 50%, #fff0 50% 100%) var(--gp),   
    linear-gradient(180deg, #fff0 60%, var(--c1) 60% 100%) var(--gp),   
            #6a1c00;
background-attachment: fixed;
}
</style>

'Anyaman' juga boleh dibuat sebagai latar belakang catatan.

Demo

Orandableg's
Catatan hari ini: Anyaman

Catatan bukan lah untuk menunjukkan cara-cara menganyam tetapi hanya mempamerkan contoh hasil CSS berserta kod bagaimana ia ditaip.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Lorem Ipsum atau Lipsum merupakan satu kaedah atau satu cara yang digunakan dalam penerbitan untuk mempersembahkan elemen grafik dalam sesuatu dokumen dari segi fon, rekabentuk dan rekaletak. Lorem Ipsum juga boleh dijadikan sebagai teks sementara sebelum teks sebenar dimasukkan.

Dah. Ini contoh je.

HTML view

<div style="
     --u:  8vmin;  
    --c1: #ffa726;
    --c2: #e59319;
    --c3: #f1a12c;
    --c4: #cf8b26;
    --sh: #0006;
    --sh2: #0002;
    --gp: 50%/ calc(var(--u) * 2) calc(var(--u) * 2);
    height: 100%;
  background:    
    conic-gradient(from -10deg at 60% 0%, #fff0 0 25%, var(--sh2) 28%, #fff0 31% 100%) var(--gp), 
    conic-gradient(from -5deg at 0% calc(60% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--gp),    
    conic-gradient(from 0deg at 60% calc(60% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--gp),     
    conic-gradient(from 0deg at 60% calc(60% - 1px), var(--c4) 0 25%, #fff0 0 97.5%, var(--sh) 102%) var(--gp),   
    linear-gradient(180deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 101%) var(--gp),   
    linear-gradient(180deg, #fff0 10%, var(--c3) 10% 50%, #fff0 50% 100%) var(--gp),   
    linear-gradient(90deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 100%) var(--gp),   
    linear-gradient(90deg, #fff0 10%, var(--c2) 10% 50%, #fff0 50% 100%) var(--gp),   
    linear-gradient(180deg, #fff0 60%, var(--c1) 60% 100%) var(--gp),   
            #6a1c00;">
<div style="
            font-size: large; color: white; padding: 12px 8px;"><span style="font-size: x-large;"><b>Orandableg's</b></span><br/>Catatan hari ini: <b>Anyaman</b><br><br/>Catatan bukan lah untuk menunjukkan cara-cara menganyam tetapi hanya mempamerkan contoh hasil CSS berserta kod bagaimana ia ditaip.<br><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>- Lorem Ipsum atau Lipsum merupakan satu kaedah atau satu cara yang digunakan dalam penerbitan untuk mempersembahkan elemen grafik dalam sesuatu dokumen dari segi fon, rekabentuk dan rekaletak. Lorem Ipsum juga boleh dijadikan sebagai teks sementara sebelum teks sebenar dimasukkan.<br/><br/>Dah. Ini contoh je.</div>
</div>

CSS 'anyaman' dipetik dari codepen.io/josetxu/details/KKQJVqo