Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*グラデーション下線*/
- h2.underline {
- position: relative;
- display: block;
- padding: 0.2em 0;
- }
- h2.underline::before {
- position: absolute;
- bottom: 0;
- display: block;
- width: 100%;
- height: 4px;
- background: #8ec5fc;
- background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
- content: "";
- }
- /*カラフル下線*/
- h2.underline-colorful {
- position: relative;
- display: block;
- padding: 0.2em 0;
- }
- h2.underline-colorful::before {
- position: absolute;
- bottom: 0;
- display: block;
- width: 100%;
- height: 4px;
- background: linear-gradient(to right, rgb(190, 255, 209) 0%,rgb(181, 253, 202) 33%,rgb(255, 145, 137) 33%,rgb(252, 188, 165) 66%,rgb(174, 220, 255) 66%,rgb(155, 211, 255) 100%);
- background-color: #a3e9ff;
- content: "";
- }
- /*丸アイコン*/
- h2.circle {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.2em;
- }
- h2.circle::before {
- position: absolute;
- top: 0.5em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- border-radius: 50%;
- background: #35bdcc;
- content: "";
- }
- /*丸アイコン2個*/
- h2.circle-two {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.2em;
- }
- h2.circle-two::before {
- position: absolute;
- top: 0.6em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- border-radius: 50%;
- background: #70e2ef;
- box-shadow: 0.4em -0.4em 0 -1px #ffcdcd;
- content: "";
- }
- /*四角アイコン*/
- h2.square {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.2em;
- }
- h2.square::before {
- position: absolute;
- top: 0.5em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- background: #9dcdff;
- content: "";
- }
- /*四角アイコン2個横並び*/
- h2.square-two-side {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 2em;
- }
- h2.square-two-side::before {
- position: absolute;
- top: 0.46em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- background: #9dcdff;
- box-shadow: 1em 0 0 #ffcdcd;
- content: "";
- }
- /*四角アイコン2個縦並び*/
- h2.square-two-length {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1em;
- }
- h2.square-two-length::before {
- position: absolute;
- top: 0.2em;
- left: 0;
- display: block;
- width: 0.6em;
- height: 0.6em;
- background: #9dcdff;
- box-shadow: 0 0.7em 0 #ffcdcd;
- content: "";
- }
- /*四角アイコン4個*/
- h2.square-four {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.4em;
- }
- h2.square-four::before {
- position: absolute;
- top: 0.3em;
- left: 0;
- display: block;
- width: 0.5em;
- height: 0.5em;
- background: #ffa3a3;
- box-shadow: 0 0.6em 0 #93e099, 0.6em 0 0 #8adaf9, 0.6em 0.6em 0 #efc378;
- content: "";
- }
- /*ひし形アイコン*/
- h2.diamond {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.2em;
- }
- h2.diamond::before {
- position: absolute;
- top: 0.5em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- background: #5ea6c3;
- content: "";
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- /*ひし形2個アイコン*/
- h2.diamond-two {
- position: relative;
- display: block;
- padding: 0.2em 0 0.2em 1.5em;
- }
- h2.diamond-two::before {
- position: absolute;
- top: 0.5em;
- left: 0;
- display: block;
- width: 0.8em;
- height: 0.8em;
- background: #5ea6c3;
- box-shadow: 0.4em 0.4em 0 -0.1em #ff9c4f;
- content: "";
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement