Isometric and 3D Grid
目次
Source code from Codrops
http://tympanus.net/Development/IsometricGrids/IsometricGrids.zip
＊リンクをクリックするとダウンロードが始まりますのでご注意ください
How To Use
https://tympanus.net/codrops/2016/05/25/isometric-and-3d-grids/
Sample Website
ソースコード（Script）
Isometic ３D Grid の画像スライド
今回のホームページ制作は、広告会社のポートフォリオが整列されているのをイメージして真似して作ってみました。
マウスホバーすると、動いてくれるスクリプトが楽しいです。
コンテンツ内容も印象に残るかなと思って利用させて頂きました。
コーディングを始める際に意識したいこと
ソースコードはcodropsから無料DLできます。
ヘッダーに入るソースコード
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="IsometricGrids/Bootstrap v5.0">
<meta name="generator" content="Hugo 0.79.0">
<title>IsometricGrids / Bootstrap v5.0</title>
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-fixed/">
<!-- Isometoric -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bg-dark {
background-image: url("#")!important;
height: 100px;
padding-top: 25px !important;
padding-left: 200px;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
</head>
Bootstrapについて
グローバルメニューは、Bootstrapを使っています。
Bootstrapは、歴史のあるフレームワークですので、一度使い慣れると
とても使いやすく、応用が効きます。
なので基本だけでも勉強することで、後々すごく役に立ちます。
前回の記事が参考になるかもしれないので、貼っておきます。
最後までお読みくださりありがとうございました。
