When my web page loads it plays this bottom border animation, then afterwords it will display a static bottom border. The issue is, you can see from this snippet that the animated border is shorter than the static border.. How can I center this so both borders are identical at the end result? I would ideally like both borders to look like the second, longer one shown in the snippet.
I have played around with the width but can't seem to figure out what parameter needs a change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
you can add a position:relative to the container, and set its after pseudo-element’s pasition to absolute and left to 0, so that it’ll start right from the beginning of its container.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.container{
position:relative;
}
.border-bottom-animate:after {
content: "";
position:absolute;
left:0;
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The :after pseudo-element is only as wide as the content inside the padding. You need to add the size of the padding to your :after's width. Then adjust the margin to account for the greater width. Bootstrap uses calc(var(--bs-gutter-x) * .5) to define the padding-left and padding-right of a .container.
See my comments in the snippet CSS below. I minimalized the snippet but, there are only 2 lines with a change plus 2 comment lines from your code.
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
/* add the bootstrap gutter width */
width: calc(var(--bs-gutter-x) + 100%);
animation-duration: 3s;
animation-name: border-animation;
/* give a negative x margin half the gutter width */
margin: 0 calc(var(--bs-gutter-x) * -.5);
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: calc(var(--bs-gutter-x) + 100%);
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Related
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
So I have been searching to find a way to change the color of the bottom border of my navigation bar links with a linear animation starting from the bottom going upwards. I was able to find a thread with some code that I semi-understand, just a few CSS lines which has sent me in the right direction, however the colour change is animated from the top down, whereas I would like the opposite.
I am using Bootstrap if that makes any different, is there any way I can do the opposite and have the transition start from the bottom and go upwards? My code is posted below...
* {
box-sizing: border-box;
}
body {}
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: #212121 thick solid;
}
#header-nav .container {
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: purple thick solid;*/
margin: 0px;
}
/*212121*/
#header-nav a {
color: #FFF;
margin-right: 2rem;
padding: 10px;
/* border-bottom: purple thick solid; */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#header-nav a:hover {
text-decoration: none;
/* background-color: purple;*/
border-bottom: white thick solid;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<i class="fas fa-question"></i> About
<i class="fas fa-book"></i> Rules
<i class="fas fa-vote-yea"></i> Vote
<i class="fas fa-tags"></i> Store
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Use gradient for this:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px; /* control the space for the gradient */
background:
linear-gradient(currentColor,currentColor)
bottom /* make it bottom */
/100% 0px /*start at heght = 0; */
no-repeat;
transition:0.3s all;
}
a:hover {
background-size:100% 6px; /* make the height 6px*/
}
<div class="box">
a link
</div>
Another syntax where you adjust the position instead:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px;
background:
linear-gradient(currentColor,currentColor)
left 0 bottom -7px
/100% 6px
no-repeat;
transition:0.3s all;
}
a:hover {
background-position:left 0 bottom 0;
}
<div class="box">
a link
</div>
I am trying to display the dropdown menu using position absolute, but the div becomes non-clickable.
I have tried using overflow auto, white-space: nowrap, z-index: 999, pointer-events none of these worked
I want this dropdown to come as a normal logout menu overlapping on all columns and text.current state of my dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>pagedemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
.dropdown{
border-radius: 4px;
background-color: white;
width: 8.25rem;
left: 3rem;
min-height: 4rem;
color: gray;
bottom: 0rem;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.11);
overflow-x: scroll;
background-color: yellowgreen;
padding:10px;
margin-top: 10rem;
}
.dropdownOption{
width: 8.25rem;
}
.dropdownOption:hover{
cursor: pointer;
background-color: honeydew;
}
.leftNav{
background-color: white;
height: 100vh;
}
</style>
<body style="background-color: bisque;">
<div class="container">
<div class="row">
<div class="col-1, leftNav" >
<div class="dropdown">
<div class="dropdownOption">
logout
</div>
<div class="dropdownOption">
account settings
</div>
</div>
</div>
<div class="col-10" style="background-color: tomato;">
data
</div>
</div>
</div>
</body>
</html>
You should add a z-index on your .leftNav component to ensure it's in front of your main col.
Fiddle : https://jsfiddle.net/azkq2480/
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I want my 3 child divs to be stretched 100% vertically, and I want them to be next to each other horizontally. So If I resize my parent div, child divs will resize accordingly, but would always stay next to each other horizontally (each would take approximately 33% width)
So here is the CSS:
.appcontent {
position: absolute;
left: 80px;
right: 50px;
top: 30px;
max-width: 1050px;
min-height: 400px;
border: 2px solid black;
}
.box {
display: inline-block;
height: 98%;
padding: 10px;
border: 2px solid black;
}
And HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
<script src="jquery.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="appcontent">
<div class="box">
<h3>App 1</h3>
</div>
<div class="box">
<h3>App 2</h3>
</div>
<div class="box">
<h3>App 3</h3>
</div>
</div>
</body>
</html>
just in case I also put it here http://jsfiddle.net/naWsh/
I answered this question before with a comprehensive explanation Fluid design
Just in stead of 400% make it 100% and its children 33%