CSS – JS ví dụ tạo tiêu đề cho website

Link tham khảo: https://codepen.io/NzNcn/pen/RVKwdL

HTML:

<h1>Đang code thêm cái icon mà lỗi cmnrrrrrrrr</h1>
</br>
<h2>Hết lỗi rồi nhưng lười quá rồiiiiiiiiiiii</h2>
</br> <hr> </br>

<div id=’nz-div’>
<h3 class=”tde”>
<span class=”null”>Nấm độc có thể ăn được ít nhất 1 lần</span>
</h3>
<div class=”sub-cat”>
<span>Tự tử</span>
<span>Tự cung</span>
<span>Tự đoạn</span>
<span>Tự xử</span>
<span>Tượng xứ</span>
</div>
</div>

</br> </br>

<div id=’nz-div-2′>
<h3 class=”tde”>
<span>Quay đầu là bờ. Bơi sang kia cũng là bờ</span>
</h3>
<hr>
</div>
</br> </br>

<div id=’nz-div-2′>
<h3 class=”tde addicon”>
<span>Quay đầu là lên bàn thờ. Bơi sang kia xác trôi vào bờ</span>
</h3>
<hr>
</div>
</br> </br>
<div id=’nz-div-3′>
<h3 class=”tde”>
<span>Con nhà nghèo nên không nuôi mèo</span>
</h3>
</div>

</br> </br>

<div id=’nz-div-4′>
<h3 class=”tde”>
<span>Sau cơn mưa thì trời vẫn tối</span>
</h3>
</div>

<div id=’nz-div-5′>  <h3 class=”tde”><span>Không được hấp diêm dưới mọi hình thức</span></h3></div>

</br> </br>

<h3 class=”nz-div-6″><span class=”title-holder”>CẨM NANG NỘI TRỢ CHO ĐÀN ÔNG CÓ THAI</span></h3>

</br> </br>

<div class=”box-title”><div class=”box-title-name”><span class=”null”>Quy trình</span> mua bán nô lệ</div>
</div>

<div class=”divnz”>

<p class=”p-nz-1″ style=”text-align: justify;”><strong>Nhật Bản</strong> là một trong những quốc gia nổi tiếng về sự sáng tạo vô bờ bến của mình với nền công nghiệp manga, anime phát triển rực rỡ. Bên cạnh đó thì nền công nghiệp phim người lớn của Nhật cũng được giới chuyên gia kinh tế trên thế giới là đã phát triển mạnh trong những năm qua và thậm chí còn có dấu hiệu vượt qua cả Châu Âu và Bắc Mỹ trong thị trường phim người lớn.</p>

</div>

<div class=”divnz”>
<div class=”titsp”><a href=”#” class=”titsp3″ title=”Ncnz”>Đêm dài lắm mộng. Mặt nọng lắm thịt.</a></div>

</br> </br> </br>

<div class=”titsp titsp2″>Con đg dẫn đến thành công là lấy vợ giàu</div>

</div>

<link href=”https://fonts.googleapis.com/css?family=Play” rel=”stylesheet”>
<link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”>
<!– Cứ mang đi đâu tùy thích…
fb.com/nzncn –>

CSS

* {
font-family: “Play”, sans-serif;
}

div#nz-div {
border-bottom: 2px solid #2ecc71;
margin-bottom: 40px;
display: block;
}

#nz-div h3.tde {
margin: 0;
font-size: 16px;
line-height: 20px;
display: inline-block;
text-transform: uppercase;
}

#nz-div h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #2ecc71;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nz-div h3.tde span {
background: #2ecc71;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

.sub-cat {
color: #2ecc71;
display: inline-block;
margin: 0;
line-height: 45px;
margin-left: 100px;
float: right;
}

/* 2 ========================= */

#nz-div-2 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-left: 15px solid #3498db;
border-bottom: 19px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -15px;
}

