纯CSS - 足球贴纸效果文字

            
            
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
  --primary_color:#FFC066;
  --secondary_color:#374f1f;
  --card-color:#f2e3cd;
  --bg_color:#2331a0;
  --third:#6ca9c1;
  --white:#eee;
  --dark-grey:#555;
  --black:#333;
}

.brazil{
  --primary_color:#FFC066;
  --secondary_color:#6c772e;
  --third_color:#2a4368;
}

.urss{
  --secondary_color:#ff4f4f;
  --primary_color:#FFC066;
  --third_color:#333;
}

.argentina{
  --primary_color:#eee;
  --secondary_color:#7cc1f9;
  --third_color:#333;
}


.france{
  --primary_color:#ff4f4f;
  --secondary_color:#2a4368;
  --third_color:#eee;
}

.italy{
  --primary_color:#ff4f4f;
  --secondary_color:#6c772e;
  --third_color:#eee;
}

.spain{
  --primary_color:#ff4f4f;
  --secondary_color:#FFC066;
  --third_color:#eee;
}

.england{
  --primary_color:#eee;
  --secondary_color:#ff4f4f;
  --third_color:#333;
}

.germany{
  --primary_color:#ff4f4f;
  --secondary_color:#FFC066;
  --third_color:#eee;
}

body{
  font-size:62.5%;
  font-family:roboto;
  width:100vw;
  background-color:var(--primary_color);
  text-transform:uppercase;
  padding:90px;
  padding-top:30px;
  display:flex;
  justify-content:center;
}

.names{
  background-color:var(--card-color);
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  margin:20px 15px;
  border-radius:10px;
  border:4px solid var(--black);
  box-shadow: 14px 14px 0px 0px var(--black);
  width:900px;
  padding-top:80px;
}

.name_container{
  display:block;
  height:20em;
  display:flex;
  align-items:center;
  justify-content:center;
  width:59em;
  position:relative;
  width:100%
}

.name_container_name{
  font-size:9.2em;
  font-weight:900;
  color:var(--secondary_color);
}



.name_container._1 .name_container_name{
  color:var(--primary_color);
  filter:drop-shadow(6px 6px 0px var(--secondary_color))
  drop-shadow(6px 6px 0px var(--third_color));

  
  & span{
    -webkit-text-stroke:4px var(--black);
  }
}

.name_container._2 .name_container_name{
  filter:drop-shadow(8px 8px 0px var(--black));
  
  & span{
  -webkit-text-stroke:4px var(--black);
  background: linear-gradient(180deg, var(--primary_color)60%, var(--secondary_color) 40%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
}

.name_container._3 .name_container_name{
  filter:drop-shadow(1px 1px 0px var(--black))
      drop-shadow(1px 0px 0px var(--black))
      drop-shadow(1px -1px 0px var(--black))
      drop-shadow(-1px 1px 0px var(--black))
      drop-shadow(-1px 0px 0px var(--black))
      drop-shadow(-1px -1px 0px var(--black))
      drop-shadow(6px 6px 0px var(--black));
  color:var(--primary_color);
  & span{
    -webkit-text-stroke:5px var(--secondary_color);
  }
}


.name_container._4 .name_container_name{
  color:var(--white);
  filter:drop-shadow(6px 6px 0px var(--secondary_color))
  drop-shadow(-6px -6px 0px var(--primary_color));

  
  & span{
    -webkit-text-stroke:4px var(--black);
  }
}

.name_container._5 .name_container_name{
  position:relative;
  color:red "important";
  
  &::after{
    content:"";
    display:block;
    min-height:44%;
    min-width:110%;
    position:absolute;
    bottom:5%;
    left:50%;
    transform:translateX(-50%);
    background: linear-gradient(180deg, var(--primary_color)50%, var(--secondary_color) 50%);
    outline:2px solid var(--black);
  }
  
  & span{
    color:var(--white);
    -webkit-text-stroke:3px var(--black);
    filter:drop-shadow(3px 3px 0px var(--black));
    z-index:999;
    display:block;
    position:relative;
  }
}




.name_container._6 .name_container_name{
  color:var(--primary_color);
  filter:drop-shadow(0px 8px 0px var(--secondary_color));

  
  & span{
    -webkit-text-stroke:2px var(--black);
  }
}



.name_container._7 .name_container_name{
  position:relative;
  
  &::after{
    content:"===============";
    position:absolute;
    display:block;
    height:40%;
    width:120%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background-color:var(--primary_color);
    overflow:hidden;
    white-space: nowrap;
    letter-spacing:-20px;
    display:flex;
    justify-content:center;
    border-radius:30px;
    background: linear-gradient(180deg, var(--primary_color)50%, var(--secondary_color) 50%);
    outline:1px solid var(--black);
  }
  
  & span{
    color:var(--white);
    -webkit-text-stroke:2px var(--black);
    z-index:999;
    display:block;
    position:relative;
    filter:drop-shadow(4px 4px 0px var(--black));
  }
}




.name_container._8 .name_container_name{
  position:relative;
  
  &::before{
    content:"";
    position:absolute;
    display:block;
    height:40%;
    width:0.5em;
    top:50%;
    left:0px;
    transform:translate(-146%, -50%);
    background-color:var(--primary_color);
    border-radius:30px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    background: linear-gradient(180deg, var(--primary_color)50%, var(--secondary_color) 50%);
    outline:3px solid var(--black);
    filter:drop-shadow(4px 4px 0px var(--black));
  }
  
  &::after{
    content:"";
    position:absolute;
    display:block;
    height:40%;
    width:0.5em;
    top:50%;
    right:0px;
    transform:translate(147%, -50%);
    background-color:var(--primary_color);
    border-radius:30px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background: linear-gradient(180deg, var(--primary_color)50%, var(--secondary_color) 50%);
    outline:3px solid var(--black);
    filter:drop-shadow(4px 4px 0px var(--black));
  }
  
  & span{
    color:var(--primary_color);
    -webkit-text-stroke:3px var(--black);
    z-index:999;
    display:block;
    position:relative;
    filter:drop-shadow(3px 3px 0px var(--black));
  }
}



.name_container._9 .name_container_name{
  position:relative;
  --name:attr(data-name);
  &::after{
    content:var(--name);
    color:transparent;
    position:absolute;
    display:block;
    height:100%;
    width:120%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-48%, -45%);
    overflow:hidden;
    display:flex;
    justify-content:center;
    -webkit-text-stroke:2px var(--black);
  }
  
  & span{
    color:var(--primary_color);
    -webkit-text-stroke:2px var(--black);
    z-index:999;
    display:block;
    position:relative;
  }
}