Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 days ago.
This post was edited and submitted for review 5 days ago.
Improve this question
HTML
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
<div class="skill-card">
<header class="skill-card__header"><img class="skill-card__icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5 Logo"/></header>
<section class="skill-card__body">
<h2 class="skill-card__title">html</h2><span class="skill-card__duration">6 ans d'expérience</span>
<ul class="skill-card__knowledge">
<li>HTML5</li>
<li>Sémantique</li>
<li>SVG</li>
<li>Canvas</li>
</ul>
</section>
</div>
<div class="skill-card">
<header class="skill-card__header"><img class="skill-card__icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5 Logo"/></header>
<section class="skill-card__body">
<h2 class="skill-card__title">html</h2><span class="skill-card__duration">6 ans d'expérience</span>
<ul class="skill-card__knowledge">
<li>HTML5</li>
<li>Sémantique</li>
<li>SVG</li>
<li>Canvas</li>
</ul>
</section>
</div>
<div class="skill-card">
<header class="skill-card__header"><img class="skill-card__icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5 Logo"/></header>
<section class="skill-card__body">
<h2 class="skill-card__title">html</h2><span class="skill-card__duration">6 ans d'expérience</span>
<ul class="skill-card__knowledge">
<li>HTML5</li>
<li>Sémantique</li>
<li>SVG</li>
<li>Canvas</li>
</ul>
</section>
</div>
</div>
</body>
</html>
CSS
body, html {
background-color: #EEE;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
}
.card-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
width: 80%;
}
.skill-card {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 20px;
width: 15em;
background-color: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.skill-card:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.skill-card:hover .skill-card__header {
height: 40px;
}
.skill-card:hover .skill-card__header .skill-card__icon {
transform: translateX(-50%) translateY(-50%) scale(3);
}
.skill-card:hover .skill-card__body {
height: 170px;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li {
transform: translateX(0);
transition-timing-function: cubic-bezier(0, 1.5, 1, 1);
transition-duration: 0.5s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(1) {
transition-delay: 0.25s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(2) {
transition-delay: 0.5s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(3) {
transition-delay: 0.75s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(4) {
transition-delay: 1s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(5) {
transition-delay: 1.25s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(6) {
transition-delay: 1.5s;
}
.skill-card .skill-card__header {
position: relative;
background-color: #eb6c3f;
height: 170px;
margin: -20px -20px 20px -20px;
transition: height 0.5s;
overflow: hidden;
}
.skill-card .skill-card__header .skill-card__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
display: block;
width: 128px;
height: 128px;
transition: transform 0.5s;
}
.skill-card .skill-card__body {
height: 40px;
transition: height 0.5s;
overflow: hidden;
}
.skill-card .skill-card__body .skill-card__title {
font-size: 1.4em;
font-weight: 600;
text-transform: uppercase;
}
.skill-card .skill-card__body .skill-card__duration {
color: #9E9E9E;
font-style: italic;
}
.skill-card .skill-card__body .skill-card__knowledge {
margin-top: 10px;
color: #424242;
}
.skill-card .skill-card__body .skill-card__knowledge li {
margin-top: 5px;
transition-duration: 0;
transition-delay: 0.5s;
transform: translateX(-100%);
}
I want the skill cards to appear 3 times instead of once. In html form it does appear 3 times but as soon as I implement CSS codes, only one skill card is displayed for some reason.
I want 3 skill cards to appear horizontally will the CSS effects.
Irrelevant info: Hi there, I am new in coding. This my 35th day coding and my 1st day using stackoverflow. Why am I mentioning all these things you ask? Well that's because the above info was not enough.
Related
I need this to be placed 20px from the bottom of the page, but every time I try to give it absolute positioning, it jumps halfway outside the div or it becomes longer.
It was centered using display:flex and justify-content:center. The exact same problem occurs with the socila icons, which need to be at the top on desktop and at the bottom on mobile, but if I give them an absolute position, then they are no longer centered.
Here is the entire page for you to see what I need, and thank you so much for your time:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/234b945d49.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
}
#main-menu-container{
right:0;
}
.sidenav {
padding:0;
height: 100%;
margin:0;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
right: 0;
background: radial-gradient(#3d77a7, #264c6d);
overflow-x: hidden;
transition: 0.5s ease-in-out;
text-align: center;
}
.sidenav ul{
list-style: none;
padding: 150px 0 0 0;
text-align:center;
display: inline-block;
}
.sidenav ul a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
color:white;
font-weight:bold;
display: block;
transition: 0.3s;
}
.sidenav ul a:hover {
color: #ffdc00;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
color:#ffdc00;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* #media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
} */
#nav-icon3 {
width: 40px;
height: 30px;
position: fixed;
top:20px;
right:20px;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #ffdc00;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.social-icons {
display: flex;
justify-content: center;
position:absolute;
top: 20px;
}
.social-icons i{
color:#ffdc00;
padding:5px;
transition: 0.3s;
}
.social-icons i:hover{
color: white;
}
.menu-separator {
/* position:relative;
bottom:50px; */
border: none;
border-radius: 2px;
height: 7px !important;
opacity: 100%;
color: #ffdc00; /* old IE */
background: #ffdc00; /* Modern Browsers */
width: 80%;
margin: 20px auto 20px auto;
}
.menu-additional-links{
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
.menu-additional-links a{
text-decoration: none;
padding: 20px 15px 20px 15px;
color: white;
}
.menu-additional-links a:hover{
color: #ffdc00;
}
/*MOBILE BREAKPOINTS*/
#media only screen and (max-width: 768px) {
}
</style>
</head>
<body>
<div id="main-menu-container">
<div id="mySidenav" class="sidenav" role="navigation">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
<div class="social-icons">
<i class="fab fa-facebook-square fa-2xl"></i>
<i class="fab fa-instagram-square fa-2xl"></i>
<i class="fab fa-linkedin fa-2xl"></i>
</div>
<hr class="menu-separator">
<div class="menu-additional-links">
Datenschutzerklärung
Impressum
</div>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span class="breakpoint"></span>
</div>
<script>
//check screen width via javascript, and pass a diffrent width to the nav menu
const mediaQuery = window.matchMedia('(min-width: 768px)')
let menuWidth = "";
if (mediaQuery.matches){menuWidth = "500px";} else {menuWidth = "100vw";}
function handleScreenChange(e){
if (mediaQuery.matches){
menuWidth = "500px";
} else {
menuWidth = "100vw";
}
}
mediaQuery.addListener(handleScreenChange);
//set the width and play the animation on hamburger click
$("#nav-icon3").click(function() {
if (document.getElementById('nav-icon3').classList.contains("open")){
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
else{
document.getElementById("mySidenav").style.width = menuWidth;
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
}
document.getElementById('nav-icon3').classList.toggle("open");
});
</script>
</body>
</html>
You can try with this styles to hr
position: absolute;
bottom: 20px;
margin-left: 10%;
You have 80% for the width, so a left of 10% makes hr centered
I’m trying to make a menu open button for my website, but there’s one slight problem, when I try to assign it to move vertically, for example do margin-top: 100px it won’t move. But when I set a margin-left it changes position and moves horizontally! I have no idea as to why this is happening. I would love to get some advice on how to put the menu button a bit further downwards. I have a feeling it has something to do with the attribute being a span, but I have no idea. Any help is greatly appreciated.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
background-size: cover;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
font-size: 40px;
display: inline-block;
width: 160px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 0px;
padding-bottom: 5px;
}
.navMenu a:hover {
color: #fddb3a;
}
.navMenu .dot {
width: 6px;
height: 6px;
background: #fddb3a;
border-radius: 50%;
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot {
-webkit-transform: translateX(80px);
transform: translateX(80px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover~.dot {
-webkit-transform: translateX(240px);
transform: translateX(240px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover~.dot {
-webkit-transform: translateX(400px);
transform: translateX(400px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover~.dot {
-webkit-transform: translateX(570px);
transform: translateX(570px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
.overlay .closebtn {
position: absolute;
top: 20px;
margin-right: 20px;
right: 45px;
font-size: 120px;
}
.openNav {
font-size: 50px;
margin-left: 100px;
color: black;
}
#media screen and (max-width: 1305px) {
.dot {
display: none;
}
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<nav class="navMenu">
Home
Blog
Work
About
<div class="dot"></div>
</nav>
</div>
</div>
<span class="openNav" style="cursor: pointer;" onclick="openNav()">☰</span>
</body>
</html>
I have a feeling it has something to do with the attribute being a span
That is right, because the span is by default has display: inline, and if you change it to display: block and apply some margin-top: 100px you see it changes the position.
.openNav{
display: block;
margin-top: 100px;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am aware that the initial question is answered several times. Usually I know how to do it, so its more a bug fixing question instead of a general question. The code shows a cross which behaves as a toggle. If clicked another 3 elements appear, where the one on the middle gives me headache. I used a fontAwesome icon and can´t figure out why it will not center in this div element.
I am summon a CSS master which could solve my bug. ;)
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<style>
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width:40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before, .modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
</style>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
Add display: flex to .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) to make use of the align-items: center property.
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before,
.modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
display: flex; /* ADD THIS */
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
I'm having trouble with a button. It's a text with a background color and some padding. Basically, when I refresh the page, the button takes a bit less than a second before getting to its dimension. It starts with 0 paddings and gets to the value I set after a few moments like it was animated, but it wasn't. I didn't set any animation for it to do it. I'll leave the code here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
padding: 30px;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.80)),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
margin-bottom: 60px;
}
.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation: moveInLeft 1s ease-out;
/*animation-delay: 3s;*/
/*animation-iteration-count: 3;*/
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 17.4px;
animation: moveInRight 1s ease-out;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
display: inline-block;
border-radius: 100px;
transition: transform, box-shadow, .2s;
position: relative;
animation: moveInBottom 1s ease-out;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: tansform, opacity, .4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
This thing happens in chrome but not in firefox. I'm following a course on a very well known website and, despite the guy does exactly the same code, it doesn't seem that he has the same problem.
Thank you guys, I really appreciate what you do every day, helping us solve our problems.
Happy new year, btw
Change transition it into
transition: transform .2s, box-shadow .2s; and transition: transform .4s, opacity .4s;
This is the way to use multiple properties in transition.
transition: transform, box-shadow, .2s; this will be equivalent to
transition-property: transform, box-shadow, all;
transition-duration: 0s, 0s, 0.2s;
I was just wondering how could i add display: none and display: block to my animation with a ease effect.
HTML
<div class="floating-vociebox">
<a>New updates</a>
</div>
Any help would be appreciated
DEMO
I have tried to start from display:none;. I have three variants to add movement and fade-in by CSS3 and jQuery. Which one is more like what you need?
$( document ).ready(function(){
$('.variant-1').fadeIn( 3000 ).addClass('animate-1');
$('.variant-2').css('display','block').delay( 0 ).queue(function(){
$(this).addClass('animate-2').dequeue();
});
$('.variant-3').addClass('visible').delay( 0 ).queue(function(){
$(this).addClass('animate-2').dequeue();
});
});
.floating-vociebox {
background-color: blue;
width: 120px;
height: 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
border-radius: 4px;
position: fixed;
top: 100px;
transform: translateY(-90px);
display: none;
}
.variant-1 {
left: 10px;
transition: background-color 0.3s, transform 3s ease-in-out;
}
.variant-2 {
left: 150px;
}
.variant-3 {
left: 290px;
}
.variant-2,
.variant-3 {
opacity: 0;
transition: background-color 0.3s, opacity 3s ease-in, transform 3s ease-in-out;
}
.visible {
display: block;
}
.animate-1 {
transform: translateY(0);
}
.animate-2 {
opacity: 1;
transform: translateY(0);
}
.floating-vociebox:hover {
background-color: darkblue;
}
.floating-vociebox a {
cursor: pointer;
display: block;
text-align: center;
line-height: 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
}
<div class="floating-vociebox variant-1">
<a>Variant 1</a>
</div>
<div class="floating-vociebox variant-2">
<a>Variant 2</a>
</div>
<div class="floating-vociebox variant-3">
<a>Variant 3</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
https://jsfiddle.net/glebkema/gcg7f4pj/