Develop Reference

How can I make pseudo-element background align with parent's background?

I have this simple container, and generated some vertical stripes to use as background.
export default function App() {
return <div className="container"></div>;
}
.container {
height: 200px;
width: 100%;
background-image: linear-gradient(
45deg,
#000000 12.5%,
#ffffff 12.5%,
#ffffff 50%,
#000000 50%,
#000000 62.5%,
#ffffff 62.5%,
#ffffff 100%
);
background-size: 11.31px 11.31px;
position: relative;
}
I want to create a pointer (arrow), that is positioned at the top, or bottom, but that has the same background as the parent. And no matter which value I give to left or right, it should have the stripes aligned with the parent's.
Right now, I have this code for the pseudo-element.
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
left: 27px;
}
But as you can see in the Sandbox below, the stripes are not aligned correctly of the .container, I mean, they do not come as "continuation" of the said background. Is there a possible trick I can make it part of the same background?
Sandbox link: https://codesandbox.io/s/hopeful-browser-tnt8zq
Here's also a picture for reference.
https://i.imgur.com/D3VbYAa.png
The stripes should blend like this, no matter where the arrow is positioned horizontally.
https://i.imgur.com/kb0uQTK.png

Use This code
.container {
height: 200px;
width: 100%;
background-image: linear-gradient(
45deg,
#000000 12.5%,
#ffffff 12.5%,
#ffffff 50%,
#000000 50%,
#000000 62.5%,
#ffffff 62.5%,
#ffffff 100%
);
background-size: 11.31px 11.31px;
position: relative;
}
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
left: 48%;
top:50%;
}

You can make things quite flexible, easy to change, by using CSS variables.
This snippet scraps the pseudo element, makes the container a bit bigger and cuts out the shape required. The way you are assured of getting the correctly aligned background.
Set the width, height and distance along the left of the pointy bit as you require in those CSS variables.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.container {
--aH: 25px;
/* height of the arrow */
--aW: 25px;
/* width of the arrow */
--aL: 27px;
/* distance along the top of the start of the arrow */
--h: 200px;
/* height of container */
height: calc(var(--h) + var(--aH));
width: 100%;
background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%);
background-size: 11.31px 11.31px;
position: relative;
clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%);
}
<div class="container"></div>
UPDATE: there is a requirement to have the container height fixed by its content, not a px value. This snippet is as above except the background image and its associated clip path is put onto the container's before pseudo element. That way it can pick up the height of the container and add further height to accommodate the arrow.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.container {
--aH: 25px;
/* height of the arrow */
--aW: 25px;
/* width of the arrow */
--aL: 27px;
/* distance along the top of the start of the arrow */
position: relative;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
--h: 100%;
/* height of container */
height: calc(var(--h) + var(--aH));
width: 100%;
transform: translateY(calc(-1 * var(--aH)));
background-color: pink;
background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%);
background-size: 11.31px 11.31px;
clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%);
z-index: -1;
}
<div class="container">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>

We can play with clip-path values and position left values to get the desire outcome.
please try with below code.
.container::after {
content: "";
position: absolute;
bottom: 100%;
background-image: inherit;
background-size: inherit;
width: 25px;
height: 25px;
clip-path: polygon(40% 0%, 0% 100%, 100% 95%);
left: 20px;
}

Linear gradient above img tag css

I have a card and images are fetched from BE. The image is a background image of a card. The text goes above this image. I need to add a gradient above the image and below text. Also when user hovers over the card, gradient color should change. How do I make the image to fill the entire card and show linear-gradient on an image?
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<img class="background" src="../scr/images/image.png">
<h2> Title
<h2>
</li>
</ul>

// enter code here
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
display:inline-block;
}
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<div class="pickgradient">
<img src="https://i.imgur.com/5I0iHYf.jpg" />
</div>
<h2> Title dfdf
</h2>
</li>
</ul>

try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: auto;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background: #000;
background-size: cover;
width: 100%;
height: auto;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" />
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>

Here is a solution, try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<div class="c-graidient__img"></div>
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>

Resize Scrolling Div to browser height

