css tricks

Headers

Header Style 1 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { display: block; background-color: #e8e8e8; color: #555; font-family: Prata, serif; font-weight: normal; text-align: center; letter-spacing: .25em; text-transform: uppercase; font-size:25px; line-height: 10px; border-left: 1em solid #aaa; border-right: 1em solid #aaa; border-radius: 1em; margin: 10px 0; } /* ------------------------------------- */ </style> Header Style 2 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1:before { content:""; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 14px solid #aaa; display:inline-block; float:left; } h1:after { content:""; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-right: 14px solid #aaa; display:inline-block; float: right; } h1 { display:block; background-color: #e8e8e8; color: #555; font-family: Prata, serif; text-align: center; letter-spacing: .25em; text-transform: uppercase; font-size:16px; margin: 0; line-height:28px; border: 1px solid #aaa; } /* ------------------------------------- */ </style> Header Style 3 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { background: repeating-linear-gradient(-45deg, #555, #555 10px, #222 10px, #222 20px); color: white; font-family: Prata, serif; text-align: center; padding: 0 1em; font-size: 1.5rem; letter-spacing: 3px; border: 2px solid #222; margin: 0; } /* ------------------------------------- */ </style> Header Style 4 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { display:block; color: #555; font-family: Prata, serif; text-align: center; border: double #555; margin: 0; } h1:after, h1:before { content:""; width:10px; height:10px; border-radius:50%; background: #555; display:inline-block; } /* ------------------------------------- */ </style> Header Style 5 <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { display: inline-block; background-color: yellow; padding: 0 1em; font-family: 'Space Mono', monospace; font-weight: 400; text-transform: uppercase; margin: 0; } </style> Header Style 6 <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { display: block; background-color: #ddd; padding: 0 1em; font-family: 'Space Mono', monospace; font-weight: 400; text-transform: uppercase; margin: 0; } /* ------------------------------------- */ </style> Header Style 7 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1:before, h1:after { content: " ** "; padding: 0 .5em; display: inline-block; } h1 { background: #eee; display: block; text-align: center; font-family: Prata, serif; font-size: 24px; margin: 0; } /* ------------------------------------- */ </style> Header Style 8 <style> @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* header style by kassandra @ s0nshine.net */ h1 { display: block; font-family: Prata, serif; font-size: 36px; margin: 0; } </style>

Links

Style 1

Linkity Linkity Linkity

Linkity Linkity Linkity

<style> /* link style by kassandra @ s0nshine.net */ a.nav1 { display: block; background-color: #ccc; border-radius: 1em; color: #555; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 10px; font-weight: normal; text-align: center; text-decoration: none; text-transform: uppercase; margin: 2px auto; letter-spacing: normal; } a.nav1:hover { background-color: #555; color: white; letter-spacing: 2px; transition: 1s; } </style>

Style 2

Linkity Linkity Linkity

Linkity Linkity Linkity

<style> /* link style by kassandra @ s0nshine.net */ a.nav2 { display: block; background-color: #ccc; border-radius: 8px; border-left: 8px solid #888; border-right: 8px solid #888; color: #555; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 10px; font-weight: normal; text-align: center; text-decoration: none; text-transform: uppercase; line-height: 12px; margin: 2px auto; } a.nav2:hover { border-left: 8px solid #ccc; border-right: 8px solid #ccc; background-color: #888; color: white; } </style>

Style 3

Linkity Linkity Linkity

Linkity Linkity Linkity

<style> /* link style by kassandra @ s0nshine.net */ a.nav3 { display: block; background-color: #ccc; border-left: 4px solid #888; border-right: 4px solid #888; color: #555; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 8px; font-weight: normal; text-align: center; text-decoration: none; text-transform: uppercase; margin: 2px auto; } a.nav3:hover { border-left: 4px solid #ccc; border-right: 4px solid #ccc; background-color: #888; color: white; } </style>