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
See Moreソースコード（Script）
Isometic ３D Grid の画像スライド
今回のホームページ制作は、広告会社のポートフォリオが整列されているのをイメージして真似して作ってみました。
マウスホバーすると、動いてくれるスクリプトが楽しいです。
コンテンツ内容も印象に残るかなと思って利用させて頂きました。
コーディングを始める際に意識したいこと
ソースコードはcodropsから無料DLできます。
Computer
SourceCode
Database
バックアップデータ
ヘッダーに入るソースコード
<!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は、歴史のあるフレームワークですので、一度使い慣れると
とても使いやすく、応用が効きます。
なので基本だけでも勉強することで、後々すごく役に立ちます。
前回の記事が参考になるかもしれないので、貼っておきます。
WordPressのライバル!?Bootstrapで簡単に…最後までお読みくださりありがとうございました。
