I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:
Demo on CodePen
The essence of this demo is:
HTML:
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
The CSS looks like this:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...
Many thanks
You can try something like this:
Idea
Add mouseover event on main container.
In this handler, have a variable that will hold classname that is to be added.
On hover:
Get all sections.
Check the bounds of current section with icon's bound.
If top of icon is greater than top of section, update the className variable
If not, break the loop.
Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.
Sample: Updated CodePen
var iconContainer = document.querySelector('.at-about-fab');
iconContainer.addEventListener('mouseover', function () {
var bounds = this.getBoundingClientRect();
var sections = document.querySelectorAll('.section');
var className = '';
Array.from(sections).some(function(el) {
var currentBounds = el.getBoundingClientRect();
if(bounds.top > currentBounds.top) {
className = el.getAttribute('id');
}
else {
return true;
}
});
this.classList.remove('section1', 'section2', 'section3', 'section4');
this.classList.add(className);
})
It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design
Summary has been done in the comments to the CSS.
.at-about-fab {
z-index: 999999;
position: fixed;
/*Dropped the right to hide the text block a little more - you can ignore*/
right: 0px;
bottom: 20px;
/*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
background-color: white;
padding: 5px 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
/*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
color: #999;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
/* Just for the sake of testing */
.content{
position:relative;
}
#wrapper
{
position:relative;
}
.section
{
width: 100%;
text-align:center;
padding:250px 0;
border:1px solid #666;
}
#section1
{
background: #fff;
}
#section2
{
background: #000;
color:#fff;
}
#section3
{
background: #444444;
}
#section4
{
background: #BA2322;
}
Codepen Demo
You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.at-about-fab:hover {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
.at-about-fab__meta p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
/* Just for the sake of testing */
.content {
position: relative;
}
#wrapper {
position: relative;
}
.section {
width: 100%;
text-align: center;
padding: 250px 0;
border: 1px solid #666;
position: relative;
color: black;
}
.section:after {
content: attr(data-content);
position: absolute;
width: 100%;
height: auto;
text-align: center;
top: 50%;
left: 0;
mix-blend-mode: exclusion;
color: white;
}
#section1 {
background: #fff;
}
#section2 {
background: #000;
}
#section3 {
background: #444444;
}
#section4 {
background: #BA2322;
}
<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
<!-- Just for the sake of testing -->
<div class="content">
<div id="wrapper">
<div class="section" id="section1" data-content="section1"></div>
<div class="section" id="section2" data-content="section2"></div>
<div class="section" id="section3" data-content="section3"></div>
<div class="section" id="section4" data-content="section4"></div>
</div>
</div>
Here is also a link to the updated codepen with SCSS.
Related
I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?
var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");
btn.addEventListener("click", function() {
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
});
.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 150%;
color: #ffffff;
}
.feedback-title {
position: fixed;
bottom: 10rem;
right: 12.5rem;
height: 5rem;
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
visibility: hidden;
}
<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
</button>
I'm not even sure whether my approach here is correct.
Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.
* {
margin: 0;
padding: 0;
}
.button-wrapper {
position: relative;
display: inline-block;
margin: 50px;
cursor: pointer;
}
.button-helper {
white-space: nowrap;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
transform: translate3d(0, -50%, 0);
transition: .5s ease;
}
.button {
padding: 10px 30px;
}
.button-wrapper:hover .button-helper {
transform: translate3d(calc(100% + 15px), -50%, 0);
}
<button class="button-wrapper" type="button">
<p class="button-helper">Button info label</p>
<div class="button">
button text
</div>
</button>
Here is how could do it only with CSS and HTML:
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
.help_button {
display:block;
box-sizing:border-box;
position: relative;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
color: #ffffff;
}
.feedback-title {
position: absolute;
right:2.3rem;
top:0;
height: 100%
transform:translate(-5px, -5px);
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
z-index:-1;
opacity:0;
transition : .5s ease;
width:12rem;
}
.help_button:hover .feedback-title {
opacity:1;
}
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
<span id="title" class="feedback-title">Feedback from</span>
</button>
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)
You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>
Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>
I made a navigation bar with CSS animation and javascript. But I could not make it responsive. I want the navigation bar animation to be none when the window is resized less than 700px and the animation should appear if it is greater than 700px.That means the transform property of three-d-box :hover on css paart must be hidden when window is resized to 700px.The navigation bar code is below;
$('.block-menu').find('a').each(function(){
var el = $(this),
elText = el.text();
el.addClass("three-d");
el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});
.container {
width: match-parent;
padding: 12px ;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: #fc0;
text-decoration:none;
}
.block-menu {
width:fit-content;
height:fit-content;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
font-family: 'Righteous', cursive;
overflow: visible;
width:fit-content;
height: fit-content;
font-size: 1.6vw;
padding: 15px 10px;
margin-left:auto;
margin-right:auto;
margin-top:1px;
margin-bottom:1px;
}
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all 0.3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius:15%;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
.back {
background: #d05ce8;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div id="navbox">
<div class="container" id="navbar">
<ul class="block-menu"><b>
<li >Gifts Corner</li>
<li >Our activities</li>
<li >Inspiration</li>
<li >Education</li>
<li >About us</li>
</ul></b>
</div>