I have a top navbar with links of different width.
Currently, whenever a link is clicked it changes its color and adds a bottom border. I want to create a line instead of the bottom border to slide from link to link whenever a new one is selected.
Any idea how I can implement such an animation?
I don't think you can achieve the effect with CSS only. Some simple scripting gonna be required. Here's a codepen and the code:
<nav>
<a>Home</a>
<a>About</a>
<a>Our Wonderfull and Usefull Products</a>
<a>Services</a>
<a>Contacts</a>
</nav>
nav{
display: flex;
align-items: center;
justify-content: center;
position: relative;
--decoration-left: 50%;
--decoration-width: 0;
}
nav a{
padding: .5em .2em;
margin: 0 1em;
cursor: pointer;
}
nav::after{
content: '';
position: absolute;
bottom: 0;
left: var(--decoration-left);
width: var(--decoration-width);
height: 4px;
background: skyblue;
transition: 300ms;
}
document.addEventListener('DOMContentLoaded',function(){
var nav = document.querySelector('nav');
nav.addEventListener('mouseover',function(event){
if( event.target.tagName == 'A' ) {
nav.style.setProperty(
'--decoration-left',
event.target.offsetLeft + 'px'
);
nav.style.setProperty(
'--decoration-width',
event.target.offsetWidth + 'px'
);
}
})
})
I really can't make out what are you saying but,
Do you mean this? :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #111;
}
a {
color: #fff;
text-decoration: none;
position: relative;
font-size: 3rem;
}
a::after {
content: "";
width: 0%;
height: 2px;
border-radius: 99px;
position: absolute;
left: 0;
bottom: 0;
background: dodgerblue;
transition: 0.3s ease;
}
a:focus::after {
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
Something
</body>
</html>
Related
I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:
div {
background-image: url('./images/castle.png'); `I removed this line`
position: absolute;
width: 100%;
height: 100%;
I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
img {
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.bg-container {
position: relative;
width: 100%;
height: 380px;
}
.bg img {
background-image: url('./images/castle.png');
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
z-index: 1;
}
.topnav a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="bg-container">
<div class="bg-img"></div>
</div>
<div class="container">
<h1>Welcome to my page</h1>
<div class="topnav">
Home
About
Contact
</div>
</div>
</body>
</html>
To set the background image you can do in different ways:
One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.
To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 1rem .8rem;
background: #333;
}
.navbar h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
.navbar a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar">
<h1>Welcome to my page</h1>
<div class="nav-links">
Home
About
Contact
</div>
</nav>
</body>
</html>
#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 140px;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.Video-Greeting {
position: relative;
width: 75%;
margin: 0 auto;
}
.Video-Greeting video {
width: 100%;
}
.Video-Greeting button {
position: absolute;
top: 30%;
left: 40%;
margin: 0 auto;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font-size: 4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Home.css" />
<title>Welcome</title>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="Video-Greeting">
<video autoplay loop muted src="image\Pexels Videos 2706078.mp4"></video>
<button>Welcome</button>
</div>
</body>
</html>
I am trying to keep my Welcome Button to be stuck on my video and to be able to scale and rescale with video as my browser get smaller or bigger, but it keeps drifting away in one direction when I resize my browser. How can I solve this? I want to make the Welcome Button Be stuck to the middle of the video and for it rescale but at the same time stuck to the video center when making the browser smaller and bigger.
Add the following to .Video-Greeting
display: flex;
justify-content: center;
align-items: center;
This will make all of it's contents <button> and <video> center perfectly vertically and horizontally.
Next, the button
z-index:1
This allows the <button> to be out of the "flow" and not interfere with the <video> and vice versa. It's like it's on a layer above everything else on the 3rd dimension.
Also, remove top and left properties from <button> as well.
#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font: 500 3.5vmin/1.2 "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 10vh;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.greeting {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 75%;
margin: 0 auto;
}
.greeting video {
width: 100%;
}
.greeting button {
position: absolute;
z-index: 1;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font: inherit;
font-size: 4rem;
}
footer {
height: 10vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Home.css" />
<title>Welcome</title>
<style>
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="greeting">
<video autoplay loop muted src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4"></video>
<button>Welcome</button>
</div>
<footer></footer>
</body>
</html>
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
I have tried to add transitions to my input forms but it doesn't work. I've read a lot of stack overflow posts but they haven't worked for me. A person said that it's because input has display: none but even after changing it, it still didn't work. I tried to be more specific when using transition but that didn't work. So I'm not sure how to fix this issue. The transition applies to the button but not to the input forms.
https://codepen.io/i-am-programming/pen/gOmydqv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<nav>
Home
About
Store
Contact Us
</nav>
<div class="container">
<h1 class="login">Log In</h1>
<input type="text" placeholder="Username" class="username info" />
<input type="password" placeholder="Password" class="pass info" />
<input type="button" class="button" value="Submit" />
</div>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
font-size: 25px;
font-family: "Montserrat", sans-serif;
}
body {
background: url("images/background.jpeg");
background-size: cover;
}
a {
text-decoration: none;
margin-right: 30px;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 8px;
transition: 0.3s ease;
}
nav {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
a:hover {
color: black;
background-color: rgba(255, 255, 255, 0.7);
}
.container {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 450px;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
}
.login {
color: white;
margin-top: 50px;
font-size: 45px;
}
input {
outline: none;
padding: 5px;
transition: 0.3s;
}
input:hover {
width: 400px;
}
.username {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.pass {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
width: 150px;
margin-top: 250px;
}
Firstly your code in text and link are different. Secondly you can't use transition on display cause it's not animatable. You cna use opacity and visibility instead of display. If we come to our question..
You want to get bigger input place when user get hover it right? So in your example your input does not has any width and when you hover it you want to get a transition. For this you need to add a width value to your input so it will know where the change began and what you want at the end. Meanwhile the time you passed is your time attribute on your transition. So
input {
height: 30px;
width: 300px;
outline: none;
transition: 0.3s;
}
input:hover {
width: 400px;
}
It will know that when user hover on it, it will grow to 400px from 300px in 0.3s. That's it. Hope you get it.
I think you are missing transition property in the input, it will be like this:
input {
height: 30px;
width: 300px;
outline: none;
transition: all 0.5s ease;
}
input:hover {
width: 500px;
}
Read more of the CSS transition
It's because you didn't specify the width of your input
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.