My scrolling div wont stretch the height of its parent container when resizing the browser or when toggling a button that adds an extra space on the top.
AUG 27 UPDATE
http://jsfiddle.net/ursp39s9/
The following jfiddle contains a code by ctwheels that has been modified to fit my needs, and as a result I've discovered the issue has to do with a show/hide button filter (Code provided below)
This button adds an extra space at the bottom when the button is pressed, and then dissapears when it's pressed again. However, this seems to be causing issues with the resizeable scrolling div container thats suppose to stretch to 100% height and width to fill the entire parent container. Instead I get a whitespace at the bottom all the time.
So please take a look at my jsfiddle, and see if you can help me fix this issue. Thanks!
Here's the problematic HTML:
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> </label>
<br /><br />
<div class="borderline"></div>
<section class="filtercontent">
</section><!--Filtercontent ends here-->
And the CSS:
/*----- Show me Button-----*/
.filtercontent {
margin: 0;border-bottom:#000 solid 1px;
padding: 0; height:170px; margin-top:5px;
-webkit-box-sizing: border-box; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#000;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.feedpagetab > section:first-of-type {
float: right;
width: 62.5%;
}
.feedpagetab > section:last-of-type {
display: none;
visibility: hidden;
}
.feedpagetab {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#filterbutton[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="filterbutton"] {
position: absolute;
top:4px;
padding: 0;
left: 5%;
width: 80px;
text-align: center;
padding: 4px; font-weight:bold;
color: #555;
text-shadow: 1px 1px 1px #DDD;
font-family: Helvetica, Arial, "Sans Serif";
font-size: 13px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
-moz-box-shadow: inset 0px 0px 1px 0px #FFF;
box-shadow: inset 0px 0px 1px 0px #FFF;
background: #EEE;
background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#DDD));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#DDD',GradientType=0 );
background: linear-gradient(top, #F9F9F9 0%,#DDD 100%);
}
[for="filterbutton"]:hover {
color: #444444;font-weight:bold;
border-color: #BBB;
background: #CCC;
background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#CCC));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#CCC',GradientType=0 );
}
[for="filterbutton"] span.filterswitch:last-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked {color:#FFA317;}
#filterbutton[type=checkbox]:checked ~ .filtercontent {
display: block;
visibility: visible;
width: 100%;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:first-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:last-of-type { color:#3CC;
display: block;
visibility: visible;
}
.borderline { width:100%; border-bottom:#000 solid 1px; height:0px;}
.filtercontent { margin-left:29%; }

How to make the slider move right and left alternatively

The slider i have is moving from to left side automatically and once it reaches it moves the first slider and then it repeats.
All i wanted to do is to make the slider right to left and then to left to right alternatively.
How can i do this ?
Here is my Fiddle.
Here is the css
#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
As i don't have any idea in javascript i am not able to have any steps.

Your current animation keyframes:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
it goes from 0 to -100% to -200% .. -300% and than back to 0.
you can change it to something like this:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: 0 }
75%, 95% { left: -100% }
}
here it will just got back and forth between 0 and -100%.
Show more than 2 slides:
Add classes to your slides to be able to hide and show them and created these keyframes to do so:
#-webkit-keyframes slider1 {
0%, 20%, 100% { opacity: 1; display: block; visibility: visible; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider2 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 1; display: block; visibility: visible; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider3 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 1; display: block; visibility: visible; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider4 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 1; display: block; visibility: visible; }
}
now you just need to position slide 3 where 1 is and 4 where 2 is, since you have a fixed width i just used position: relative; and add the animation keyframes (don't forget the other prefixes)
#slideshow .slide_1 {
-webkit-animation: slider1 32s infinite;
}
#slideshow .slide_2 {
-webkit-animation: slider2 32s infinite;
}
#slideshow .slide_3 {
position: relative;
left: -1280px;
-webkit-animation: slider3 32s infinite;
}
#slideshow .slide_4 {
position: relative;
left: -1280px;
-webkit-animation: slider4 32s infinite;
}
the finished Fiddle

Retriggering an animation

Good day! I am trying to implement a progress bar which, when a button is clicked will be filled by some amount. I found this to be quite useful as a base:
http://css-tricks.com/css3-progress-bars/
The way to increase how much the bar is filed is to modify the width: property of the span element, which is basically 1 line of javascript:
document.getElementById("this").style.width = "35%";
The problem is that although it will work, the fill animation will not be triggered. I searched here for people with simular problems and I found this:How do I re-trigger a WebKit CSS animation via JavaScript?
Which offered some solutions which I tried to implement in the code. None of them seem to work so I decided to make a new thread. The entire source code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tt1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
.meter {
width:15%;
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
padding: 10px;
}
.meter > span {
display: block;
height: 100%;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
</head>
<body>
<div id="aa" class="meter">
<span id="this" style="width: 15%"></span>
</div>
<button onclick="asd()">asd</button>
</body>
</html>
<script>
function asd() {
document.getElementById("this").style.width = "35%";
document.getElementById("aa").style.animationName = "";
document.getElementById("aa").style.animationName = "move 2s";
document.getElementById("aa").style.webkitAnimationName = "";
document.getElementById("aa").style.webkitAnimation = "move 2s linear infinite";
}
//k
$(".meter > span").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
</script>

I added -webkit-transition:all 0.5s; to the .meter > span:after, .animate > span > span and it seems to work fine.
http://jsfiddle.net/VjHWr/

Have you tried with
this.style.width = "35%";