I have a div that has a transparent black so that the actual background color still shows but darkened. Inside this div I have a div with text.
So when added the text to my div I realized it had 2 "scrollable" sections, one for the div with the content and another one for the background div which has 100% width.
The end result should just be one scroll that goes through the page's height and reaches the footer.
Instead, right now I have to scroll inside the content div to see all the text and only when I place the mouse on the background div in the sides I'm able to reach the end of the page.
Here is the Code:
Maybe I am using the wrong elements or there is another way to get the same effect that I am trying to achieve.
*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
overflow: auto;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
overflow: auto;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{
margin-top: 16px;
}
div.content h1
{
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}
<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" class="logo" id="mainLogo"></img>
Lorem ipsum
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li><label class="mobileButton" for="hamburger" id="burguerButton">☰</label></li>
</ul>
</header>
<div>
<div class="main" id="mainContainer">
<div class="content" id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
Scrolling sections are creating by using overflow:auto in CSS. If you remove those you get a single scroll bar for the whole page. However, you will have other problems with overlapping divs that you will need to fix.
*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{
margin-top: 16px;
}
div.content h1
{
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}
<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" class="logo" id="mainLogo"></img>
Lorem ipsum
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li><label class="mobileButton" for="hamburger" id="burguerButton">☰</label></li>
</ul>
</header>
<div>
<div class="main" id="mainContainer">
<div class="content" id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
You should remove
height: 100vh;
from both div.main and div.content CSS selectors. Because defining the height of the divs is what makes the scroll bar appear.
Here is the CodeSandBox Link.
https://codesandbox.io/s/frosty-bogdan-m22tdj?file=/Style.css
Related
I'm struggling with this CSS card, I want it over the background image, but I don't know how, I already tried positioning
I accidentally placed the background image in the header, but I changed it to a div but it still doesn't work
Can someone help?
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.titel h1 {
color: white;
font-size: 70px;
}
div.ondertitel h3 {
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
.card {
position: absolute;
margin: 30px;
padding: 10px;
background: rgb(139, 119, 167);
background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<html>
<body>
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/randapparatuur.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</body>
</html>
ignore:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Class .card having position: absolute which cause the issue.
Added .main-content div with background image cover.
Example: https://codepen.io/cursorrux/pen/LYRjQqG
May be this helps you:
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg');
height: 50vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-flex;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.titel h1{
color: white;
font-size: 70px;
}
div.ondertitel h3{
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
/* div having background image */
.main-content {
background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg');
padding: 5px;
background-size: cover;
}
.card{
margin: 30px;
padding: 10px;
background: rgb(139,119,167);
background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-image">
<img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
I have quite the puzzling enterprise here.
I'm building a mouse which serves as a 'torch / searchlight'. All text (inline elements, buttons, you get the point) gets inverted from the usual white to black if there is a hover happening on it, the normal background is a yellow-ish vibe.
I currently have the following setup:
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
clip-path: circle(50% at 50% 50%);
}
.b-cursor__front {
z-index: 106;
background: white;
clip-path: circle(50% at 50% 50%);
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
(codepen)
This nearly produces the desired result, except the border-radius: 50% doesn't handle semi-nice stacking divs correctly. Pixel drama! Image for clarification:
Question: How can I remove the black border created by stacking these two elements with identical size while preserving the current effect on text?
I would simply add another element above using pseudo element to hide that small border and simplify the code by moving the container instead of each element. Also no need for the clip-path
const _$cursor = $('.b-cursor');
$(document).on('mousemove', (e) => {
_$cursor.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before {
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
/**/
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
}
.b-cursor__front {
z-index: 106;
background: white;
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="b-cursor__shadow"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
Here is anoher idea with less of code and pure JS without jQuery:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before{
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
border-radius:50%;
z-index:998;
}
/**/
.b-cursor > div {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 997;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
You can still optimize more if we consider another gradient that will replace the shadow and the border that we used to fix the black one:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
Safari doesn't support the gradient syntax with at as detailed in this question so here is another alternative:
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat;
}
.test {
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
This might work for your needs.
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html, body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p, span, a {
position: relative;
z-index: 105;
}
.b-cursor__shadow2, .b-cursor__back, .b-cursor__front, .b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 20px rgba(231, 232, 192, 1);
z-index: 107;
height: 8rem;
width: 8rem;
}
.b-cursor__shadow2 {
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
z-index: 109;
height: 8rem;
width: 8rem;
background-color: transparent;
}
/* background changes */
.b-cursor__back {
z-index: 104;
height: 8rem;
width: 8rem;
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
background-size: 100% 100%;
background-position: 50% 50%;
}
.b-cursor__back:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #18173e;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
.b-cursor__front {
z-index: 106;
height: 8rem;
width: 8rem;
background: white;
background: radial-gradient(circle at center, #ffffff 100%, #ffffff 25%);
background-position: 50% 50%;
mix-blend-mode: difference;
}
.b-cursor__front:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #ffffff;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae
ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales
lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="cursor_now"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
try adding
filter:blur(1.4px); /* or anywhere between 0.7px to 1.9px */
to the outer circle or inner circles. in your CSS
I'm having some trouble with an Accordion Dropdown snippet on codepen.
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide {
0% {
max-height: 0
}
100% {
max-height: 300px
}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I want to animate the dropdown's expansion. I want it to start from the top of the container. Now, it starts from the end of the padding. Doesn't look nice. I've delayed the animation 1s so you can tell what I mean
Here's a link to my pen: https://codepen.io/b3u/pen/RBbeWy. Thanks in advance!
Transition instead of animation, in this case, as it is simpler.
didn't touch the animation code, just created the transition effect.
Transition on max-height will not use GPU processing so be aware of possible performance issues on mobile devices (or old computers)
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i< other.length ; i++){
other[i].style.display = "none";
}
item.style.display = "block";
}
*{
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0}
100% {max-height: 300px}
}
p {
display: block;
max-height: 0;
overflow:hidden;
padding: 0;
transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 0.5s ease-out,padding 0.5s ease-out;
background-color: #E5FB8B;
color: #444;
text-align: justify;
position: relative;
z-index: 0;
box-sizing:border-box;
}
p.active{
padding: 2em 1em 1em 1em;
max-height: 1000px;
transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
-webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover{
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
Below an updated version of your code, the change was adding reset for padding at the top and bottom at the beginning of the animation. Hope this help.
All the best!
function togglePara(n, m) {
var para = document.getElementById(m + '-para' + n);
para.classList.toggle('active');
}
function showModule(m) {
debugger;
var item = document.getElementById(m);
var other = document.getElementsByClassName('dropdown');
for (var i = 0; i < other.length; i++) {
other[i].style.display = "none";
}
item.style.display = "block";
}
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
}
main {
background-color: salmon;
overflow: auto;
padding-top: 100px;
height: 100vh;
width: 100vw;
}
#accordion {
display: none;
}
.dropdown {
width: auto;
margin: auto;
padding: 2em;
}
section {
margin: auto;
width: 70%;
overflow: hidden;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #4673AD;
background-color: #eee;
padding: 1em 0;
position: relative;
z-index: 1;
}
a:hover {
color: #eee;
background-color: #4673AD;
transition: .5s;
}
#keyframes slide{
0% {max-height: 0; padding-top: 0; padding-bottom: 0}
100% {max-height: 300px}
}
p {
display: none;
height: -400px;
padding: 0;
}
.active {
display: block;
background-color: #E5FB8B;
color: #444;
text-align: justify;
padding: 1em;
padding-top: 2em;
position: relative;
z-index: 0;
height: -400px;
animation: slide 1s 1s;
}
nav {
display: none;
}
nav section p {
test-align: center;
}
.buttons {
display: flex;
width: 70%;
margin: 1em auto;
}
.button {
padding: 1em;
border: 2px solid #E5FB8B;
background-color: #E5FB8B;
color: #333;
border-radius: 8px;
width: 40%;
margin: 1em;
}
a.button:hover {
border: 2px solid #4673AD;
color: #e5fb8b;
}
<main>
<div id="accordion" class="dropdown">
<section>
Read Me First
<p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
No, Read <i>Me</i> First
<p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
<section>
Just Read <i>Me</i>, Please
<p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
</section>
</div>
<nav id="menu" class="dropdown">
<section>
<a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
<section>
Portfolio
<p id="menu-para1">Item one</p>
<p id="menu-para2">Item Two</p>
</section>
<section>
Meet The Team
<p id="menu-para3">John Doe</p>
<p id="menu-para4">Sara Faun</p>
</section>
</nav>
<div class="buttons">
Show Accordion
Show Menu
</div>
</main>
I have a pure CSS CSS Expand/Collapse div which is based on someone else's code # here by default hidden text is collapsable but it would be better if the text expands after the click.
Anyone have suggestions on how to edit this code so that text is minimize before the click is minimized? It would be better if javascript is avoided and Wordpress compactible.
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked ~ #expand {
height: 250px;
}
#toggle:checked ~ label::before {
content: "-";
}
I think you are looking to have the image start collapsed.
All you need to do is remove the checked attribute from the input checkbox to achieve this.
Change:
<input id="toggle" type="checkbox" checked>
To:
<input id="toggle" type="checkbox">
Here is you code in a runable snippet:
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked~#expand {
height: 250px;
}
#toggle:checked~label::before {
content: "-";
}
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox">
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit
vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate
sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
Just remove checked in your input and you're good to go.
It should look like this:
<input id="toggle" type="checkbox">
It's ancient, but there are still some people who use InsaneJournal (an offshoot of Danga Interactive's LiveJournal), myself included.
I'm trying to add some very basic content organizers; specifically, CSS-only (InsaneJournal prevents the use of jQuery) tabs and a modal window. But I cannot get them to work. I've tested the code snippets in JSFiddle, and they work fine (I'll include the snippets below, too), which makes me think there is something in the pre-made layout I'm using which prevents the snippets from working as expected.
Can anyone offer any insight? The website is here and these are the snippets:
Modal Window:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<h1>Open Modal</h1>
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Window</h2>
<p>This is a modal window.</p>
</div>
</div>
CSS Tabs:
.tabs {
color: #333;
font-family: arial, sans-serif;
margin: auto;
font-size: 1em;
width: 80%;
}
.tabs ul.tab-nav {
display: table;
border-spacing: 2px;
list-style: none;
margin: 0;
padding: 0;
width: 100%
}
.tabs ul.tab-nav li {
display: table-cell;
}
.tabs ul.tab-nav li a {
padding: 10px;
background-color: #ccc;
color: #333;
display: block;
font-size: 1.214em;
font-weight: bold;
margin: 2px 0;
padding: 10px;
text-decoration: none;
}
.tabs ul.tab-nav li a:hover {
background-color: #ddd;
}
.tabs section article {
display: none;
padding: 0 5px 0 10px;
}
.tabs section:target article {
display: block;
}
<div class="tabs">
<h1>CSS-only Tabs (POC)</h1>
<ul class="tab-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<section id="option1">
<article>
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lacus vel eros maximus pharetra. Nullam mattis posuere eros, ac pellentesque felis lobortis id. Fusce sed varius mauris. Integer ut pulvinar metus. Vestibulum ?obortis non enim
quis pulvinar. Maecenas et pulvinar mi. Pellentesque gravida eleifend nisl vitae efficitur. Curabitur sit amet convallis elit, sit amet ultrices enim. Integer vitae erat sit amet mi viverra gravida.</p>
</article>
</section>
<section id="option2">
<article>
<h2>Heading 2</h2>
<p>Aenean eu mauris sagittis magna fringilla rhoncus. Mauris ornare felis at rutrum condimentum. Fusce in fermentum ipsum. Duis et dignissim orci, at venenatis urna. Etiam condimentum malesuada placerat. In sollicitudin justo fermentum velit facilisis
aliquam. Duis psuere, neque iaculis dignissim scelerisque, dolor orci vulputate dui, et pulvinar dui ante pharetra ipsum.</p>
</article>
</section>
<section id="option3">
<article>
<h2>Heading 3</h2>
<p>Duis lectus magna, tristique quis tristique ac, eleifend nec sapien. Quisque vel eros nec tortor efficitur malesuada. Suspendisse malesuada, erat eu posuere finibus, velit tellus placerat mauris, id pharetra nunc velit et nisi. Phasellus non diam
sapien. Ut tellus est, tristique sit amet arcu eget, egestas porta sapien. Sed maximus, turpis ut tempor imperdiet, sem nisi lobortis enim, vel ultrices elit turpis eu nisi. Morbi efficitur luctus justo, eget ultrices lorem luctus ac. Quisque
id augue risus. Cras sagittis dapibus sapien vehicula auctor. Nullam iaculis ipsum leo, sed ornare arcu placerat sit amet. Aenean aliquet dictum ligula non rhoncus. Duis lacinia, nisl sed porttitor scelerisque, ex ex viverra massa, sit amet ullamcorper
sem nulla sit amet urna.</p>
</article>
</section>
</div>
These are pasted directly from the code I'm using on my blog. As you can see, they operate (here, in Codepen, in jsFiddle, everywhere) as expected.
I do not see why (or what) would prevent these really very simple codes from operating as they ought to. Can anyone tell me what is going on here? Or point me in the right direction? Or even offer a means of circumventing what's going on here? I'll take any kind of help.
Thank you for your time, and I apologize if this is very simplistic. I'm not very advanced at all (as if that isn't obvious).
EDIT As pointed out by Mehravish Temkar, the div ids are not showing up in the page even after they've been entered. Does anyone know what is removing them from the code? And, for that matter (and just out of curiosity), why they would be removed?