css - Design Weave

数字と組み合わせたCSS見出し

				
					.heading-numbers {
	position: relative;
	padding-left: 80px;
	padding-top:10px;
	font-size: 20px;
	margin-bottom:25px;
}

.heading-numbers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 2px;
    background-color: #f6921d;
}

.heading-numbers::after {
    content: attr(data-number);
    position: absolute;
    top: 70%;
    left: 5px;
    transform: translateY(-50%);
    color: #f6921d94;
    font-size: 50px;
}

ラインを使ったCSS見出し

				
					.heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

.heading04::before,
.heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #2eb0d9;
}

.heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

ラインを使ったCSS見出し

				
					.heading-line {
    display: inline;
    font-size: 26px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(244 160 32 / 67%) 70%);
}

01CSS見出し

02CSS見出し

03CSS見出し

04CSS見出し

				
					.numbers01 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #2eb1d8;
  color:#2eb1d8;
}

.numbers01:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #2eb1d8;
}

.numbers01 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}

.numbers02 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #f6921d;
  color:#f6921d;
}

.numbers02:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #f6921d;
}

.numbers02 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}

.numbers03{
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #e16877;
  color:#e16877;
}

.numbers03:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #e16877;
}

.numbers03 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}

.numbers04{
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #3db788;
  color:#3db788;
}

.numbers04:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #3db788;
}

.numbers04 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}