私はWebデザインに少し新しく、これはあまりにも簡単な質問や間違ったサイトである場合には謝ります。私は静的なブログでデザインを単純化するためにブートストラップ4を使用していますが、この時点ではほとんどデザインに満足していますが、ナビバーがどのようにフラットに見え、バックグラウンドで動作するのが気に入らないのです。私は視覚的にはっきりしているが、デザインにあまり複雑さを増すことなく、 "ポップ"にする方法についていくつかのアイデアを探しています。私は、色を微調整し、グラデーションを追加し、ボトムシャドウを追加しようとしましたが、見栄えの良いものを思いつくことができませんでした。おそらく、私は3つすべての組み合わせを探しています。私はそれを認識するのに十分なほど熟練していません。ここで暗い崩壊ナビバーを視覚的に区別する
は、サイトの現在の開発版のスクリーンショットです： 
そして、現在の生産サイトへのリンク、ナビゲーションバーが同じである： http://acwolff.xyz/
これはどのようにポップアウトしますか？
あなたのニーズに合わせてナビバーのCSSを調整するだけです。ここで私が使用したものです：
.navbar{
filter: drop-shadow(8px 8px 10px black);
background: linear-gradient(to top left, #7d7e7d 0%,gray 8%,#0e0e0e 100%);
}
.navbar-toggler{
transition:all 0.5s ease-in-out;
}
.navbar-toggler:hover{
background:#333333;
}
.navbar{
filter: drop-shadow(8px 8px 10px black);
background: linear-gradient(to top left, #7d7e7d 0%,gray 8%,#0e0e0e 100%);
}
.navbar-toggler{
transition:all 0.5s ease-in-out;
}
.navbar-toggler:hover{
background:#333333;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wolff Blogg</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="http://acwolff.xyz/static/favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Custom style -->
<link rel="stylesheet" href="http://acwolff.xyz/static/main.css" type="text/css" />
<!-- RSS Feed -->
<link href="http://acwolff.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Wolff Blogg Atom Feed" />
</head>
<body>
<!-- Navbar -->
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4 navdiv">
<ul class="navbar-nav">
<h4>
<a class="navbar-brand" href="http://acwolff.xyz/index.html">Wolff Blogg</a>
</h4>
<li class="nav-item">
<a class="nav-link" href="http://acwolff.xyz/archives.html">
Archives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://acwolff.xyz/categories.html">
Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://acwolff.xyz/pages/about.html">
About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://acwolff.xyz/pages/projects.html">
Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://acwolff.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Wolff Blogg Atom Feed">
Atom Feed</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<!-- Begin page content -->
<div class="container rounded mt-4 mb-4 p-4">
<header>
<h2>
<a href="http://acwolff.xyz/posts/gamedev/2017/understanding-delta-time.html" rel="bookmark" title="Permalink to Understanding Delta Time (in Godot)">
Understanding Delta Time (in Godot)</a>
</h2>
<div class="card border-0">
<div class="card-body">
<p class="card-text">
By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 27 Jul 2017<br /> Modified: 29 Nov 2017<br /> Category: <a href="http://acwolff.xyz/category/gamedev.html">GameDev</a><br /> Tags:
<a href="http://acwolff.xyz/tag/programming.html">programming, </a>
<a href="http://acwolff.xyz/tag/godot.html">godot, </a>
<a href="http://acwolff.xyz/tag/game-development.html">game development</a>
</p>
</div>
</div>
</header>
<article>
<p>The Godot docs don’t cover delta in any great detail and maybe they shouldn’t, but understanding delta time is important in game programming since it helps your game gain framerate independence. If you don’t already know, tying
game logic and physics to framerate is easy but gives you undesired behavior like setting hard limits on what frame rate your game can run at, causing collision bugs if you do try to get your game running at higher framerates, or movement/actions
speeding up and slowing down with framerate. All of these create a terrible user experience, especially on PCs and modern consoles where 60+ fps is the norm. In Godot, you’ll mostly see delta when passing it in as a parameter to the _process
overrideable functions, like so: </p>
<div class="highlight">
<pre><span></span>func _ready():
set_process(true)
func _process(delta):
# do something every frame
func _fixed_process(delta):
# do something every physics frame
</pre>
</div>
<p>Delta is the time in seconds since the last frame. Since games normally run at at least 30fps and usually 60fps, that means this will be a <code>float</code> type showing milliseconds, and it will <strong><span class="caps">NOT</span></strong> be
constant since frame latency varies widely. It will look like this: 0.017, 0.020, 0.01, etc. </p>
<p>To take advantage of delta time, all you have to do is normalize it. If you want an action to happen 60 times per second, it’s a simples as action_speed * delta! Here’s an examples pulled straight from the Godot docs:</p>
<div class="highlight">
<pre><span></span># Code trimmed by ellipses to just show the key bits
...
# Initial direction of the ball
var direction = Vector2(1.0, 0.0)
# Constant for pad speed (in pixels/second)
const INITIAL_BALL_SPEED = 80
# Speed of the ball (also in pixels/second)
var ball_speed = INITIAL_BALL_SPEED
...
func _process(delta):
var ball_pos = get_node("ball").get_position()
...
ball_pos += direction * ball_speed * delta
</pre>
</div>
<p>Assuming our ball is moving in a straight horizontal line from the origin (the top left corner) at it’s initial speed and with a delta of .20 (50fps), this means our will move at a rate of Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .02)
= Vector2(1.6, 0.0) or 1.6 pixels to the right every frame. But what if the framerate is higher? Let’s try 100fps: Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .01) = Vector2(16.0, 0.0) or 0.8 pixels to the right every frame. What about
25 fps? Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .04) = Vector2(3.2, 0.0) or 3.2 pixels to the right every frame. Pretty simple concept once you lay it out!</p>
<p>As a note, physics should usually not be tied to delta time since the calculations require much more precise timing. Godot handles this already, so it’s not something you need to worry about unless you start changing physics speed in the project settings.</p>
<p><span class="caps">P.S.</span>- If you don’t remember vectors, they’re also super important in game programming. Check out MAth for Game Developers on YouTube.</p>
<h4>References</h4>
<ul>
<li><a href="https://www.youtube.com/watch?v=Q9FZllr6-wY&list=PLW3Zl3wyJwWOpdhYedlD-yCB7WQoHf-My&index=1">Math for Game Developers</a></li>
<li><a href="http://docs.godotengine.org/en/latest/learning/step_by_step/scripting_continued.html?highlight=delta">Godot Docs - Scripting (continued)</a></li>
<li><a href="http://docs.godotengine.org/en/latest/classes/class_node.html?highlight=delta#class-node-process">Godot Docs - Node Class</a></li>
<li><a href="https://www.scirra.com/tutorials/67/delta-time-and-framerate-independence">Delta-time and framerate independence in Construct 2</a></li>
<li><a href="https://youtu.be/c4b9lCfSDQM">Math for Game Developers - Jumping and Gravity</a></li>
<li><a href="https://www.vg247.com/2015/05/08/dark-souls-2-durability-bug-now-fixed/">Dark Souls 2 Durability Bug</a></li>
<li><a href="https://www.youtube.com/watch?v=33VRCGh2uQM">Lockpicking at 600+fps</a></li>
<li><a href="https://www.youtube.com/watch?v=r4EHjFkVw-s">Fallout 4 Game Speed Tied to Framerate</a></li>
</ul>
</article>
<a href="http://acwolff.xyz/posts/gamedev/2017/understanding-delta-time.html">
<button class="btn btn-secondary btn-lg btn-block mt-4">
Click through to article for comments.
</button>
</a>
</div>
<div class="container rounded mt-4 mb-4 p-4">
<header>
<h2>
<a href="http://acwolff.xyz/posts/python/2017/python-class-development-toolkit.html" rel="bookmark" title="Permalink to Python’s Class Development Toolkit">
Python’s Class Development Toolkit</a>
</h2>
<div class="card border-0">
<div class="card-body">
<p class="card-text">
By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 26 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags:
<a href="http://acwolff.xyz/tag/programming.html">programming, </a>
<a href="http://acwolff.xyz/tag/python.html">python, </a>
<a href="http://acwolff.xyz/tag/notes.html">notes, </a>
<a href="http://acwolff.xyz/tag/code.html">code</a>
</p>
</div>
</div>
</header>
<article>
<p>Based on the <a href="https://www.youtube.com/watch?v=HTLu2DFOdTg">PyCon talk by Raymond Hettinger</a>. These is a good tutorial on building Python classes.</p>
<p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p>
</article>
<a href="http://acwolff.xyz/posts/python/2017/python-class-development-toolkit.html">
<button class="btn btn-secondary btn-lg btn-block mt-4">
Click through to article for comments.
</button>
</a>
</div>
<div class="container rounded mt-4 mb-4 p-4">
<header>
<h2>
<a href="http://acwolff.xyz/posts/python/2017/beautiful-idiomatic-python.html" rel="bookmark" title="Permalink to Beautiful, Idiomatic Python">
Beautiful, Idiomatic Python</a>
</h2>
<div class="card border-0">
<div class="card-body">
<p class="card-text">
By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 26 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags:
<a href="http://acwolff.xyz/tag/programming.html">programming, </a>
<a href="http://acwolff.xyz/tag/python.html">python, </a>
<a href="http://acwolff.xyz/tag/notes.html">notes, </a>
<a href="http://acwolff.xyz/tag/code.html">code</a>
</p>
</div>
</div>
</header>
<article>
<p>Based on the <a href="http://www.youtube.com/watch?feature=player_embedded&v=OSGv2VnC0go">PyCon talk by Raymond Hettinger</a>. These are examples of ways to improve your Python code, at all levels.</p>
<p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p>
</article>
<a href="http://acwolff.xyz/posts/python/2017/beautiful-idiomatic-python.html">
<button class="btn btn-secondary btn-lg btn-block mt-4">
Click through to article for comments.
</button>
</a>
</div>
<div class="container rounded mt-4 mb-4 p-4">
<header>
<h2>
<a href="http://acwolff.xyz/posts/python/2017/better-looping-in-python.html" rel="bookmark" title="Permalink to Better Looping in Python">
Better Looping in Python</a>
</h2>
<div class="card border-0">
<div class="card-body">
<p class="card-text">
By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 25 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags:
<a href="http://acwolff.xyz/tag/programming.html">programming, </a>
<a href="http://acwolff.xyz/tag/python.html">python, </a>
<a href="http://acwolff.xyz/tag/notes.html">notes, </a>
<a href="http://acwolff.xyz/tag/code.html">code</a>
</p>
</div>
</div>
</header>
<article>
<p>Based on the <a href="https://www.youtube.com/watch?v=EnSu9hHGq5o">PyCon talk by Ned Batchelder</a>. These are examples of better ways to iterate in Python. </p>
<p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p>
</article>
<a href="http://acwolff.xyz/posts/python/2017/better-looping-in-python.html">
<button class="btn btn-secondary btn-lg btn-block mt-4">
Click through to article for comments.
</button>
</a>
</div>
<div class="container rounded mt-4 mb-4 p-4">
<header>
<h2>
<a href="http://acwolff.xyz/posts/short-stories/2017/the-question.html" rel="bookmark" title="Permalink to The Question">
The Question</a>
</h2>
<div class="card border-0">
<div class="card-body">
<p class="card-text">
By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 25 Jan 2017<br /> Category: <a href="http://acwolff.xyz/category/short-stories.html">Short Stories</a><br />
</p>
</div>
</div>
</header>
<article>
<p>This isn’t a particularly good story, just me trying some things out. Feedback welcome.</p>
<h4 class="text-center">I</h4>
<p><em>Today was the day</em> he said to himself, for what felt like the hundredth time. He was grinding his teeth, enough to make his jaw sore. He turned the wheel of the car and pulled on to the street. He briefly considered driving past, thinking
of any excuse he could give for his absence. Nothing came to mind so he gave up and slowly pulled in the driveway as planned, stopping in front of the house. He killed the engine and collected his thoughts. What was he going to say? He had spent
days planning it out but now that it was finally time nothing seemed quite right. He opened the door and stepped outside. He didn’t bother locking it. The walk to the front door may as well have been a million miles. He walked slowly and never
seemed to get any closer. The door opened and a woman came out to greet him. They embraced warmly, and he cheered up at the familiarity of the situation. They sat down in the living room and talked as they usually do. As the night carried on he
became his usual self again. She asked if he would like a drink. The night grew darker and colder as they shared glass after glass together by the fire. The record player softly played their favorites. After a while he began to grow serious, and
knew that now was the time. He called her name and let out everything he had been holding in all. When he was done, she too grew serious. As the situation fully dawned on her, she became cold and angry. She replied to him and expressed her shock
and anger. He too was now shocked and hurt by her response. Both were now deeply offended by the others actions. The conversation was increasing in speed and volume, betraying their emotions. After a few minutes of this the man could take it no
longer. He grabbed his coat and left, slamming the door behind him. He got back in to his waiting car and drove off quickly. She watched him leave and fumed for a while but as she picked up after them she was began to cry a little. She took a
long bath and went to bed.</p>
<h4 class="text-center"><span class="caps">II</span></h4>
<p>The young woman angrily walked up the stairs. Her mother shouted behind her to not come back down until she had found what had been asked. She groaned at the thought of the task she had been given and how she’d rather be doing almost anything else.
After a quick search she found the most likely candidate, an old safe deposit box labeled “Karen’s important papers”. It probably hadn’t been opened since it was filled and labeled before being moved who knows how many houses ago. She took half
the papers out and placed them to the side, then began leafing through them. One piece of paper fell out from the stack, it was much smaller than any others and looked to have a few small water spots on it. When she looked closer she noticed it
wasn’t one paper but two newspaper articles cut out and glued to a single piece of paper. One was an obituary for a man who had gotten in to a car accident. It was determined to be drunk driving. The second was a classified ad. It read: “One diamond
engagement ring, never worn.”</p>
</article>
<a href="http://acwolff.xyz/posts/short-stories/2017/the-question.html">
<button class="btn btn-secondary btn-lg btn-block mt-4">
Click through to article for comments.
</button>
</a>
</div>
<footer class="footer">
<p class="text-center text-white">
Copyright 2017 Alexander Wolff.<br /> For legal/licensing info please see the <a href="http://acwolff.xyz/pages/about.html">About</a> page.<br /> This site is powered by <a href="http://docs.getpelican.com/en/stable/">Pelican</a>, <a href="https://pages.github.com/">Github Pages</a>,
<a href="https://disqus.com/">Disqus</a>, and <a href="http://getbootstrap.com/">Bootstrap</a>.
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Google Analytics/Disqus scripts -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-29261422-6");
pageTracker._trackPageview();
} catch (err) {}
</script>
<script type="text/javascript">
var disqus_shortname = 'acwolff-xyz';
(function() {
var s = document.createElement('script');
s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</body>
</html>まず第一に、このウェブサイトhttps://coolors.co/が提供しますあなたのウェブサイトの色を強調するのに使うことができる素晴らしい色の模擬図です。
色を変更する場合は、ナビバーの色を間違いなく変更できます。あなたはブーツストラップがあなたに与えるカラースキームに決して固執していません（https://v4-alpha.getbootstrap.com/components/navbar/#color-schemes）。
「.navbar」クラスを使用して好きな背景色を使用するように、外部のCSSファイルを変更するだけです。例：https://github.com/abishr12/portfolio-website/blob/master/assets/css/style.css
効果は私のtatsesのために少しあまりにも極端であるが、これは正しい軌道に乗って間違いなく、私は自分でそれを少し微調整します。ありがとうございました！ –