Using CSS to draw the texture of relic stone in twilight forest of my world

Time:2021-4-18

Using CSS to draw the texture of relic stone in twilight forest of my world

Original address:https://segmentfault.com/a/1190000022984416
Author:FW Dragon
This article is published in:Do you think about it

Foreword: in the process of front-end project development, sometimes some backgrounds are obtained by simple changes (such as translation and rotation) of some regular graphics. The usual way is to cut a repeatable picture and set it as the background image. With the popularity of CSS3, the linear gradient and radial gradient properties have been well supported It can simulate many background textures, such as stripes, dots and squares. So we try to use these two attributes to draw some scenes that can replace the pictures. In the process of drawing, I suddenly thought of the maze square texture in my world. At that time, Tauren always thought this texture was very good-looking (below), so I tried to use CSS to draw this texture.

Using CSS to draw the texture of relic stone in twilight forest of my world

1、 Analyze texture

It can be found that the smallest unit of this texture is shown in the figure below, and a tile texture can be obtained by rotating three times.
Using CSS to draw the texture of relic stone in twilight forest of my world

2、 Drawing texture cells

Using CSS to draw the texture of relic stone in twilight forest of my world

If you subdivide, you can actually split the cell into half and rotate it 180 degrees to get the smallest cell at present, so it’s not so complicated. At present, the smallest cell is 8 * 8 cells. First consider drawing the first row.

    <div class="item"></div>

As the location image address has more calculation, the following uses the stylus preprocessor, which is also convenient for texture color adjustment.

    bp($w)
        $s = ''
        for i in (1..8)
            if(i != 8)
                $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ','
            else
                $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w)
        return unquote($s)

    .item
        $c1 = #738073
        background-color $c1
        $c2 = #747475
        $w = 100px
        width $w
        height $w
        background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%)
        background-size $w 0.125*$w
        background-position bp($w)
        background-repeat no-repeat

The remaining seven lines are the same

    background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%),
                    linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 100%),
                    linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%),
                    linear-gradient(90deg, $c1 25%, $c2 25%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%),
                    linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 75%, $c1 75%),
                    linear-gradient(90deg, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%),
                    linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%, $c2 100%),
                    linear-gradient(90deg, $c1 12.5%, $c2 12.5%, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%)

The above only pasted the key code, the specific code details can be viewed

codePen

3、 Other textures, the following is a screenshot of the effect on IOS and Android (incomplete test)

Using CSS to draw the texture of relic stone in twilight forest of my world
Using CSS to draw the texture of relic stone in twilight forest of my world

4、 Another way of drawing image

You can use the box shadow attribute to draw a pixel map

Codepen | go! Skin God

5、 Related links

Recommended Today

Common auxiliary classes

CountDownLatch Subtraction counter import java.util.concurrent.CountDownLatch; //Counter public class CountDownLatchDemo { public static void main(String[] args) throws InterruptedException { //The total number is 6. It can be used when the task must be performed CountDownLatch countDownLatch = new CountDownLatch(6); for (int i = 0; i < 6; i++) { new Thread(()->{ System.out.println(Thread.currentThread().getName()+” Go out”); countDownLatch.countDown(); },String.valueOf(i)).start(); […]