#nz-div-2 h3.tde span {
background: #3498db;
padding: 11px 20px 9px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nz-div-2 h3.tde {
margin: 15px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nz-div-2 hr {
margin: -34px 0px 54px 0px;
border: 1px solid #3498db;
}

/* 2 Add Icon ========= */

#nz-div-2, #nz-div-2 h3.tde { display: block;}
#nz-div-2 h3.addicon span { margin: 0 0 0 41px;}
h3.addicon:before {
content: “\f036”;
position: absolute;
display: inline-block;
width: 40px;
text-align: center;
z-index: 1;
font-family: FontAwesome;
font-size: 20px;
line-height: 40px;
background: #b20000;
color: #fff;
border-right: 1px solid #fff;
}

/* 3 ========================= */

#nz-div-3 h3.tde span {
background: #e74c3c;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
border-radius: 23px 23px 0px 0px;
}

#nz-div-3 h3.tde {
margin: 15px 0;
border-bottom: 2px solid #e74c3c;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

/* 4 ========================= */

#nz-div-4 h3.tde :after {
content: “”;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 20px solid #16a085;
border-bottom: 0px solid transparent;
border-right: 0 solid transparent;
position: absolute;
top: 0px;
right: -20px;
}

#nz-div-4 h3.tde :before {
content: “”;
width: 0;
height: 0;
border-width: 40px 20px 0px 0px;
border-style: solid;
border-color: transparent;
border-right-color: #16a085;
position: absolute;
top: 0px;
left: -20px;
}

#nz-div-4 h3.tde span {
background: #16a085;
padding: 10px 20px 8px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
}

#nz-div-4 h3.tde {
text-align: center;
margin: 45px 0;
border-bottom: 2px solid #16a085;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

/* 5 ========================= */

#nz-div-5 {
text-align: center;
}

#nz-div-5 h3.tde {
text-align: center;
margin: 45px 0;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}

#nz-div-5 h3.tde span {
background: #8cc63f;
height: 50px;
line-height: 50px;
padding: 0px 20px;
color: white;
position: relative;
display: inline-block;
margin: 0;
z-index: 45;
border-radius: 10px 10px 0px 0px;
border: 1px solid #8bb54b;
}

#nz-div-5 h3.tde :before,
#nz-div-5 h3.tde :after {
content: “”;
background: url(https://image.ibb.co/d21QDA/bgh-nz1-l.png);
width: 87px;
height: 50px;
position: absolute;
top: 19px;
z-index: -1;
}
#nz-div-5 h3.tde :before {
left: -44px;
}
#nz-div-5 h3.tde :after {
transform: rotateY(180deg);
right: -44px !important;
}

/* ======================================= */
.nz-div-6 {
color: #fff;
font-size: 18px;
position: relative;
margin-top: 30px;
margin-bottom: 30px;
font-weight: 700;
background-color: #fff;
text-align: center;
}

h3.nz-div-6:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: 0;
border-top: 2px solid #d0d2d3;
z-index: 1;
display: block;
}

.nz-div-6 .title-holder {
min-width: 350px;
height: 45px;
background-color: #56bbe7;
line-height: 45px;
padding: 0px 20px;
position: relative;
z-index: 2;
text-align: center;
display: inline-block;
}

.title-holder:before {
content: “”;
position: absolute;
right: -15px;
border-width: 0px;
bottom: 0px;
border-style: solid;
border-color: #5c9efe transparent;
display: block;
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 22px solid transparent;
border-left: 15px solid #56bbe7;
}

.title-holder:after {
content: “”;
position: absolute;
left: -15px;
border-width: 0px;
bottom: 0px;
border-style: solid;
border-color: #5c9efe transparent;
display: block;
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 22px solid transparent;
border-right: 15px solid #56bbe7;
}

/* Quy trình…. */

