css实现文字阴影海报封面效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现文字阴影海报封面效果代码

代码标签: cs 文字 阴影 海报 封面

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Anton");
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

html {
  font-size: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-items: center;
  background-color: #edeff5;
  display: flex;
  font-family: sans-serif;
  font-size: 100%;
  font-weight: normal;
  justify-content: center;
  overflow-x: hidden;
  padding: 2rem;
}

.poster {
  align-items: center;
  background-color: white;
  box-shadow: 0 2vh 5vh rgba(0, 0, 0, 0.3);
  display: flex;
  height: 80vh;
  justify-content: center;
  overflow: hidden;
  padding: 5vh;
  width: 56vh;
}

h1 {
  color: white;
  font-family: Anton, sans-serif;
  font-size: 10vh;
  font-weight: normal;
  line-height: 1;
  text-shadow: -1px 1px black, -1px 1px black, -2px 2px black, -3px 3px black, -4px 4px black, -5px 5px black, -6px 6px black, -7px 7px black, -8px 8px black, -9px 9px black, -10px 10px black, -11px 11px black, -12px 12px black, -13px 13px black, -14px 14px black, -15px 15px black, -16px 16px black, -17px 17px black, -18px 18px black, -19px 19px black, -20px 20px black, -21px 21px black, -22px 22px black, -23px 23px black, -24px 24px black, -25px 25px black, -26px 26px black, -27px 27px black, -28px 28px black, -29px 29px black, -30px 30px black, -31px 31px black, -32px 32px black, -33px 33px black, -34px 34px black, -35px 35px black, -36px 36px black, -37px 37px black, -38px 38px black, -39px 39px black, -40px 40px black, -41px 41px black, -42px 42px black, -43px 43px black, -44px 44px black, -45px 45px black, -46px 46px black, -47px 47px black, -48px 48px black, -49px 49px black, -50px 50px black, -51px 51px black, -52px 52px black, -53px 53px black, -54px 54px black, -55px 55px black, -56px 56px black, -57px 57px black, -58px 58px black, -59px 59px black, -60px 60px black, -61px 61px black, -62px 62px black, -63px 63px black, -64px 64px black, -65px 65px black, -66px 66px black, -67px 67px black, -68px 68px black, -69px 69px black, -70px 70px black, -71px 71px black, -72px 72px black, -73px 73px black, -74px 74px black, -75px 75px black, -76px 76px black, -77px 77px black, -78px 78px black, -79px 79px black, -80px 80px black, -81px 81.........完整代码请登录后点击上方下载按钮下载查看

网友评论0