mask-image property is not working in Bracket - html

This code is working fine here but I'm using Bracket IDE in that the "mask-image" property is not working. Perhaps it appearing as red color so I think it's not working but the same code working on Codepen etc and Stack Overflow too with correct display.
The edge transparent is not coming as expected due to mask-image property which is not working on Bracket IDE.
nav {
max-width: 960px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
padding-left:80px;
}
nav ul li a {
padding: 18px;
font-family: "Open Sans";
text-transform:uppercase;
color: #000000;
font-size: 18px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.6);
color: rgba(0, 35, 122, 0.7);
}
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
I have attached screenshots.
This is the expected one:
This is bracket, why it displaying mask-image as red:
This is my output:


Sorry, it was live-preview error but while opening directly with any browser, it works as expected.

Related

CSS styling navigation bar with short vertical lines

As mentioned above I'm trying to get result like described in the title but for a better explanation here is my idea idea_prototype. I tried the basic css which has been provided here but my expectations are slightly different.
Current outcome: navigation bar
HTML code:
HTML <- sorry Stack is not letting me add this as a code
CSS code:
nav {
width: 1300px auto;
max-width: 1300px;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
padding: 60px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
border-width: 3px;
border-style: solid;
border-color:white;
border-radius: 10% / 100%
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 18px;
font-family: "Arial";
color: white;
font-size: 20px;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: white;
}

Its very easy, you dont even need that div with class vl, my thinking is that you put that div for the vertical line on the right, but there is no need of that, you can make that line with css property border-right
nav ul {
list-style:none;
display: flex;
padding: 10px 15px;
border-radius: 10px;
border: 1px solid #333;
}
nav ul li {width: 100%;text-align: center; }
nav ul li:not(:last-child){border-right: 1px solid #888;}
nav ul li a {text-decoration: none; color: #333;}
<nav>
<ul>
<li>
About
</li>
<li>
experience
</li>
<li>
Skills
</li>
<li>
Plans
</li>
<li>
Portafolio
</li>
<li>
Contact
</li>
</ul>
</nav>

transparent menu / css

I am working on a transparent menu for my site.This is my current code
nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
I want the menu to be transparent like this site
https://www.holeman-finch.com.
Thanks in advance

nav{
display: inline-block;
position:overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
margin-bottom:-80px
}

nav{
display: inline-block;
position: overlay;
top:0;
left:0;
width:100%;
height:80px;
padding: 10px 90px;
box-sizing: border-box;
background-color: transparent;
}

On your header element, you can use any transparent background color, for example a very light white transparent shade which will work fine as an overlay on a darker photo:
background-color: #ffffff42;
In order for your header to actually float on top of the photo behind it, add position: fixed; or position: sticky; to it, for example. The same effect can also be achieved with position: absolute; and some extra top, right and left properties.

nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}

How can I make my Dropdown text left justified?

I want to left justify my Dropdown and parent submenu text. I also want my tab text to be always right justified. How can I do this?
Here's my code:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
position: relative;
/*position of navbar right and left*/
left: auto;
float: left;
font: 12px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 4px 27px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 25px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 198px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 197px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
header {
border-top: 0px solid gold !important;
/*move header pic up and down*/
margin-top: -43px !important;
}
</style>
<header style="position: relative; top: 6px;">
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>By Author <font size="1"> ► </font>
<ul>
<li>Pir Nasir Ud Din</li>
<li>Ashfaq Ahmed</li>
<li>Wasif Ali Wasif</li>
<li>Abu Yahya</li>
</ul>
</li>
<li>Poetry Books <font size="1"> ► </font>
<ul>
<li>Allama Iqbal</li>
<li>Mir Taqi Mir</li>
<li>Mirza Ghalib</li>
<li>Faiz Ahmed Faiz</li>
<li>Ahmed Faraz</li>
<li>Mohsin Naqwi</li>
<li>Ibne Insha</li>
<li>Parveen Shakir</li>
<li>Bano Qudsia</li>
</ul>
</li>
<li>Islamic Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Authors & Scholars
<ul>
<li>Moulana Tariq Jamil</li>
<li>Pir Nasir Ud Din Shah</li>
<li>Ghulam Muhammad Dard</li>
<li>Something New</li>
<li>Our Vision</li>
</ul>
</li>
<li>Sofwares
<ul>
<li>Antivirus</li>
<li>Level 2.2</li>
<li>Registered Apps <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>
Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
<li>Who We Are</li>
</ul>
</div></header>
</!doctype>

This might help:
.sub-menu {
text-align: left;
}

how to remove space or gap between navbar and header

How can I remove the space or gap between my navbar and header?
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
float: left;
font: 13px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 8px 21.5px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 31px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 156px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 200px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>Islamic Books</li>
<li>Poetry Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Our Portfolio</li>
<li>One Dropdown
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Level 2.3</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Three Levels
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Pir Nasir Ud Din Shah <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
</ul>
</div>

Okay, I'm just going to put this here instead of in the comments as I'm guessing Faisal has fixed the issue this way.
Setting a margin-top: style to a negative number, say -10px, will move the selected element up by that amount. So adding:
margin-top: -10px;
to your #nav CSS should fix the issue - it's just a case of setting the right value.
However, without seeing all your HTML markup for the header and nav, I can't guarantee that this will work for your case.
Care to share your solution?

how can i know what is the website page made off?

Can you help me to analyze the elements of this website ?
www.hardrock.com
I want to make it similar to this.
How i can do that ? for example, the menu how i do it move when the user scrolling down ?
this is the navigation CSS code:
html, body {
height: 100%;
}
body {
background: linear-gradient( #CCCCCC, #CCCCCC 0%, #999999 25%, #666666 50%, #999999 75%, #CCCCCC 100%);
}
nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}
nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.7);
}
/* Demo credits stuff */
#import url(http://fonts.googleapis.com/css?family=Nixie+One);
h1#author {
position: fixed;
bottom: 50px;
text-align: center;
color: #30303f;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
padding: 10px 0;
font-family: "Nixie One";
text-stroke: 1px;
font-size: 30px;
text-shadow: 0 0 10px #aaaaaa;
font-family: "Roboto"
}
h1#author a {
color: #3399dd;
text-decoration: none;
}

I wouldn't just copy and paste code from someone elses work. With that said, there's probably JavaScript involved somewhere.
I would just save the web page to your desktop and take it from there. Taking bits away until you have just what you need

you can know this with help of browser Extensions , search in browser's extensions "wappalyzer"
or you can visit this site for more information wappalyzer