Some tips-refactoring, tips-refactoring

Some tips-refactoring, tips-refactoring

 

• Use box-shadow to create relief effects
• Simple background modification using box-shadow
• Insufficient background image for long pages
• ......

 

01

• UseBox-shadowManufacturing embossed Effect

Demo example:

 

The sample html structure:

<Div class = "box"> <div class = "box-hd"> 

Css:
.box {    position: relative;     border-radius: rem(40px);     overflow: hidden;     box-shadow: rem(4px) rem(14px) rem(23px) rgba(134, 120, 37, .28),                 rem(-4px) rem(14px) rem(23px) rgba(134, 120, 37, .28);    @at-root {        .box-hd {            height: rem(78px);             background: #ff3e5d;             box-shadow: inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .13)                        ,inset rem(10px) 0 rem(10px) rgba(255, 255, 255, .13)                        ,inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .13)                        ,inset 0 rem(-10px) rem(10px) #e63544;        }        .box-bd {            height: rem(200px);             background: #fff4c2;             box-shadow: inset 0 rem(10px) rem(10px) rgba(255, 255, 255, .32)                        ,inset rem(10px) 0 rem(10px) rgba(255, 255, 255, .32)                        ,inset 0 rem(-15px) rem(10px) rgba(249, 216, 159, .8);           }       }}
 
 
02

 

 
  
UseBox-shadowSimple background Modification

 
Demo example:

 
Such as the circle background, shape rules, and solid color in the demo above, you can usebox-shadow.
.box {    &:before {        content: '';         position: absolute; top: rem(52px); left: rem(24px);         width: rem(115px); height: rem(115px); border-radius: 100%; background: #e81236;         box-shadow: rem(240px) rem(4px)   0 rem(-42px) #e81236,                     rem(175px) rem(158px) 0 rem(-18px) #e81236,                     rem(320px) rem(280px) 0 rem(-42px) #e81236,                     rem(400px) rem(317px) 0 rem(-10px) #e81236,                     rem(300px) rem(435px) 0 0          #e81236,                     rem(450px) rem(500px) 0 rem(-32px) #e81236,                     rem(72px)  rem(635px) 0 rem(-5px)  #e81236;    }}
①box-shadowYou can add multiple shadows to a property.
②box-shadow: h-shadow v-shadow blur spread color inset;.
H-shadowParameters andV-shadowThe parameter is used to control the shadow distance.
SpreadParameters are rarely used in daily use. In our demo scenario, we can intuitively see that the shadow size is controlled by this parameter. The parameter value can be an integer or a negative number. The specific calculation rules are as follows:
Shadow Height = (height of the subject element/2 + spread) * 2; shadow width = (width of the subject element/2 + spread) * 2;
03

 

 
  
Insufficient background image for long pages

 
Scenario: we already have a very long background image from the designer. However, due to the high uncertainty of the content, there may still be background images not covered at the bottom of the actual scenario, filling with solid colors has obvious demarcation lines.
Setbackground-size: 100% 100%;The background image is stretched and deformed.
backgroundYou can set multiple background images for attributes. We can use this to solve the problem.
Cut the original background image from the bottom1px.
Then add two background images to the container, one (PS: bg1.jpg, for ease of display, the demo shows an image with a relatively small height, which will be much higher in actual scenarios, the other image (PS: cut out 1 pxheight image bg2.jpg) is stretched and filled:
.wrap {    background-color: #5e3427;    background-image: url(../img/bg1.jpg),                       url(../img/bg2.jpg);    background-size:  100%,                       100% 100%;    background-repeat: no-repeat;}
Demo example:

 
Address: http://zhangruojun.com/-xie-xiao-ji-qiao/