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>
Related
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>
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>
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 want multiple div in same line with overflow option.
.col-xs-3 a{height:100px;background:pink;display:block;margin-top:10px;padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12">
<div class="col-xs-3"><a>content1</a></div>
<div class="col-xs-3"><a>content2</a></div>
<div class="col-xs-3"><a>content3</a></div>
<div class="col-xs-3"><a>content4</a></div>
<div class="col-xs-3"><a>content5</a></div>
<div class="col-xs-3"><a>content6</a></div>
</div>
You need to add white-space: nowrap along with making the elements to be inline. Add some width to make the overflow confined to the current element:
.col-xs-12 {
white-space: nowrap !important;
max-width: 100%;
overflow: auto;
}
.col-xs-3 {
float: none !important;
display: inline-block !important;
}
.col-xs-3 a {
height: 100px;
background: pink;
display: block;
margin-top: 10px;
padding: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12">
<div class="col-xs-3"><a>content1</a></div>
<div class="col-xs-3"><a>content2</a></div>
<div class="col-xs-3"><a>content3</a></div>
<div class="col-xs-3"><a>content4</a></div>
<div class="col-xs-3"><a>content5</a></div>
<div class="col-xs-3"><a>content6</a></div>
</div>
I am playing with Flexbox for the first time and I wonder why doesn't the property align-items: flex-end work with justify-content: center. I tried changing as well to other values rather than flex-end but still nothing would move around the cross axis.
Here is my HTML/CSS Code. What am I doing wrong?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Playing with CSS Flexbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
<nav id="logo">
<p class="logotext">Welcome There!!</p>
</nav>
-->
<main id="container">
<section class="box red-box">
<!--
<img src="images/Chilli-medium.jpg" alt="chilli" class="first-image">
-->
</section>
<section class="box green-box">
</section>
<section class="box blue-box">
</section>
<section class="box violet-box">
</section>
<section class="box black-box">
</section>
<section class="box yellow-box">
</section>
<section class="box grey-box">
</body>
</html>
body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: white;
}
#container {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-end;
}
.box {
padding: 50px;
box-sizing: border-box;
height: 50vh;
width: 5vw;
}
.red-box {
background-color: indianred;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
.violet-box {
background-color: rebeccapurple;
}
.black-box {
background-color: black;
}
.yellow-box {
background-color: yellow;
}
.grey-box {
background-color: grey;
}