パーティを見出しクール瞬間、パーティーは常にクールなタイトルとなっています
それでも大学では見たことがなかった、私はフォトショップで遊ぶのが好き。そのあまりにも多くの食べ物を、添えものの多くは、フォトショップ、CSSによって効果を達成していたので、その後、ウェブを書い特にPhotoshopのと同じ絵に対処できるようにしたいました。
CSSのより多くの知識を持って、私はCSSの多くは通常より少ない(または使用していない)が、非常に強力な属性でありました。これらのプロパティは、このようなフィルタ、ブレンドモードなどのPhotoshopの機能の多くを達成します。
私は単純に各プロパティは、単にディレクトリを行うので、ここでは、個別に書き込むことができ、これらの性質に起因する非常に強力な機能に、ビットを注文します。
まず、グラデーショングラデーション
PSが非常に一般的に使用される機能の緩やかな変化は、多くのシーンの作業にCSSグラデーションを使用します
しかし、単純な線形グラデーション、放射状の勾配、勾配を用いて作製することができる効果に加えて:
あるいは勾配でプログレスバーを行います。
関連記事:
「CSSグラデーションを使用します」
「CSS3グラデーショングラデーションは、そのプレイを行うことができます。」
第二に、反射ボックスは、反映します
このプロパティは、反射を発生するDOM要素を可能にし、所定の方向と反射の距離であってもよいです
この反射に加えて、あなたはまた、そのような透明勾配として、マスクを追加することができます。
-webkit-ボックス反映:(底、透明、RGBA(へ-7px線形勾配下0、0、0、0.4))。
関連記事:
第三に、シャドーボックスシャドウ/テキストの影
それは非常に一般的な特性であるが、多くの場合のようないくつかの簡単な影を、行うために使用されています。
しかし、アニメーションの組み合わせと変換は、そのような映画を作ることができます。
CodePen Demo -- CSS Checker Illusion( By David Khourshid )
相关文章:
四、 裁剪 clip-path
这个属性可以创建一个裁剪区域,让元素只显示区域内的内容,有点像 Photoshop 中“路径+蒙版”的效果
这个属性值最强大的地方在于,可以非常自由的绘制多边形:
相关文章:
五、蒙板 mask
蒙板的效果是在原图形上面,在蒙上一层图形,得到一个新的图形
由于蒙板图形可以是透明的,所以有些用 clip-path 实现的效果,也可以用 mask 实现
在我看来,mask 和 background 是高度类似的,区别在于 background 位于底层,而 mask 在顶层
相关文章:
《CSS3 的一对孪生兄弟之 background & mask》
六、滤镜 filter
滤镜应该也算比较常用的属性了,同一张图叠加不同的滤镜之后,能呈现各种各样的效果:
但这只是基本用法!
filter 可以做出很多漂亮的效果,特别是结合 animation 之后,这些高级技巧可以参考下面的“相关文章”,看完之后我都惊呆了
相关文章:
《QQ 未读消息的拖拽动态效果是如何实现的? - 祥子的回答 - 知乎》
七、混合模式 blend-mode
如果对 Photoshop 的混合模式很熟悉的话,这个属性也非常好理解
在 CSS 里面,有 mix-blend-mode 和 background-blend-mode 两种用法
呈现的效果和上面的 filter 类似,也是让原图形叠加之后产生化学反应,比如用 CSS 做一个抖音的 LOGO:
CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO
相关文章:
《探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题》