![Sites to improve IT skills/Everything about websites and programs [HTML, CSS, Javascript, PHP, VBA, python]](https://3rdcom.biz/b/wp-content/uploads/2021/07/アセット-226.png)
CSS for various headings.
Heading 001
.css_001{
color: #333;
border-left: 3px solid transparent;
}It is a simple design with a left line.
Heading 002
.css_002{
color: #FFF;
background-color: #007552;
position: relative;
padding-left: 2rem;
}
.css_002::before{
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 10px solid #333;
border-left: 10px solid #333;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}This design has a triangle in the top left corner of the heading to make it look like a tag.
Heading 003
.css_003 {
position: relative;
color: #fff;
border-radius: 10px;
background: #002ec7;
margin-bottom: 20px;
}
.css_003::after {
position: absolute;
content: '';
left: 1em;
bottom: -20px;
width: 0;
height: 0;
border-top: 10px solid #002ec7;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}This is a basic speech bubble design.
Heading 004
.css_004{
position: relative;
color: #fff;
background: #2b50c7;
margin-bottom: 20px;
margin-left: 2rem;
padding-left: 2rem;
}
.css_004::before{
content: "1";
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
top: -2px;
left: -30px;
font-size: 20px;
border-radius: 50px;
background-color: #012088;
color: #FFF;
text-align: center;
vertical-align: middle;
}This is a heading design that includes numbers.
Heading 005
.css_005{
position: relative;
color: #333;
text-align: center;
}
.css_005::after{
position: absolute;
content: "";
width: 5rem;
height: 0.3rem;
bottom:-0.3rem;
left: 50%;
transform: translateX(-50%);
background-color: #bd0000;
}A short, centered underline design.
Heading 006
.css_006{
position: relative;
color: #333;
text-align: center;
border: 2px solid #333;
}
.css_006::before,
.css_006::after{
position: absolute;
content: "";
left: 0;
border: 2px dashed #333;
width: 100%;
box-sizing: border-box;
}
.css_006::before{
top:0.2rem;
}
.css_006::after{
bottom:0.2rem;
}A simple retro design.
Heading 007
.css_007{
color: #ffffff;
background: #e76800;
box-shadow: 5px 5px 0px 0px rgba(255, 0, 0,0.5);
}A design with shadows.
Heading 008
<h2 class="css_008"><span class="inner_008">Heading008</span></h2>.css_008 {
max-width: 100%;
margin: 18px;
position: relative;
padding: 5px;
background: linear-gradient(90deg, rgb(255,255,0),rgb(0,255,0));
background-size: 100%;
display: inline-block;
}
.css_008::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(155deg, transparent 10px, #FFF 10px, #FFF 16px, transparent 16px), linear-gradient(-25deg, transparent 10px, #FFF 10px, #FFF 16px, transparent 16px);
background-position: top left, bottom right;
background-size: 50%;
background-repeat: no-repeat;
}
.css_008 .inner_008{
position: relative;
display: inline-block;
font-size: 18px;
line-height: 1.8;
margin: 0 21.6px;
padding: 4px 180px 0 36px;
background: linear-gradient(155deg, transparent 13px, #fff 13px), linear-gradient(-25deg, transparent 13px, #fff 13px), linear-gradient(transparent 0, #fff 0), linear-gradient(transparent 0, #fff 0);
background-position: top left, bottom right, top right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}This is a heading with many applications of gradation. Although it is a little complicated, each part can be applied easily.
Heading 009
<h2 class="css_009"><span>Heading 009</span><div></div></h2>.css_009 {
margin-left: auto;
margin-right: auto;
position: relative;
}
.css_009::before {
content: "";
position: absolute;
display: block;
margin: auto;
z-index: 0;
top: 2px;
left: 10px;
width: calc(100% - 20px);
height: calc(100% - 5px);
background: linear-gradient(45deg, transparent 0.5rem, #333 0.5rem), linear-gradient(315deg, transparent 0.5rem, #333 0.5rem), linear-gradient(225deg, transparent 0.5rem, #333 0.5rem), linear-gradient(135deg, transparent 0.5rem, #333 0.5rem);
background-position: bottom left, bottom right, top right, top left;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.css_009 span {
font-size: 2rem;
z-index: 2;
background: linear-gradient(45deg, transparent 0.5rem, #ff2272 0.5rem), linear-gradient(315deg, transparent 0.5rem, #ff2272 0.5rem), linear-gradient(225deg, transparent 0.5rem, #ff2272 0.5rem), linear-gradient(135deg, transparent 0.5rem, #ff2272 0.5rem);
background-position: bottom left, bottom right, top right, top left;
background-size: 51% 51%;
background-repeat: no-repeat;
position: relative;
color: #FFF;
display: block;
width: auto;
margin: 0 auto;
padding: 0.5rem 2rem 0.3rem 1rem;
}This is a heading with all four corners cut and a frame added.
It may look simple, but it’s actually surprisingly difficult.
Heading 010
<h2 class="css_010"><span>Heading 010</span></h2>.css_010{
position: relative;
display: inline-block;
overflow: hidden;
}
.css_010::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background: linear-gradient(to right, transparent, #999);
animation: ani_line 1s linear infinite;
}
@keyframes ani_line {
0% {transform: translateX(-100%);}
100% {transform: translateX(100%);}
}This heading has a gradient underline with animation to add movement.
コメント