18 ตัวอย่าง CSS สำหรับ Headline ที่สามารถคัดลอกไปใช้ได้เลย

WEB & SEO

18 ตัวอย่าง CSS สำหรับ Headline ที่สามารถคัดลอกไปใช้ได้เลย

เพื่อน ๆ มือใหม่ที่เริ่มทำเว็บไซต์เคยงงเรื่องของ css กันไหมคะ หาข้อมูลที่ไหนก็ไม่ค่อยมี อันที่มีอยู่ก็ไม่ค่อยเข้าใจ ซึ่งปัญหานี้จะหมดไปค่ะ เพราะวันนี้เรามาแนะนำสไตล์ทั้ง 18 สไตล์ ของ CSS สำหรับ Headline (H1 ถึง H6) ซึ่งเพื่อน ๆ สามารถก็อปวางเพื่อนำไปใช้กับเว็บไซต์ของเพื่อน ๆได้เลย โดยไม่ต้องเสียเวลาจำ รวมถึงยังสามารถปรับแต่งได้ตามที่เพื่อน ๆ ต้องการค่ะ

ตัวอย่าง HTML

HTML

<h1>การออกแบบหัวข้อที่สวยงาม</h1>

ในตัวอย่างเป็น (h1) ซึ่งสามารถเปลี่ยนเป็น h2 – h6 ได้ตามความต้องการ

ตัวอย่างหัวข้อแบบง่าย ๆ และโค๊ดที่ต้องใช้

การขีดเส้นใต้

การขีดเส้นใต้

CSS

h1 {
border-bottom: solid 3px black;
}

เส้นประ + สี

เส้นประ + สี

CSS

h1 {
color: #6594e0;
border-bottom: dashed 2px #6594e0;
}

เส้นคู่

เส้นคู่

CSS

h1 {
border-bottom: double 5px #FFC778;
}

เส้นด้านบนและด้านล่าง

เส้นด้านบนและด้านล่าง

CSS

h1 {
color: #364e96;
padding: 0.5em 0;
border-top: solid 3px #364e96;
border-bottom: solid 3px #364e96;
}

เส้นด้านบนและด้านล่างระหว่างข้อความ

เพิ่มสีพื้นหลัง

เพิ่มสีพื้นหลัง

CSS

h1 {
background: #c2edff;
padding: 0.5em;
}

จากตัวอย่างนี้เป็นการใส่สืพื้นหลังเป็นสีฟ้าอ่อน ซึ่งหากไม่ชอบสีฟ้าเพื่อน ๆ สามารถเลือกสีที่ชอบได้เลยค่ะ

กรอบข้อความ

กรอบข้อความ

CSS

h1 {
color: #364e96;
padding: 0.5em;
border-radius: 0.5em;
}

จากตัวอย่างกรอบข้อความจะมีมุมโค้งมน ซึ่งทำได้ง่าย ๆ โดยการใส่ border-radius: 0.5em; เพิ่มเข้าไปค่ะ

เพิ่มสีพื้นหลัง + ขีดเส้นใต้

เพิ่มสีพื้นหลัง + ขีดเส้นใต้

CSS

h1 {
padding: 0.5em;
color: #010101;
background: #eaf3ff;
border-bottom: solid 3px #516ab6;
}

จากตัวอย่างจะเห็นได้ว่าการใส่สีพื้นหลังกับเส้นใต้ สีจะต่างกัน การทำหัวข้อในรูปแบบนี้จะทำให้ข้อความนั้น ๆ มีความน่าสนใจมากขึ้น

เส้นด้านซ้ายหรือด้านหน้าข้อความ

เส้นด้านซ้ายหรือด้านหน้าข้อความ

CSS

h1 {
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #7db4e6;
}

ส่วนใหญ่เส้นด้านซ้ายหรือหน้าข้อความดังตัวอย่างนี้ มักจะเห็นในเว็บบล็อกมากกว่าแต่ใครชอบจะเอาไปใช้ปรับแต่งเว็บตัวเอง ก็ได้เหมือนกันนะ

เส้นด้านซ้าย + สีพื้นหลัง

เส้นด้านซ้าย + สีพื้นหลัง

CSS

h1 {
padding: 0.5em;
color: #494949;
background: #fffaf4;
border-left: solid 5px #ffaf58;
}

