간단한 CSS 명함

19977 단어 beginnerstutorialcsswebdev
CSS만으로 쉽게 만들 수 있는 간단한 CSS 명함을 소개합니다.

CSS 명함의 더 많은 예를 보려면 here을 방문하십시오.

기본 HTML 구조 만들기



먼저 간단한 html 형식인 기본 html 구조를 만듭니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
</body>
</html>


HTML 컨테이너 만들기



내부에 h1 및 h2가 있는 카드라는 html 컨테이너를 만듭니다. 여기서  는 공백이고 &bull은 글머리기호입니다.

<div class='card'>
  <h1>BOBBY SHOWALTER</h1><h2>html&nbsp;&bull;&nbsp;css&nbsp;&bull;&nbsp;wordpress&nbsp;&bull;&nbsp;responsive design</h2>
</div>


기본 스타일 입력



본문의 기본 스타일을 입력하고 사용하려는 글꼴을 가져옵니다.

@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html {
  background-color: #4a4036;
  font-size: 62.5%;
}


카드 스타일 지정



아래 CSS로 카드 스타일 지정 -

.card {
  background: url("https://i.imgur.com/94AlaBk.png");
  box-shadow: 0px 4px 6px #181818;
  height: 36rem;
  margin: 10rem auto;
  position: relative;
  width: 72rem;
}
.card:before, .card:after {
  background-color: rgba(242, 88, 22, 0.8);
  box-shadow: 1px 2px 1px #fff, inset 0px 1px 2px #993409, 1px 2px 1px #fff;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 67rem;
}
.card:before {
  top: 2.5rem;
  left: 2.5rem;
}
.card:after {
  top: 33rem;
  left: 2.5rem;
}


그런 다음 H1 및 H2 태그의 스타일을 지정합니다.

h1 {
  color: rgba(24, 24, 24, 0.8);
  font-family: "Oswald", "Helvetica", "Arial", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  line-height: 10.8rem;
  padding-top: 10.5rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: uppercase;
}

h2 {
  color: rgba(242, 88, 22, 0.8);
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 4.5rem;
  margin-top: -2rem;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: lowercase;
}


전체 코드




<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html {
  background-color: #4a4036;
  font-size: 62.5%;
}

.card {
  background: url("https://i.imgur.com/94AlaBk.png");
  box-shadow: 0px 4px 6px #181818;
  height: 36rem;
  margin: 10rem auto;
  position: relative;
  width: 72rem;
}
.card:before, .card:after {
  background-color: rgba(242, 88, 22, 0.8);
  box-shadow: 1px 2px 1px #fff, inset 0px 1px 2px #993409, 1px 2px 1px #fff;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 67rem;
}
.card:before {
  top: 2.5rem;
  left: 2.5rem;
}
.card:after {
  top: 33rem;
  left: 2.5rem;
}

h1 {
  color: rgba(24, 24, 24, 0.8);
  font-family: "Oswald", "Helvetica", "Arial", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  line-height: 10.8rem;
  padding-top: 10.5rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: uppercase;
}

h2 {
  color: rgba(242, 88, 22, 0.8);
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 4.5rem;
  margin-top: -2rem;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: lowercase;
}
</style>
</head>
<body>
  <div class='card'>
  <h1>BOBBY SHOWALTER</h1>
  <h2>html&nbsp;&bull;&nbsp;css&nbsp;&bull;&nbsp;wordpress&nbsp;&bull;&nbsp;responsive design</h2>
</div>
</body>
</html>


그게 다야, 이것은 당신이 얻을 출력입니다 -

Weather API와 Node Js를 사용하여 날씨 앱 만들기: 1부
전화기에서 GraphQL API 생성 및 배포

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage