長期サイト運用はエックスサーバー チェックする

Isometric3DGridとBootstropの相性

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 3D Grid の画像スライド

今回のホームページ制作は、広告会社のポートフォリオが整列されているのをイメージして真似して作ってみました。

マウスホバーすると、動いてくれるスクリプトが楽しいです。

コンテンツ内容も印象に残るかなと思って利用させて頂きました。

コーディングを始める際に意識したいこと

ソースコードはcodropsから無料DLできます。

ソースコードは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は、歴史のあるフレームワークですので、一度使い慣れると

とても使いやすく、応用が効きます。

なので基本だけでも勉強することで、後々すごく役に立ちます。

前回の記事が参考になるかもしれないので、貼っておきます。

最後までお読みくださりありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebDeveloper | フロントエンドエンジニア、元グラフィックデザイナーです。

目次