{"id":53118,"date":"2021-08-30T03:01:42","date_gmt":"2021-08-29T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53118"},"modified":"2021-08-29T16:42:48","modified_gmt":"2021-08-29T06:42:48","slug":"landing-page-navigation-bar-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-navigation-bar-styling-tutorial\/","title":{"rendered":"Landing Page Navigation Bar Styling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Landing Page Navigation Bar Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive\/nbcss.gif\" title=\"Landing Page Navigation Bar Styling Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Landing Page Navigation Bar Styling Tutorial<\/p><\/div>\n<p>Back to Landing Page work, in the same realms as the recent <a title='Responsive Web Design Primer Tutorial' href='#rwdpt'>Responsive Web Design Primer Tutorial<\/a> today we&#8217;re presenting a styling (ie. CSS) tutorial making the navigation bars of this series of seven webpages more impactive.<\/p>\n<p>We thanks ideas from all of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Building a Magical 3D Button' href='https:\/\/www.joshwcomeau.com\/animation\/3d-button\/'>Building a Magical 3D Button<\/a> gives us a vibrant red colour and border radius slightly 3D button look to an underlying :active colour coded &#8220;a&#8221; link<\/li>\n<li><a target=_blank title='CSS Gradients' href='https:\/\/www.w3schools.com\/css\/css3_gradients.asp'>CSS Gradients<\/a>&#8216;s &#8220;Rainbow Background&#8221; linear gradient &#8220;segmented&#8221; background colour interest<\/li>\n<li><a target=_blank title='CSS text-shadow Property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_text-shadow.asp'>CSS text-shadow Property<\/a> for a subtle way to push the text that little bit &#8220;aka 3D&#8221; in front of these button looks<\/li>\n<\/ul>\n<p> &#8230; the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/responsive\/nbcss.gif\" title=\"Tutorial picture\">working of which<\/a> involves tweaks among &#8230;<\/p>\n<ul>\n<li>web browser web inspector<\/li>\n<li>ssh session fgrep methods to find relevant software files to amend<\/li>\n<li>web browser &#8220;Surfing the Web&#8221; research and development into the CSS ideas above<\/li>\n<li>ssh session vi editor editing up at the RJM Programming domain web server (staying in session via &#8220;:w&#8221; saves between tweaks) &#8230; combined with &#8230;<\/li>\n<li>web browser displays of what has just been tweaked above<\/li>\n<\/ul>\n<p> &#8230; ending up with <font color=blue>(7x)<\/font> HTML webpage changes as per &#8230;<\/p>\n<p><code><br \/>\nnew NavBar('widget0', 'Scripts\/Widgets\/Navbar', 'Scripts\/Widgets\/SharedResources', '.', {\"current-page-GUID\": \"0854C781-B121-4668-971D-FFD42D1E2770\", \"path-to-root\": \"\", \"isCollectionPage\": \"NO\", \"navbar-css\": \".navbar {\\n\\tfont-family: 'Helvetica Neue', Arial, sans-serif;\\n\\tfont-size: .8em;\\n\\tcolor: #666666;\\n\\tline-height: 30px;\\n\\tborder-bottom: 0px solid #ccc;\\n}\\n\\n.navbar-bg {\\n\\ttext-align: right;}\\n\\n.navbar-bg ul {\\n\\tlist-style: none;\\n\\tmargin: 0px;\\n\\tpadding: 0px;\\n}\\n\\n\\nli {\\n\\tlist-style-type: none;\\n\\tdisplay: inline;\\n\\tpadding: 0px 5px 0px 0px;\\n}\\n\\n\\nli a {\\n\\ttext-decoration: none;\\n\\tpadding: 10px;\\n\\tcolor: #666666;\\n\\tfont-weight: bold;\\n}\\n\\nli a:visited {\\n\\ttext-decoration: none;\\n\\tpadding: 10px;\\n\\tcolor: #666666;\\n\\tfont-weight: bold;\\n}\\n\\nli a:hover\\r{\\r\\n \\tcolor: #999999;\\n\\ttext-decoration: none;\\r}\\n\\n\\nli.current-page a\\r{\\r\\t color: #66ABC5;\\n\\ttext-decoration: none;<font color=blue>\\n\\tbackground: linear-gradient(to right, hsl(340deg 100% 32%), orange,yellow,green,blue,indigo,violet);\\n\\ttext-shadow: 2px 2px #777777;\\n\\tborder-radius: 12px;\\n\\tborder: none;\\n\\tpadding: 7;\\n\\tcursor: pointer;\\n\\toutline-offset: 4px;<\/font>\\r}\"});<br \/>\n<\/code><\/p>\n<p>Naturally, it&#8217;s debatable whether you prefer these changes to our &#8220;series of 7&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\" title=\"Click picture\">Landing Page<\/a> webpage set, aesthetically.  Even if you do not, bear in mind with web design, you still need ways to grab the user&#8217;s attention to remain on your webpage.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-navigation-bar-styling-tutorial\/'>Landing Page Navigation Bar Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rwdpt'>Previous relevant <a target=_blank title='Responsive Web Design Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-primer-tutorial\/'>Responsive Web Design Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Responsive Web Design Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/responsive\/earlydays.gif\" title=\"Responsive Web Design Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Web Design Primer Tutorial<\/p><\/div>\n<p>Today we wanted to tip our toes into the vast subject of <a target=_blank title='' href='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'>&#8220;responsive web design&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Responsive_web_design'><p>\nResponsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]\n<\/p><\/blockquote>\n<p> &#8230; coming at it from the idea <a target=_blank title='Can a responsive shell webpage host a non-responsive iframe?' href='https:\/\/www.google.com\/search?q=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=can+a+responsive+shell+webpage+host+a+non-responsive+iframe&#038;aqs=chrome..69i57.19412j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>&#8220;Can a responsive shell webpage host a non-responsive iframe?&#8221;<\/a><\/p>\n<p>In turn this got us to the <a target=_blank title='Excellent ideas, thanks' href='https:\/\/stackoverflow.com\/questions\/30595948\/is-it-possible-to-load-a-responsive-iframe-within-a-non-responsive-site'>excellent ideas of this webpage<\/a> which we&#8217;ll try out for a while &#8230;<\/p>\n<ul>\n<li>honing in on our &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages &#8230;<\/li>\n<li>honing in on iPhone sized devices (ie. not iPads nor laptops) &#8230;<\/li>\n<li>host web browser address bar calls of &#8220;Landing Page and friends&#8221; set of unresponsively designed webpages within a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html_GETME\" title=\"caller.html\">caller.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/responsive\/caller.html\">responsively web designed shell<\/a> supervisory webpage and start using some of that &#8230;<br \/>\n<table>\n<tr>\n<th>Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au\/index.htm'><\/iframe>\n<\/td>\n<tr>\n<tr>\n<th>Responsive Shell around Unresponsive Landing Page<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe style='width:100%;height:800px;' src='\/\/www.rjmprogramming.com.au'><\/iframe>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; as food for <font size=1>(your)<\/font> thought &#8230;<\/p>\n<p><code><br \/>\n   function bodonl() {<br \/>\n     var wasih=document.body.innerHTML;<br \/>\n     var huhd=document.getElementById('Container').getBoundingClientRect();<br \/>\n     var pb=0;<br \/>\n     if (eval('' + huhd.height) &gt; eval('' + huhd.width)) {<br \/>\n     isportrait=true;<br \/>\n     pb=eval(eval('' + huhd.width) \/ eval('' + huhd.height) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-right:' + pb + '%; position:relative; display:block; height: 100vh;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     \/\/document.getElementById('myvis').setAttribute('initial-scale','0.5');<br \/>\n     \/\/}<br \/>\n     } else {<br \/>\n     isportrait=false;<br \/>\n     pb=eval(eval('' + huhd.height) \/ eval('' + huhd.width) * 100.0);<br \/>\n     nowih='&lt;div id=\"Container\" style=\"padding-bottom:' + pb + '%; position:relative; display:block; width: 100%;\"&gt;&lt;iframe' + wasih.split('&lt;iframe')[1].split('&lt;\/div&gt;')[0].replace('\" frameborder', fname + '\" style=\"position:absolute; top:0; left: 0;\" frameborder') + '&lt;\/div&gt;';<br \/>\n     }<br \/>\n     document.body.innerHTML=nowih;<br \/>\n   }<br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d53069' onclick='var dv=document.getElementById(\"d53069\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/design\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53069' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d53118' onclick='var dv=document.getElementById(\"d53118\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53118' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Back to Landing Page work, in the same realms as the recent Responsive Web Design Primer Tutorial today we&#8217;re presenting a styling (ie. CSS) tutorial making the navigation bars of this series of seven webpages more impactive. We thanks ideas &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-navigation-bar-styling-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[2419,126,1798,174,224,281,318,417,576,3743,680,2020,3742,997,1209,1212,1255,2567,1319,3744,1368,1404,2099,1418],"class_list":["post-53118","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-aesthetics","tag-background","tag-border-radius","tag-button","tag-colour","tag-css","tag-design","tag-fgrep","tag-html","tag-impact","tag-landing-page","tag-linear-gradient","tag-navigation-bar","tag-programming","tag-style","tag-styling","tag-text-editor","tag-text-shadow","tag-tutorial","tag-tweak","tag-vi","tag-web-browser","tag-web-inspector","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53118"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=53118"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53118\/revisions"}],"predecessor-version":[{"id":53123,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53118\/revisions\/53123"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}