【Javascript】JavascriptとCSSで実装。MINIMAL LIGHTBOX RESPONSIVE

MINIMAL LIGHTBOX RESPONSIVEはjQueryを使用せず、JavascriptとCSSで実装されたレスポンシブライトボックス

CSS

<style>
@import 'https://fonts.googleapis.com/css?family=Abel';
body {
margin: 0;
font-family: 'Abel';
}
#header  {
width: 100%;
height: 200px;
background-color: #333;
text-align: center;
font-size: 20px;
color: #FFF;
line-height: 65px;
text-transform: uppercase;
}
#header span {
font-size: 14px;
}
@media(max-width: 520px) {
#header span {
font-size: 8px;
}
}
#image {
width: 100%;
text-align: center;
}
#image img {
height: auto;
width: 320px;
margin: 40px 0px;
}
#usage {
width: 100%;
text-align: center;
}
#usage pre {
padding: 3px;
}
#usage h3 {
text-transform: uppercase;
}
#usage h3 span {
color: blue;
font-size: 12px;
}
@media(max-width: 530px) {
#usage pre {
font-size: 10px;
}
}
@media(max-width: 400px) {
#usage pre {
font-size: 8px;
}
}
.download {
display: inline;
padding: 10px;
font-size: 10px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 1);
margin: 0px 2px;
}
.download:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#header a {
color: #FFF;
text-decoration: none;
}
#header a:visited {
color: #FFF;
}
</style>

JS

<script type="text/javascript" src="minimal.lightbox.js"></script>

HTML

<img minimal-lightbox src="img/factory.jpg"/>
 
minimal-lightbox

【Javascript】JavascriptとCSSで実装。MINIMAL LIGHTBOX RESPONSIVE

  • LATEST
  • RELATED
  • POPULAR