我尝试用CSS3完成多少图像处理

CSS3

使用CSS3准备要编辑的图像

为了使用CSS3编辑图像,我们将准备原始图像。

什么是通常习惯于编辑使用Photoshop的图像,因为它没有完全理解它是如何图像编辑多少CSS3中,试图多远都可以加工。

因为它是一个点,我决定使用原始CSS3编辑图像,而不使用Sass,Stylus,PostCSS

为了便于理解处理过程中的变化,我们选择了尽可能多的图像,并且在色彩平衡方面没有偏差。

组织过滤器属性

使用CSS3进行图像处理的元素主要是filter属性。

过滤器使用属性来编辑图像。我们将首先组织这些物业。

  • blur模糊元素
  • grayscale允许元素为灰度
  • contrast可调对比度
  • hue-rotate色调可以旋转
  • saturate您可以调整饱和度
  • brightness您可以调整亮度
  • invert可以完成渐变反转
  • sepia你可以用棕褐色调元素
  • drop-shadow您可以为元素添加阴影
  • opacity可以调节透射率

同时指定display: block; position: relative;作为父元素。

通过这样做,使用它是一个::after您可以添加进一步影响到元素(或放一个影子在里面,也有可能到悬崖覆盖色调)。

模糊

      
.filters__wrapper .blur__param--5 { filter: blur(5px);}
.filters__wrapper .blur__param--10 { filter: blur(10px);}
      
    

在Photoshop中,它相当于“过滤”→“模糊”→“模糊(高斯)”。

灰度等级

      
.filters__wrapper .grayscale__param--50 { filter: grayscale(50%);}
.filters__wrapper .grayscale__param--100 { filter: grayscale(100%);}
      
    

在Photoshop中,是“图像”→“色彩校正”→“低饱和度”。

它与“图像”→“模式”→“灰度”相同。

可以调整百分比的点是不同的。

对比度

      
.filters__wrapper .contrast__param--150 { filter: contrast(150%);}
.filters__wrapper .contrast__param--300 { filter: contrast(300%);}
.filters__wrapper .contrast__param--50 { filter: contrast(50%);}
      
    

在Photoshop中,它相当于“图像”→“颜色校正”→“亮度/对比度”的对比度。

色调旋转

      
.filters__wrapper .hue__param--90d { filter: hue-rotate(90deg);}
.filters__wrapper .hue__param--180d { filter: hue-rotate(180deg);}
.filters__wrapper .hue__param--270d { filter: hue-rotate(270deg);}
      
    

在Photoshop中,它相当于“图像”→“色彩校正”→“色调/饱和度”的色调。

与“色调/饱和度”不同的是从色调圆的旋转速率改变色调。

色相环,的颜色孟塞尔的3个属性的色相主张“色调(色相)·饱和度(色度)·亮度(值)”,视觉表示是圆的形状。

相邻颜色是同一行的“相似颜色”。相反的颜色代表冲突颜色的“互补色”。

由Munsell颜色系统的Hue圈子

饱和度

      
.filters__wrapper .saturate__param--150 { filter: saturate(150%);}
.filters__wrapper .saturate__param--300 { filter: saturate(300%);}
.filters__wrapper .saturate__param--50 { filter: saturate(50%);}
      
    

在Photoshop中,它相当于“图像”→“色彩校正”→“色调/饱和度”的饱和度。

亮度

      
.filters__wrapper .brightness__param--150 { filter: brightness(150%);}
.filters__wrapper .brightness__param--300 { filter: brightness(300%);}
.filters__wrapper .brightness__param--50 { filter: brightness(50%);}
      
    

在Photoshop中,它相当于“图像”→“色彩校正”→“色调/饱和度”的亮度。

渐变反转

      
.filters__wrapper .invert__param--60 { filter: invert(60%);}
.filters__wrapper .invert__param--100 { filter: invert(100%);}
      
    

在Photoshop中,它相当于“图像”→“颜色校正”→“渐变反转”。

可以指定百分比的点是不同的。

棕褐色

      
.filters__wrapper .sepia__param--50 { filter: sepia(50%);}
.filters__wrapper .sepia__param--100 { filter: sepia(100%);}
      
    

要用Photoshop实现,有必要从“色调/饱和度”制作棕褐色调。

阴影

      
.filters__wrapper .dropshadow__param--darker { filter: drop-shadow(4px 4px 8px #212121);}
      
    

在Photoshop中,它相当于“图层”→“图层样式”→“投影”。

首先,阴影位置在水平方向(x轴)。

第二,阴影位置在垂直方向(y轴)。

第三,阴影扩散的大小(模糊)。

第四,输入阴影的颜色。如果您不输入任何内容,则应用黑色(#000000)

透明度

      
.filters__wrapper .opacity__param--60 { filter: opacity(60%);}
.filters__wrapper .opacity__param--20 { filter: opacity(20%);}
      
    

在Photoshop中,它相当于图层菜单中的“不透明度”。

它与opacity属性具有相同的效果。

制作磨砂玻璃(应用技术)

      
.blurimage__wrapper,.blurimage__contents::before {
  background: url(/images/photos/photo17_01.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}
.blurimage__wrapper {
  position: relative;
  padding: 10%;
  margin: 32px auto;
}
.blurimage__contents::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-clip: content-box;
  width: 100%;
  height: 100%;
  padding: 10%;
  top: 0;
  left: 0;
  filter: blur(5px);
}
.blurimage__main {
  padding: 10%;
  position: relative;
  text-align: center;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.blurimage__main img {
  width: 30%;
}
      
    

它导致在父元素和子元素的::before属性中读取相同的背景图像。

子元素滤波器之前::beforefilter: blur(5px);添加模糊仅子元素的背景图像。

box-sizing: border-box;添加属性并让padding也包含在框的大小中。

孙子元素,background: rgba(255,255,255,0.4);此外,它是白色的磨砂玻璃。

除了position: relative;之外,还要将其指定为相对位置的父元素。