เส้นด้านซ้ายกับสีพื้นหลัง ส่วนใหย่แล้วจะใช้สีโทนเดียวกัน เพียงแต่ว่าเส้นด้านซ้ายเราจะเน้นใช้สีเข้มกว่าเพื่อความสวยงามและโดดเด่นค่ะ

กรอบแบบมีมิติ

กรอบแบบมีมิติ

CSS

h1 {
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

จากตัวอย่างนี้จะเห็นได้ว่าสีของพื้นหลังจะอ่อนกว่าเส้นขอบ ซึ่งรูปแบบนี้จะทำให้หัวข้อดูมีมิติและสวยงามมากยิ่งขึ้น

กรอบแบบมีเงา

กรอบแบบมีเงา

CSS

h1 {
padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

หัวข้อในรูปแบบนี้ตรงกรอบจะมีเงาอยู่รอบ สวยงามมีเอกลักษณ์ไปอีกแบบ

การออกแบบให้ดูทันสมัย

สไตล์ของ Tag

สไตล์ของ Tag

CSS

h1 {
color: #505050;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
}
h1:before {
content: '●';
color: #fff;
margin-right: 8px;
}

ตัวอย่างหัวข้อแสดงให้เห็นถึงความสวยงาม น่ารัก อ่อนหวาน เหมาะมากสำหรับเว็บไซต์หรือบล็อกที่เกี่ยวข้องกับเด็ก ๆ นิทาน แถมยังสามารถปรับเปลี่ยนให้น่ารักตามสไตล์และความต้องการของเพื่อน ๆ ได้เลยค่ะ

กล่องข้อความ

กล่องข้อความ

CSS

h1 {
position: relative;
padding: 0.6em;
background: #e0edff;
}
h1:before {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: solid 15px transparent;
border-top: solid 15px #e0edff;
width: 0;
height: 0;
}

ตามตัวอย่างนี้แสดงให้เห็นว่าจะมีการใส่สีพื้นหลัง ซึ่งถ้าหากเพื่อน ๆ ต้องการให้มีมุมที่โค้งมนสามารถใช้ border-radius เพิ่มได้

สไตล์เส้นประ

สไตล์เส้นประ

CSS

h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}

การออกแบบสไตล์เส้นประก็เป็นอีกรูปแบบหนึ่งที่จะช่วยให้หัวข้อบทความของเราดูมีความโดดเด่น ซึ่งยังสามารถปรับเปลี่ยนได้ตามความต้องการเลยค่ะ

การปรับแต่งมุม + เส้นประ

การปรับแต่งมุม + เส้นประ

CSS

h1 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px #fff;
padding: 0.2em 0.5em;
color: #454545;
}
h1 :after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

การปรับแต่งมุมเพิ่มเติม ตามรูปตัวอย่างนี้ จะทำให้หัวข้อของเราดูมีสไตล์และมีความน่าสนใจมากขึ้น

สไตล์แบบริบบิ้น

สไตล์แบบริบบิ้น

CSS

h1 {
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: #fff;
}
h1 :before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

การออกแบบสไตล์แบบริบบิ้น ซึ่งส่วนใหญ่แล้วจะอยู่ทางด้านซ้ายและดูเหมือนวางไว้ด้านหลังจะทำให้หัวข้อนั้น ๆ มองดูมีมิติมากยิ่งขึ้น

เส้นใต้แบบสองสีในเส้นเดียว

เส้นใต้แบบสองสีในเส้นเดียว

CSS

h1 {
border-bottom: solid 3px skyblue;
position: relative;
}
h1 :after {
position: absolute;
content: '';
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
left: 30%;
}

ส่วนใครที่ชอบสไตล์ที่น่าดึงดูดและทันสมัยลองใช้เส้นแบบสองสีดูนะคะ เพราะจะช่วยทำให้หัวข้อของเราเป็นที่น่าสนใจและดูเท่ห์มาก ๆ เลยล่ะค่ะ

พื้นหลังแบบหัวตัด

พื้นหลังแบบหัวตัด

CSS

h1 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
font-size: 20px;
color: #fff;
margin-left: -33px;
line-height: 1.3;
z-index: -1;
}
h1:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px #fff;
border-bottom: solid 79px transparent;
z-index: -2;
}

