"CSS Secret" - summed up 47 Css tips (iii): visual effects

Note: This article is reproduced in the case of "CSS Secret" book.

Unilateral projection

Using box-shadow fourth parameter: the radius of expansion.
Here Insert Picture Description

box-shadow 0 8px 3px -3px rgba(0,0,0,.5)//  扩张半径的-3px刚好抵消左右两边的3px模糊半径

Irregular projection

Use filter new property -
If you use the box-shadow property directly, at the border will be transparent in the shadow, rather ugly.
Here Insert Picture Description

border dashed 10px orange
filter drop-shadow(0 5px 3px #678)

Dyeing effect

Here a method selected book final dyeing effect. It requires a fixed element of length and width. After the mouse over the non-staining effect.
Here Insert Picture Description

.dye
  height: 180px
  width: 300px
  margin 40px auto
  background-image url(https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png)
  background-size: cover
  background-color: hsl(335, 100%, 50%)
  background-blend-mode: luminosity
  transition: .5s background-color
  &:hover
    background-color: transparent

Frosted glass effect

Here Insert Picture Description

<div class="glass">
    <div class="main">ABCDEFG</div>
</div>

.glass
  height: 180px
  width: 300px
  margin 40px auto
  position relative
  font-size 50px
  text-align center
  background-size cover
  background-image url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583310555581&di=17d19c3f990900846ab8cdba69d2aed8&imgtype=0&src=http%3A%2F%2Fphoto.16pic.com%2F00%2F30%2F48%2F16pic_3048628_b.jpg)
  .main
    position absolute
    height 120px
    width 240px
    top 30px
    left 30px
    border-radius 7px
    box-shadow 0 0 5px #666
    background hsla(0,0%,100%,.3)
    overflow hidden
    z-index 100
    &:before
      content ''
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      background-image url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583310555581&di=17d19c3f990900846ab8cdba69d2aed8&imgtype=0&src=http%3A%2F%2Fphoto.16pic.com%2F00%2F30%2F48%2F16pic_3048628_b.jpg)
      filter blur(20px)
      z-index -1
      background-attachment: fixed
      margin -30px  // 防止边缘效果减弱

Angular effect

Here Insert Picture Description
mixin in:

folded-corner($background, $size, $angle=30deg)
  position: relative
  background:$background; /* 回退样式 */
  background: linear-gradient($angle - 180deg, transparent $size, $background 0)
  border-radius: .5em;
  $x=$size/ sin($angle)
  $y=$size / cos($angle)
  &::before
    content: ''
    position: absolute
    top: 0
    right: 0
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat
    width: $y
    height: $x
    transform: translateY($y - $x) rotate(2*$angle - 90deg)
    transform-origin: bottom right
    border-bottom-left-radius: inherit
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.2)

use:

.fold-angle
  height: 180px
  width: 300px
  margin 40px auto
  folded-corner(#58a, 30px, 30deg)

css too hard. . I do not understand = = directly is actually very convenient.

Gesj-yean

Published 27 original articles · won praise 4 · Views 2808

Private letter concerns