틀:뱃지그룹: 두 판 사이의 차이
편집 요약 없음 |
(css작성) |
||
| 1번째 줄: | 1번째 줄: | ||
<includeonly><onlyinclude>{{#css: | <includeonly><onlyinclude>{{#css: | ||
#template-badges-output{ | |||
margin-top:8px; | |||
} | |||
.template-badge{ | .template-badge{ | ||
float:right; | float:right; | ||
width:60px; | width:60px; | ||
height:60px; | height:60px; | ||
cursor:pointer | cursor:pointer; | ||
outline-width: 2px; | |||
outline-style: solid; | |||
border: 4px solid #fff; | |||
position:relative; | |||
border-radius:8px; | |||
} | |||
.template-badge .image{ | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
border-radius: 8px; | |||
} | |||
.template-badge .tooltip, .template-badge .descript{ | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all 0.3s ease-in-out; | |||
} | } | ||
.template-badge:hover .tooltip{ | .template-badge:hover .tooltip{ | ||
position:absolute; | position: absolute; | ||
right:0; | right: 0; | ||
bottom:0; | bottom: 0; | ||
background:#000; | background: #000; | ||
opacity:0.8; | opacity: 0.8; | ||
visibility: visible; | |||
color: #fff; | |||
width: 400%; | |||
padding: 4px; | |||
font-size: 0.7rem; | |||
transform: translateY(calc(100% + 8px)); | |||
} | } | ||
| 21번째 줄: | 49번째 줄: | ||
background:#fff; | background:#fff; | ||
border:1px solid #ddd; | border:1px solid #ddd; | ||
} | } | ||
}}<div class='template-badges'>{{{1|}}}</div></onlyinclude></includeonly> | }}<div class='template-badges'>{{{1|}}}</div></onlyinclude></includeonly> | ||
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. | 파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. | ||
2023년 8월 18일 (금) 23:29 판
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.