CSS实践:占位符交互、使用mix-blend-mode混合元素

2021年3月5日10:52:06 发表评论 81 views

占位符交互

具体效果:输入框处于聚焦状态时,输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。

<div class="input-box">
   <input class="input-control input-outline" placeholder="账号">
   <label class="input-label">账号</label>
</div>
复制代码

首先,让浏览器默认的placeholder效果不可见

.input-control:placeholder-shown::placeholder {
    color: transparent;
}
复制代码

第二,使用.input-label元素代替浏览器原声的占位符

.input-box{
  position: relative;
}
.input-label {
  position: absolute;
  left: 16px; top: 14px;
  pointer-events: none;
}
复制代码

最后,在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位,效果是缩小并移动到上方

.input-control:not(:placeholder-shown) ~ .input-label,
.input-control:focus ~ .input-label {
  color: #2486ff;
  transform: scale(0.75) translate(-2px, -32px);
}
复制代码

效果如下:

使用mix-blend-mode混合元素

使用mix-blend-mode属性,不仅可以混合图片,还可以把元素的文本和边框与容器的背景图片混合在一起。

目标是在图片上添加标题:

<div class='blend'>
  <h1>熊出没</h1>
</div>
复制代码

为h1增加样式,最终效果为红色的纯背景通栏、亮灰色顶部和底部宽边框。然后应用融合混合模式,整个元素被视为一个图层,和下面的容器里的背景图片混合在一起。

.blend{
  background-image: url('image');
  background-size: cover;
  background-position: center;
}
.blend > h1{
  mix-blend-mode: hard-light;
  background-color: #c33;
  color: #808080;
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}
复制代码

效果如下: 融合后的效果很有意思,文字看上去是透明的,就像是红色横幅被剪掉。这里使用hard-light混合模式和中灰色文字颜色。对比混合模式在使用很亮或很暗的颜色时才能有更好的效果。

作者:zhangwinwin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: