new to HTML and CSS, tried to look for answer but can't seem to find it. Unto the question.
The first code is my style.css the second code is for index.html
h1 {
background-image: url('linkto/images/transparent.png');
background-repeat: repeat;
font-family: "Amarillo";
color: red;
text-align: center;
}
<div id="homeSection" class="sect sectOne"></div>
<h1>Title of Web</h1>
<section class="parallax">
<div id="servicesSection" class="parallax-inner"></div>
</section>
Now, If I had linked a a JPEG filed (instead of PNG), the H1 ("Title of Web") would show as red and the background is the JPEG file, however, I try to put a 50px by 50px transparent image (PNG) it doesn't work and the background just becomes white (default background, my guess).
So I want the text to be red (or whatever color) but the background of it being transparent, am I on the right track or am I doing this all wrong?
A transparent background means it will blend with the background of its container (which I assume in your case is the <body> tag). The default background of the web page is white, so the heading is going to appear on a white background, unless you change the background of the entire web page
Use color to transperant to bg , RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
like you need black transperant background
h1 {
background: rgba(255, 255, 255, 0.2);
color: red;
font-family: "Amarillo";
left: 0;
position: absolute;
right: 0;
text-align: center;
}
search the rgb colors and set opacity what ever you need to the last value
The <h1> tag should not have any background by default. If you see a white background despite of changes, there's something else adding it.
Regardless, you can try to use background: none in your CSS
Edit: Snippet updated based on what you provided. Now works as far as can see, still needs more work on your end.
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: "Amarillo";
src: url('http://kesnielgalvan.atspace.cc/fonts/Amarillo.ttf');
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0px;
}
html,
body {
height: 100%;
}
nav {
position: fixed;
height: 5%;
width: 100%;
z-index: 100%;
text-align: center;
background: rgba(232, 235, 255, 0.09);
padding: 15px;
font-family: fantasy;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
h1 {
font-family: "Amarillo";
color: red;
text-align: center;
}
.h1alt {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo1.jpg");
}
.link {
transition: 0.8s;
color: #ffffff;
font-size: 20px;
text-decoration: none;
padding: 0 10px;
margin: 0 10px;
}
.link:hover {
background-color: #ffffff;
color: #EEA200;
padding: 24px 10px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subSection {
height: 50%;
background-color: rgb(103, 141, 172);
}
.parallax {
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/973/full/tileable-dark-wood-textures-5.jpg") repeat fixed 100%;
}
.parallax-inner {
padding-top: 12%;
padding-bottom: 12%;
}
.sectOne {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo1.jpg");
}
.sectTwo {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo2.jpg");
}
<head>
<meta charset="utf-8" />
<title>Kesniel Galvan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a class="link" id="home" href="#homeSection">About</a>
<a class="link" id="services" href="#servicesSection">Services</a>
<a class="link" id="gallery" href="#gallerySection">Gallery</a>
<a class="link" id="contact" href="#contactSection">Contact</a>
</nav>
<div id="homeSection" class="sect sectOne"></div>
<h1 class="h1alt">Kesniel Galvan</h1>
<section class="parallax">
<div id="servicesSection" class="parallax-inner"></div>
</section>
<div id="gallerySection" class="sect sectTwo"></div>
<div id="contactSection" class="subSection"></div>
</body>
Related
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
I am trying to get the Texas icon directly centered between the span and h1 element.
Here is the Screen Capture
I tried googling but I think I might be phrasing what I need poorly. Is it that I have to adjust the padding and margin in css? I just want to move the icon down the y-axis.
Thank you
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
</div>
<h1>Austin</h1>
.main-header {
padding-top: 170px;
height: 850px;
background: linear-gradient(lightblue, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('https://media.giphy.com/media/3ohs7I9ho0H4dfeP7y/giphy.gif') no-repeat center;
background-size: cover;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200px;
padding-bottom: 10px;
}
h1 {
font-size: 12.5rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: capitalize;
font-weight: normal;
text-align: center;
line-height: 1.3;
margin: 12px 0px 0px;
}
I think text-align:center is enough in your case, then simply play with margin of elements to create the spaces :
header {
background: blue;
text-align: center;
color: #fff;
max-height: 380px;
padding: 50px 25px 0px;
}
.title {
margin: 5px 0;
font-size: 1.3rem;
border: none;
display: inline-block;
}
h1 {
margin: 10px 0;
font-size: 5rem;
line-height: 1.1;
}
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0">
</div>
<h1>Austin</h1>
</header>
Thank you for the support. Unfortunately, none of the solutions worked but I decided just to change the line height of the h1 element and was able to get the result I wanted. I learned so many new things from the responses to my question. Again, thank you.
Updated Screen Capture
so i am trying to get an overlay to work on my website, i've been watching a tutorial, but now i have gotten to a point where i don't know what i'm doing wrong.
<head>
<link rel="stylesheet" href="css/venues.css">
</head>
<section class="alt-section">
<h2> Places we've played.</h2>
<div class="thumb-container">
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Bar 42</strong>
<div class="zoom-icon">
</div>
</div>
</a>
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>The Prince Albert</strong>
<div class="zoom-icon">
</div>
</div>
</a>
</div>
</section>
and the css is..
.alt-section{
background-color: #e6e6e6;
margin: 0 auto;
}
.alt-section h2{
padding:50px;
color: #e1c184;
font-family: Spliffs;
text-align: center;
font-size: 35;
}
.alt-section a{
font-family: sans-serif;
padding:10px;
font-size: 18px;
text-decoration: none;
color: #cd9732;
}
.alt-section a:hover{
color: #e1c184;
}
.thumb-container{
max-width: 960px;
margin: 0px auto;
padding-bottom: 100px;
overflow: hidden;
}
.thumb-unit{
display:block;
width: 150px;
float:left;
position: relative;
height: 150px;
background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.thumb-overlay{
position:absolute;
top:100%;
left:0px;
right:0px;
bottom:null;
height:100%;
background:rgba(205,151,50,0.5);
}
.thumb-overlay:hover{
position:absolute;
top:0%;
left:0px;
right:0px;
bottom:null;
background:rgba(205,151,50,0.5);
transition: linear;
transition-duration: 0.5s;
}
The youtube video has got me up to a point where they have completed it but i am still stuck on this. https://www.youtube.com/watch?v=ygvo1_kqVUg
So my actuall problem is to do with the size of a hitbox on an anchor tag i cant seem to increase the size so when i hover over it the overlay will pop up.
I have turned the overflow back to visible so you can see my problem, but when i scroll over the photo the overlay will not pop up its only when i hover over the writing will it then come up.
#element-with-background-image {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
So I have a navigation menu. nav.png is empty space and nav1.png nav2.png nav3.png nav4.png are actual buttons like home,about us, etc.
I have the following code:
#navigation_bar {
display: table;
margin: 0 auto;
}
.menu_btn {
display: table-cell;
}
.menu_btn img {
height: 90%;
}
<div id="navigation_bar">
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/wxDQj.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/Fwmkn.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/qRpbK.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/GksMc.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
</div>
With the above code I get this
As you see the menu ISN'T centered. I want the menu to be in the centre. the bar goes out of window on the right side. but on the left side it maintains a margin of few pixels...
I want it to go out of window on BOTH sides so it kind of appears as a black line throughout the page.
Also, my nav.png is a long image (width-wise).
here are the pngs
Take the background-image approach.
#navigation_bar {
background-image: url(http://i.stack.imgur.com/7q5bs.png);
background-repeat: repeat-x;
text-align:center;
}
.menu_btn {
display:inline-block;
}
.menu_btn img {
height: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GETTING STARTED WITH BRACKETS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img src="images/logo/logo.png">
</div>
<hr>
<div id="navigation_bar">
<div class="menu_btn"><img src="http://i.stack.imgur.com/wxDQj.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/Fwmkn.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/qRpbK.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/GksMc.png" /></div>
</div>
<hr>
</body>
</html>
Let's modernise!
Let's make this with pure CSS:
Background CSS gradients and no images, mirrored using pseudo elements
We can achieve this even more easily by using a linear gradient background and no images at all.
The background is created by the linear-gradient.
The font can be changed in the CSS if desired.
The text is vertically centered with the line-height: 40px (matching the height of the nav)
The text is horizontally centered with text-align: center on the nav
Using the data-* and pseudo elements, we can even provide a mirror image underneath with pure CSS.
Main benefits:
Link text is easily archived by search engines, improving SEO and link text is easily read by screen-readers
Gradient and links can easily be changed without editing images
Complete Example
CSS gradients are supported IE10 + and IE 6 - 9 are supported using a filter. Ensure that there are no gaps between the opening and closing <a>. This prevents an inline gap.
nav {
height: 40px;
background: #000;/*Non supporting browsers*/
background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /*IE6 - 9*/
line-height: 40px;
text-transform: uppercase;
text-align: center;
min-width: 620px;
position: relative;
}
nav::before {
background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}
nav a {
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border-right: solid 1px #FFF;
padding: 0 10px;
position: relative;
display: inline-block;
}
nav a:first-child {
border-left: solid 1px #FFF;
}
nav a:hover {
background: #F00;
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
}
nav a::before {
content: attr(data-mirror);
position: absolute;
top: 100%;
left: 0;
padding: 0 10px;
color: #000;
transform: scaleY(-1);
color: #FFF;
opacity: 0.2;
pointer-events: none;
}
nav a:hover::before {
background: rgba(255,255,255,0.2);
opacity: 0.5;
}
<nav>
HomeCategoriesCreateUpload
</nav>