タグ作品展 - タグの部屋

作品数:12341 コメント数:223897

ジャンル

匿名 04/30 02:47 編集 削除 無題 (Comment 0)
#navTgl:checked ~ .contents {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
/* :::::: toggle button :::::: */
#navTgl {
display: none;
overflow: hidden;
}
label {
cursor: pointer;
position: fixed;
top: 0;
left: 0;
}
.open {
z-index: 2;
width: 50px;
height: 50px;
color: white;
background-color: lightSeaGreen;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-transition: background-color .6s, -webkit-transform .6s;
transition: background-color .6s, transform .6s;
}
#navTgl:checked + .open {
background-color: indianRed;
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.close {
pointer-events: none;
z-index: 1;
width: 100%;
height: 100%;
transition: background-color .6s;
}
#navTgl:checked ~ .close {
pointer-events: auto;
background-color: rgba(0,0,0,.3);
}
/* :::::: drawer menu :::::: */
.menu {
z-index: 1;
position: fixed;
overflow: auto;
top: 0;
left: 0;
width: 250px;
height: 100%;
padding: 10px;
background-color: rgba(0,0,0,.6);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
}
#navTgl:checked ~ .menu {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu h2,
.menu li a {
color: white;
}
.menu h2 {
text-align: center;
}
.menu ul,
header nav ul {
padding: 0;
}
.menu li {
border-bottom: 1px solid rgba(255,255,255,.6);
font-size: .8em;
line-height: 1.4;
}
.menu li:first-child {
border-top: 1px solid rgba(255,255,255,.6);
}
.menu li a,
header nav li a {
display: block;
padding: 1em 2em;
text-decoration: none;
transition: background-color .6s;
}
.menu li a:hover {
background-color: black;
}

/* :::::: header, footer :::::: */
header,
footer,
.menu {
box-sizing: border-box;
}