cara membuat tulisan judul blog keren
Selamat malam menjelang weekand besok sahabat seoke.com semua,oke kalia ini seoke.com akan membagikan tentang cra membuat tulisan judl blog keren.
jika kalian terratik silahkan ikuti apa yang seoke.com jelaskan nanti dan cara penempatan kode tersebut
foto By bukainfo.com
- yang peretama yang pasti kalian sudah punya dulu blog atau yang nantinya kita gunakan untuk meenpatakan kode kode teersebut.
kita langsung ke code HTMLnya
- CSS
/*punk seoke.com*/dan code HTMLny
.punk {
font-size:6vw;
margin-top:10vh;
text-align:center;
}
.punk span {
display:inline-block;
margin:0 .05em;
padding:0 .15em;
min-width:.25em;
}
.punk span:first-child,
.punk span:last-child {
position:relative;
}
.punk span:first-child:before {
content:"";
border:solid 2px #eee;
border-top-width:.2em;
border-radius:.25em;
height:.5em;
left:-0.1em;
position:absolute;
top:-0.25em;
transform:rotate(20deg);
width:.15em;
}
.punk span:first-child:after {
background-color:inherit;
content:"";
height:.15em;
left:.05em;
position:absolute;
top:.05em;
transform:rotate(20deg);
width:.1em;
}
.punk span:last-child:before {
content:"";
border:solid 2px #eee;
border-top-width:.2em;
border-radius:.25em;
height:.5em;
right:-0.1em;
position:absolute;
top:-0.25em;
transform:rotate(-20deg);
width:.15em;
}
.punk span:last-child:after {
background-color:inherit;
content:"";
height:.15em;
right:.05em;
position:absolute;
top:.05em;
transform:rotate(-20deg);
width:.1em;
}
/* font */
.punk span:nth-child(5n+1) {
font-family:serif;
font-size:1.25em;
}
.punk span:nth-child(5n+2) {
font-family:sans-serif;
}
.punk span:nth-child(5n+3) {
font-family:monospace;
font-size:1.25em;
}
.punk span:nth-child(5n+4) {
font-family:serif;
font-style:italic;
}
.punk span:nth-child(5n+5) {
font-family:fantasy;
}
/* shadow */
.punk span:nth-child(4n+1) {
box-shadow:.05em .05em currentColor;
}
/* rotate */
.punk span:nth-child(3n+1) {
transform:rotate(5deg);
}
.punk span:nth-child(3n+3) {
transform:rotate(-5deg);
}
/* colour schemes */
.punk span:nth-child(12n+1) {
background-color:#f09;
color:#000;
}
.punk span:nth-child(12n+2) {
background-color:#ff0;
color:#f09;
}
.punk span:nth-child(12n+3) {
background-color:#fff;
color:#000;
}
.punk span:nth-child(12n+4) {
background-color:#000;
color:#ff0;
}
.punk span:nth-child(12n+5) {
background-color:#f09;
color:#000;
}
.punk span:nth-child(12n+6) {
background-color:#ff0;
color:#f09;
}
.punk span:nth-child(12n+7) {
background-color:#fff;
color:#f09;
}
.punk span:nth-child(12n+8) {
background-color:#000;
color:#ff0;
}
.punk span:nth-child(12n+9) {
background-color:#f09;
color:#fff;
}
.punk span:nth-child(12n+10) {
background-color:#fff;
}
.punk span:nth-child(12n+11) {
background-color:#ff0;
}
.punk span:nth-child(12n+12) {
background-color:#000;
color:#fff;
}
p {
color:#bbb;
font-family:monospace;
font-size:5vw;
margin:10vw;
text-shadow:-1px -1px #ddd;
}
<h1 class="punk">dan hasilnya akan seperti demo berikut silahkan kunjungi demo di bawah ini
<span>P</span><span>u</span><span>n</span><span>k</span><span> </span><span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>i</span><span>n</span><span>g</span>
</h1>
dan jika kalian bingung dengan cara penempatan code CSS tau kode HTML silahkan tinggalkan pesanya di komentar.
Terima kasih telah berkunjung di blognya seoke.com yang selalu menyediakan code code sperti HTML,CSS,JAVASCRIPT dan tentang tutorial blog.
jang lupa juga kunjungi artikel yang menarik lainya Cara membuat share button melayang.dan Cara meunculakan penghasilan di dashboard blogspot.
Ditulis Oleh : Seoke.com Blogger
Terima kasih telah berkunjung di cara membuat tulisan judul blog keren.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.
0 komentar:
Post a Comment