Better looking CSS custom styles (title h1 h2 h3)

Better looking CSS custom styles (title h1 h2 h3)

Rendering

Commonly used styles in Blog Garden

/*Title h1 h2 h3 style*/
#content {
    color: black;
    font: 0.875em/1.5em"Microsoft YaHei", "PTSans", "Arial", sans-serif;
    font-size: 16px;
}
#content h1 {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#content h2 {
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 15px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#content h3 {
    background: #5B9600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"Microsoft YaHei", "Songti", "HeiTi", Arial;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    line-height: 20px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

Button Style

CSS

/*Recommend/Dislike button*/
#div_digg {
    position:fixed;
    bottom:10px;
    width:140px;
    right:390px;
    border:2px solid #6FA833;
    padding:10px;
    background-color:#fff;
    border-radius:5px 5px 5px 5px !important;
    box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

The above is the details of the more beautiful CSS custom styles (title h1 h2 h3). For more information about CSS custom h2 h3 styles, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  A brief discussion on several situations where adding indexes to MySQL does not take effect

>>:  html a link tag title attribute line break mouse hover prompt content line break effect

Recommend

Share 13 excellent web wireframe design and production tools

When you start working on a project, it’s importa...

How to quickly query 10 million records in Mysql

Table of contents Normal paging query How to opti...

Basic usage of @Font-face and how to make it compatible with all browsers

@Font-face basic introduction: @font-face is a CSS...

In-depth explanation of Set and WeakSet collections in ES6

Table of contents Set is a special collection who...

Implementation of LNMP for separate deployment of Docker containers

1. Environmental Preparation The IP address of ea...

Causes and solutions for slow MySQL query speed and poor performance

1. What affects database query speed? 1.1 Four fa...

Use simple jQuery + CSS to create a custom a tag title tooltip

Introduction Use simple jQuery+CSS to create a cus...

Implementation of css transform page turning animation record

Page turning problem scenario B and C are on the ...

Detailed explanation of Nginx static file service configuration and optimization

Root directory and index file The root directive ...

How to configure tomcat server for eclipse and IDEA

tomcat server configuration When everyone is lear...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

Comprehensive understanding of html.css overflow

Comprehensive understanding of html.css overflow ...