/*************** 2 **************/
.box-title {
position: relative;
margin: 50px 0;
text-align: center;
}
.box-title .box-title-name {
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
color: #fff;
background: #00aa46;
display: inline-block;
vertical-align: top;
position: relative;
z-index: 1;
padding: 10px 20px;
marrgin-bottom: 20px;
border-radius: 15px;
}
.box-title .box-title-name:before {
content: “”;
position: absolute;
border-top: 10px solid #00aa46;
border-left: 15px solid transparent;
border-bottom: 7px solid transparent;
border-right: 15px solid transparent;
left: calc(50% – 40px);
bottom: -25px;
width: 50px;
}
.box-title .box-title-name:after {
content: “”;
position: absolute;
z-index: 2;
bottom: -18px;
height: 9px;
width: 200px;
left: calc(50% – 100px);
border-top: 2px solid #00aa46;
}

.divnz p.p-nz-1 {
font-size: 16px;
line-height: 26px;
color: #737373;
font-family: “Roboto Condensed”, sans-serif;
position: relative;
padding: 15px 25px;
margin: 50px auto;
margin-bottom: 5px;
font-style: italic;
border: 2px dashed #ff00c6;
border-radius: 0 30px 0 30px;
max-width: 500px;
display: block;
}

.divnz p.p-nz-1:before,
.divnz p.p-nz-1:after {
content: “”;
position: absolute;
background: url(https://image.ibb.co/mncqDA/red73-Km-d.png) #fff;
width: 35px;
height: 35px;
background-size: contain;
transition: xoaytron 1s cubic-bezier(1, -0.21, 0, 1.21);
animation-duration: 15s;
animation-name: xoaytron;
animation-iteration-count: infinite;
animation-direction: alternate;
}

.divnz p.p-nz-1:before {
left: -16px;
top: -16px;
}
.divnz p.p-nz-1:after {
bottom: -16px;
right: -16px;
transform: rotateZ(180deg);
}

/* Icon Xoay */
@keyframes xoaytron {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateZ(0deg);
padding: 0px;
filter: brightness(100%);
}
85% {
-webkit-transform: rotateZ(1080deg);
transform: rotateZ(1080deg);
padding: 0px;
filter: brightness(120%);
}
100% {
-webkit-transform: rotateZ(1080deg);
transform: rotateZ(1080deg);
padding: 0px;
filter: brightness(129%);
}
}

.divnz {
display: block;
margin: 100px auto 0;
text-align: center;
}
.titsp a {
color: #fff;
text-decoration: blink;
border-radius: 10px;
}
.titsp3 {
background: linear-gradient(
270deg,
#6bec10,
#0ecb84,
#cc0ebc,
#f0104c,
#ff5b11
);
background-size: 600% 100%;
-webkit-animation: nz-color 30s infinite;
-moz-animation: nz-color 30s infinite;
-o-animation: nz-color 30s infinite;
animation: nz-color 30s infinite;
color: #fff !important;
font-weight: 700;
padding: 13px 30px;
text-transform: uppercase;
border: 1px solid #ffffff;
box-shadow: 3px 5px 5px #ccc;
}

@keyframes nz-color {
0%,
100% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
}

/* — Title Nz 2 — */

.titsp2 {
background-image: linear-gradient(
to right,
#b12a5b 0%,
#cf556c 10%,
#ff8177 20%,
#ff867a 30%,
#f99185 40%,
#ff8c7f 55%,
#f99185 69%,
#cf556c 85%,
#b12a5b 100%
);
background-size: 300% 100%;
-webkit-animation: nz-color 5s infinite;
-moz-animation: nz-color 5s infinite;
-o-animation: nz-color 5s infinite;
animation: nz-color 5s infinite;
display: inline-block;
font-size: 17px;
color: #fff;
padding: 12px 30px 9px;
border-radius: 100px;
border: 1px solid #ffffff;
box-shadow: 3px 5px 5px #ccc;
margin: 20px 0;
text-transform: uppercase;
}

Leave a Reply