หหัวข้อในรูปแบบนี้จะเหมาะสำหรับข้อความแค่บรรทัดเดียว เพราะถ้ามากกว่านี้จะดูไม่สวยงามค่ะ

ซึ่งจาก CSS ทั้ง 18 สไตล์ที่เรานำเสนอมาทั้งหมดนี้นะคะ คุณยังสามารถปรับเปลี่ยนรูปแบบ สี ขนาด ได้ตามความต้องการ เพื่อให้เข้ากับเว็บไชต์หรือบล็อกของคุณ การทำหัวข้อแบบปกติอาจจะดูน่าเบื่อไป แต่หากเราลองปรับเปลี่ยนนิด ๆ หน่อย ๆ เพิ่มลูกเล่นที่จะทำให้ดูสวยงาม มีสไตล์และเท่ห์เข้าไปจะช่วยดึงดูดให้ผู้อ่านใช้งานเว็บไซต์ของคุณได้นานยิ่งขึ้น ซึ่งเป็นผลดีกับการจัดอันดับของ Google ค่ะ หากใครชื่นชอบการทำ CSS  อย่าลืมคอยติดตามเรื่องราวดี ๆ อีกมากมายที่เราจะนำมาอัพเดตให้เรื่อย ๆ นะคะ

Related post

  1. Domain(โดเมน) คืออะไร พร้อมคำอธิบายง่าย ๆ เข้าใจได้แม้เป็นมือใหม่
  2. Sub domain คืออะไร ต่างกันกับ Sub directory ยังไงและ มีผลอะไรกับ SEO

    WEB & SEO

    Sub domain คืออะไร ต่างกันกับ Sub directory ยังไง…

    เคยสงสัยไหมว่าระหว่าง sub domain แ…

SNS POST

  1. 50 แคปชั่น อ่อย กวนๆ น่ารัก ๆ 2563 แคปชั่นคนโสด
  2. 60 แคปชั่นผู้ชายอกหัก 2564 แคปชั่นคนโสด เจ็บยังไงให้ยังดูเท่ห์
  3. 50 คำคมคนโสด เด็ด ๆ โดน ๆ 2563 อ่อยเบา ๆ แต่โคตรเท่ห์
  4. 70 แคปชั่นเสี่ยวเหี้ย ๆ 2564 กวน ๆ ตลก ๆ กัดเจ็บ ชีวิตต้องมีรสชาติ
  5. 50 แคปชั่นเสี่ยว เด็ด ๆ ฮา ๆ 2563 บาดลึก กินใจ
  6. 30 แคปชั่นเที่ยวทิพย์โดนๆ ออกเที่ยวจริงไม่ได้ งั้นเที่ยวทิพย์ไปเลยละกัน
  7. 50 แคปชั่นความรักกวน ๆ ฮา ๆ มีบ้าเป็นบางช่วง
  8. 50 คำคมชีวิต ให้ความหวัง สร้างกำลังใจ 2564 สำหรับคนสู้ชีวิต
  9. 30 แคปชั่นอ่อย มาใหม่ เด็ดจี๊ดโดนใจวัยรุ่น
  10. 50 คำคมผู้ชายอกหัก 2563 เจ็บ กระแทกใจ ผู้ชายก็เศร้าเป็น

Recommend

  1. 30 แคปชั่นจน ใครบ้างอยากจนทุกคนก็อยากรวย
  1. 50 คำคมวันแรงงาน คำคมให้กำลังใจคนสู้ชีวิตมาใหม่ 2563

    คำคม

    50 คำคมวันแรงงาน แคปชั่นวันแรงงาน คำคมให…
  2. คำคม

    50 คำคมเด็กเรียน ทั้งเกรียนทั้งฮา 2563 เ…
  3. 50แคปชั่นเสียใจ เศร้า ๆ ใหม่ๆ 2563

    แคปชั่น

    50แคปชั่นเสียใจ เศร้า ๆ ใหม่ๆ 2563
  4. 50 แคปชั่นวันสงกรานต์ 2564

    แคปชั่น

    50 แคปชั่นวันสงกรานต์ 2564
  5. 50 คำคมตลกๆสั้นๆลงเฟสมาแรง 2563

    คำคม

    50 คำคมตลกๆสั้นๆลงเฟสมาแรง 2563
PAGE TOP