Git Product home page Git Product logo

css-daily's Introduction

Hi I’m Deuscx 👋

  • ✨ Welcome to my Github page! I am Deuscx,a web developer
  • 🌱 I’m currently learning React, Rust
  • ⚡ Technology: JavaScript Nodejs TypeScript Vue VSCode Neovim

Recent GitHub Activity

Github Stats

deuscx's GitHub Stats

css-daily's People

Contributors

deuscx avatar

Watchers

avatar

css-daily's Issues

Neumorphism样式

在线工具：https://neumorphism.io/

新拟物化（Neumorphism）风格。

Neumorphism

样式特点：

  • shadows：
    • 元素包含两种阴影：亮与暗
  • background
    • Neumorphism元素的背景颜色需要和父元素的背景颜色相同或者相似
  • edges
    • 采用圆角边
  • borders
    • 可以有多重边使得边看起来更尖锐

简单实现：

border-radius: 50px;
background: #e0e0e0;
box-shadow:  20px 20px 60px #bebebe,  /*暗色*/
             -20px -20px 60px #ffffff; /*亮色*/

codepen demo

Glitch Effect

故障效果：

纯CSS实现

原理：

  1. 通过伪元素 ::before, ::after创建文本复制
<div class="glitch" data-text="GLITCH">GLITCH</div> 
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  1. 通过 clip-path 属性对文本进行分割
.glitch::before {
  /* ... anything needed to make it identical */
	clip-path: inset(40% 0 60% 0)
  /* variation */
  left: 2px;
  text-shadow: -1px 0 red;
  
  /* important: opaque background masks the original */
  background: black;
}
.glitch::after {
  /* ... anything needed to make it identical */

  /* variation */
  left: -2px;
  text-shadow: -1px 0 blue;
  
  /* important: opaque background masks the original */
  background: black;
}

  1. 之后只需要通过动画来改变clip-path这些来实现不停改变的效果

使用元素的伪元素复制两份图片副本，再使用 clip-path 对图片进行裁剪并且添加位移、变形、滤镜等等。

诸如： transform中 scale，skew， translate等

filter中 saturate ,hue-rotate grayscale 等

@keyframes noise-anim {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      $top: random(100);
      $bottom: random(101 - $top);
      clip-path: inset(percentage($top/100) 0 percentage($bottom/100) 0);
    }
  }
}

通过scss的mixin生成故障效果：

@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
  
  color: $textColor;
  position: relative;
  $steps: $intensity;
  
  // Ensure the @keyframes are generated at the root level
  @at-root {
    // We need two different ones
    @for $i from 1 through 2 {
      @keyframes #{$name}-anim-#{$i} {
        @for $i from 0 through $steps {
          $top: random(100);
          $bottom: random(101 - $top);
          #{percentage($i*(1/$steps))} {
              clip-path: inset(percentage($top/100) 0 percentage($bottom/100) 0);
          }
        }
      }
    }
  }
  &::before,
  &::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: $background;
  }
  &::after {
    left: 2px;
    text-shadow: -1px 0 $highlightColor1;
    animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
  }
  &::before {
    left: -2px;
    text-shadow: 2px 0 $highlightColor2; 
    animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
  }
}

Codepen Demo

Glassmorphism 毛玻璃效果

Glassmorphism生成器

Glassmorphism - new trend in user interfaces design

通过CSS的 backdrop-filter

backdrop-filter和filter区别:

backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素自身模糊灰度或高亮之类。

background: rgba( 255, 255, 255, 0.20 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;

边框

边框

推荐阅读：

半透明边框

tip:

  • 通过background-clip,默认为border-box 。即若背景不透明，背景会覆盖border。因而设置为padding-box 这样浏览器就会用内边距的外沿来把背景裁切掉。
  • hsla 透明通道

image-20210210170210587

	border: 10px solid hsla(0,0%,100%,.5);
	background: white;
	background-clip: padding-box;

codepen demo

动画边框

关键点： border-image ：/* source | slice | width | outset | repeat */

border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
  • slice表示如何切割将image分为9宫格
  • repeat表示如何调节来适应尺寸。可选值 round（平铺），repeat（重复），stretch（拉伸）

1.border-image+conic-gradient

可以通过改变 conic-gradient 的起始角度

由于目前自定义变量不支持 deg，则需要使用@property 来自定义属性

.animate{
  	--angle: 0;
    width: 300px;
    height: 300px;
    border: 30px solid;
  
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
    animation: 10s rotate linear infinite;
}

@keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

body{
    display: grid;
    place-items: center;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

animate border codepen demo

2.background+filter+clip-path

使用

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
    filter: hue-rotate(360deg);
}

其中：

  • clip-path: inset(0px round 10px); 用于构建一个父容器大小（完全贴合，垂直水平居中于父容器）且 border-radius: 10px 的容器，将这个元素之外的所有东西裁剪掉（即不可见）
  • filter: hue-rotate() 用于改变边框颜色

注意：这种方法实现的动画边框 由于filter: hue-rotate()的缘故，会造成内部元素的背景颜色也会跟着发生变化

codepen demo

图像边框

使用图片背景+纯白的实色背景。为了让下层的图片背景透过边框区域显示出来，我们需要给两层背景指定不同
的background-clip 值。

信封

信封式背景

 background: linear-gradient(white, white) padding-box,
 repeating-linear-gradient(
        -45deg,
        red 0,
        red 12.5%,
        transparent 0,
        transparent 25%,
        #58a 0,
        #58a 37.5%,
        transparent 0,
        transparent 50%
      )
      0 / 6em 6em;

这里background通过一个纯白背景，另一个是条纹背景一起构成。

background: <bg-image> || <bg-position> [ / <bg-size> ]? || <bg-origin>

codepen demo

蚂蚁行军

通过改变background-position 可以实现动画的效果

ant_walk

@keyframes ants { to { background-position: 100% 100% } }

div{
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / 1em 1em;
  animation: ants 12s linear infinite;
}

codepen demo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.