css special operation and effect

(1) How to write spaces in CSS

<view class="uni-flex uni-column" style="text-align: left;">
    <text>close&emsp;Grid:{{qualifiedQuantity}}</text>
    <text>unqualified:{{unqualifiedQuantity}}</text>
</view>

Full angle space

(2) css text vertical display

<view>
    <button style="align-self: center;writing-mode: tb;" >Qualified quality inspection</button>
</view>

(3) The way elements are arranged horizontally Reference 1,Reference 2

(4) hide

(5) Attribute correlation

image.png

image.png

image.png

image.png

image.png

(6) Shadow

  • Surrounding shadow <view class="shape-circle uni-flex uni-column justify-center align-center margin-tb-sm"> <view class="text-lg">{{_i18n.getLanguage().device.machine}}</view> <view>{{lanObj.online}}/{{lanObj.total}}</view> <view class="text-xxl text-bold">{{onlineNum}} / {{machineNum}}</view> </view> .shape-circle { border-radius: 50%; // border: 3px #FFFFFF solid; width: 400upx; height: 400upx; background-color: #00A9E2; // box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.1); // box-shadow: darkgrey 0px 0px 30px 5px; box-shadow: #FFFFFF 0px 0px 30px 5px; }

image.png

(7) Transparency

.bg-olive {
    background-color: #8dc63f; 
    opacity: 0.7; 
    color: #ffffff;
}

or

.bg-olive {
    /* background-color: #8dc63f; */
    background:rgba(141,198,63,0.7);//The last value is 0-1. The smaller the value, the more transparent it is
    color: #ffffff;
}

(8) Background image: repeating linear gradient (red, yellow 10%, green 20%);

.grad {
  background-color: red; /* Displayed when the browser does not support it */
  // background-image: linear-gradient(to top,white,#00A9E2);
  background-image: linear-gradient(to top,white 15%,#ADD8E6 55%, #00A9E2 100%);
  //background-image: linear-gradient(bottom,white 15%,#ADD8E6 55%, #00A9E2 100%);
}

About css uneven gradient percentage: percentage indicates the standard centerline position of the specified color, and the percentages are transition colors. If there is overlap between the percentages, the gradient transition colors will be lost.

  • For example, background: linear gradient (red 10%, green 85%, blue 90%), where: 10% indicates that the color center line of red is at 10% of the linear gradient direction. 85% indicates that the color centerline of green is 85% of the linear gradient direction. 90% indicates that the color centerline of blue is at 90% of the linear gradient direction. 10% to 85% are red green transition colors, and 85% - 90% are green blue transition colors.
  • For example, the effects of background: linear gradient (red 0%, green 50%, blue 50%) and background: linear gradient (red 0%, green 50%, blue 10%) are the same. This may be because the gradient transition color is lost due to the overlap between percentage positions. In addition, there is a certain order of rendering (let's think so).

(9) border: 1px solid rgba(0, 0, 0, 0.1); The border of the element is 1 pixel wide, solid lines and colors are expressed in RGBA. Where RGBA is an attribute in CSS3. The first three numbers in RGBA brackets represent the rgb values (0-255) of the three colors of red green blue. The last one is to set the transparency of the color, that is, the alpha value. The range is from 0 to 1. The closer to 1, the lower the transparency. (10) Background mixing mix-blend- mode

<template>
    <view class="container">
        <view class="right-top-sign"></view>
        <view class="left-bottom-sign"></view>
        <view class="left-top-sign">JACK IOT</view>
        <!-- <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:350upx;mix-blend-mode: multiply;"></image> -->
        <image src="../../static/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:350upx;mix-blend-mode: screen;"></image>
        <!-- <view class="wrapper">
            <view class="left-top-sign">JACK IOT</view>
            <view class="welcome">
                welcome back!
            </view>
            <view class="center-content uni-flex justify-center align-center">
                <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx;"></image>
            </view>
        </view> -->
    </view>
</template>
<style lang='scss'>
page{
    /* background: #fff; */
    /* background: #00A9E2; */
    /* background-image: linear-gradient(45deg, #1F9BDD, #25ABC9); */
    /* background-image: linear-gradient(45deg, #0081ff, #1cbbb4); */
}
.container{
    /* The background image is defined in the container instead of in the page to solve the problem of the actual effect of dynamic graph and background fusion on the app side */
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    padding-top: 115px;
    position:relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.right-top-sign{
    position:absolute;
    top: 80upx;
    right: -30upx;
    z-index: 95;
    &:before, &:after{
        display:block;
        content:"";
        width: 400upx;
        height: 80upx;
        background: #b4f3e2;
    }
    &:before{
        transform: rotate(50deg);
        border-radius: 0 50px 0 0;
    }
    &:after{
        position: absolute;
        right: -198upx;
        top: 0;
        transform: rotate(-50deg);
        border-radius: 50px 0 0 0;
        /* background: pink; */
    }
}
.left-bottom-sign{
    position:absolute;
    left: -270upx;
    bottom: -320upx;
    border: 100upx solid #d0d1fd;
    border-radius: 50%;
    padding: 180upx;
}
.wrapper{
    position:relative;
    z-index: 90;
    padding-bottom: 40upx;
}
.left-top-sign{
    font-size: 120upx;
    color: $page-color-base;
    position:relative;
    /* left: -16upx; */
    left: 20upx;
}
.welcome{
    position:relative;
    left: 50upx;
    top: -90upx;
    font-size: 46upx;
    color: #555;
    text-shadow: 1px 0px 1px rgba(0,0,0,.3);
}
.center-content{
    padding: 0 60upx;
}
‚Äč
/* css Filter control of black and white background gif */
.gif-white{  
  mix-blend-mode: multiply; 
}
.gif-black{  
  mix-blend-mode: screen;  
}
.response {
    width: 100%;
}
</style>

Note: the background must be set at the immediately adjacent first parent node to realize the fusion with the background.

expand: Filter blending mode screen

  • Color filtering calculation formula If there is a red color whose RGB value is (255,0,0) and a blue color whose RGB value is (0,0255), the color value of the two colors after using the filter color mixing mode is: R = 255 – (255 – 255) * (255 – 0) / 255 = 255 g = 255 – (255 – 0) * (255 – 0) / 255 = 0 B = 255 – (255 – 0) * (255 – 255) / 255 = 255, so the final color value is RGB(255,0,255)
  • Color filtering mode features whether any color and black perform color filtering or present the original color (for example, making the background color of pictures, animation or video black can be well integrated with the web page background). Any color and white perform color filtering to get white; the color mixed with other colors will be lighter, which is a bit similar to the effect of bleaching
  • Application scenario: color filtering mode is very useful for creating neon glow effects in images

Posted on Mon, 06 Dec 2021 20:01:06 -0500 by Remote4ever