Photoshopの、CSS、それらは十分でしょうものに

パーティを見出しクール瞬間、パーティーは常にクールなタイトルとなっています

 

それでも大学では見たことがなかった、私はフォトショップで遊ぶのが好き。そのあまりにも多くの食べ物を、添えものの多くは、フォトショップ、CSSによって効果を達成していたので、その後、ウェブを書い特にPhotoshopのと同じ絵に対処できるようにしたいました。

CSSのより多くの知識を持って、私はCSSの多くは通常より少ない(または使用していない)が、非常に強力な属性でありました。これらのプロパティは、このようなフィルタ、ブレンドモードなどのPhotoshopの機能の多くを達成します。

私は単純に各プロパティは、単にディレクトリを行うので、ここでは、個別に書き込むことができ、これらの性質に起因する非常に強力な機能に、ビットを注文します。

 

まず、グラデーショングラデーション

PSが非常に一般的に使用される機能の緩やかな変化は、多くのシーンの作業にCSSグラデーションを使用します

しかし、単純な線形グラデーション、放射状の勾配、勾配を用いて作製することができる効果に加えて:

あるいは勾配でプログレスバーを行います。

 

関連記事:
「CSSグラデーションを使用します」

「CSS3グラデーショングラデーションは、そのプレイを行うことができます。」

 

 

第二に、反射ボックスは、反映します

このプロパティは、反射を発生するDOM要素を可能にし、所定の方向と反射の距離であってもよいです

この反射に加えて、あなたはまた、そのような透明勾配として、マスクを追加することができます。

-webkit-ボックス反映:(底、透明、RGBA(へ-7px線形勾配下0000.4))。

 

関連記事:

「-webkit-ボックス反映」

「CSS反射」

 

 

第三に、シャドーボックスシャドウ/テキストの影

それは非常に一般的な特性であるが、多くの場合のようないくつかの簡単な影を、行うために使用されています。

しかし、アニメーションの組み合わせと変換は、そのような映画を作ることができます。

CodePen Demo -- CSS Checker Illusion( By David Khourshid )

 

相关文章:

《box-shadow》

《你所不知道的 CSS 阴影技巧与细节》

 

 

四、 裁剪 clip-path

这个属性可以创建一个裁剪区域,让元素只显示区域内的内容,有点像 Photoshop 中“路径+蒙版”的效果

这个属性值最强大的地方在于,可以非常自由的绘制多边形:

 

 

相关文章:

《clip-path》

《CSS clip-path maker》

《不可思议的CSS之CLIP-PATH》

 

 

五、蒙板 mask

蒙板的效果是在原图形上面,在蒙上一层图形,得到一个新的图形

由于蒙板图形可以是透明的,所以有些用 clip-path 实现的效果,也可以用 mask 实现

在我看来,mask 和 background 是高度类似的,区别在于 background 位于底层,而 mask 在顶层

 

相关文章:

《CSS遮罩CSS3 mask/masks详细介绍》

《CSS3蒙版》

《CSS3 的一对孪生兄弟之 background & mask》

 

 

六、滤镜 filter

滤镜应该也算比较常用的属性了,同一张图叠加不同的滤镜之后,能呈现各种各样的效果:

但这只是基本用法!

filter 可以做出很多漂亮的效果,特别是结合 animation 之后,这些高级技巧可以参考下面的“相关文章”,看完之后我都惊呆了

 

相关文章:

《filter》

《你所不知道的 CSS 滤镜技巧与细节》

《QQ 未读消息的拖拽动态效果是如何实现的? - 祥子的回答 - 知乎》

《从酷炫的果冻菜单谈起 CSS3 filter 属性》

 

 

七、混合模式 blend-mode

如果对 Photoshop 的混合模式很熟悉的话,这个属性也非常好理解

在 CSS 里面,有 mix-blend-mode 和 background-blend-mode 两种用法

呈现的效果和上面的 filter 类似,也是让原图形叠加之后产生化学反应,比如用 CSS 做一个抖音的 LOGO:

CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO

 

相关文章:

《混合模式》

《mix-blend-mode的使用》

《探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题》

 

おすすめ

転載: www.cnblogs.com/wisewrong/p/11259490.html