I am trying to create a scroll gradient at the bottom and top of my div so it is easier to see that the text is scrollable.
Right now you can see the gradient is at the top, but if I go to question_text:before and set bottom: 0; the gradient goes to the bottom of the screen instead of the bottom of the div.
The width also extends past the boundaries of the parent div (question).
What do I need to do to get an effect like this?
Scroll gradient
https://codepen.io/SquanchyHappy/pen/mdmwRyy
The above link shows my full code, but the divs I'm trying to manipulate are below:
<div id="question" class="question resize">
<div id="question_text" class="question-text">
<span>Replace this with enough text to make scrollable.</span>
</div>
</div>
.question {
grid-rows: 1/2;
position: relative;
font-size: 3vh;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.question-text {
height: 100%;
overflow: auto;
word-break: break-word;
position: relative;
}
.question-text:before {
content: "";
width: 100%;
height: 15%;
position: fixed;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
Related
I'm trying to create a round slider with the librery roundSlider.js, which has a background in the path that is multicolour. I have tried using a linear-gradient but the result is not good, because when I start moving the slider with the hadler, the background colors start to move and some disappear.
This is the code that I have:
$(document).ready(function () {
$("#shape").roundSlider({
radius: 80,
width: 8,
min: 0,
max: 100,
handleSize: "+16",
circleShape: "pie",
handleShape: "dot",
sliderType: "min-range",
startAngle: 315,
value: 24,
disabled: false
});
});
.rs-range-color {
background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
}
.rs-path-color {
/*background-color: #C2E9F7;*/
background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.rs-handle {
background-color: #C2E9F7;
padding: 7px;
border: 2px solid #C2E9F7;
}
.rs-handle.rs-focus {
border-color: #33B5E5;
}
.rs-handle:after {
border-color: #33B5E5;
background-color: #33B5E5;
}
.rs-border {
border-color: transparent;
}
.rs-tooltip-text {
font-family: Roboto, sans-serif;
font-size: 20px;
border-radius: 7px;
transition: background 0.02s ease-in-out;
color: #33B5E5;
}
.rs-tooltip-text:before {
position: absolute;
left: -10px;
top: -18px;
content: 'DISCOUNT';
font-size: 12px;
}
.rs-tooltip-text:after {
position: absolute;
left: 10px;
top: 48px;
content: '';
font-size: 12px;
}
.container{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Roboto, sans-serif;
padding: 20px;
border: 1px solid;
}
/* Solution for inner circle with shadow */
#shape:after {
content: " ";
display: block;
height: calc(100% - 40px); /* here 40 is the gap between the outer and inner circle */
width: calc(100% - 40px);
position: absolute;
top: 20px; /* divide the gap value by 2 */
left: 20px;
z-index: 9; /* tooltip z-index is 10, so we put less than that value */
border-radius: 1000px;
box-shadow: 0 0 10px -2px;
}
/* Solution for bottom triangle out issue */
#shape .rs-overlay {
height: calc(50% + 5px);
width: calc(50% + 5px);
top: -5px;
left: -5px;
border-radius: 1000px 0 0 0;
}
<!DOCTYPE html>
<html>
<head>
<title>RoundSlider - A sample testing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/round-slider#1.4.1/dist/roundslider.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/round-slider#1.4.1/dist/roundslider.min.js"></script>
</head>
<body style="padding: 10px 0 0 20px; font-family: monospace;">
<div class="container">
<div class="control">
<div id="shape"></div>
</div>
</div>
</body>
<html>
When you run the code above, you can see the background color of the path moves as I move the handler, that's the problem.
I would like the background to stay fixed.
In other words, I would like the background path as a gradient with 3 or more colors and that this background covered 100% of the slider.
I don't want the colors moving or be removed to make way for others.
In roundSlider the svgMode was available where the slider was constructed by SVG elements. So using that you can apply the SVG gradient to the range and path element. Also here these elements are single element, so you won't get this problem.
Here I have updated the demo based on your scenario, check below:
https://jsfiddle.net/soundar24/6se2tmp9/
In this demo I didn't set the pathColor because if both rangeColor and path color are same then you won't find any difference.
Also, since this is the default SVG gradient only, so based on your requirement you can modify this SVG linear gradient.
EDIT 1:
Based on your comments, then you need to use the conic gradient. In SVG there is no explicit option for conic gradient, but still you can find the ways to achieve that.
Alternatively I have used the CSS conic gradient to achieve that. Check the below demo:
https://jsfiddle.net/soundar24/6se2tmp9/2/
Also I have done a workaround to create SVG range segments on the roundSlider path. This is also similar to your requirement. Check the below demo:
https://jsfiddle.net/soundar24/8pgo9ce7/
I have a site with gradient background.
On this site I have sticky-top menu and under menu some content.
When I scroll down the content is visible trough menu.
I don't want to set the same gradient as background have to navbar element beacause then is visible that difference between navbars and bodys background.
body {
background: transparent linear-gradient(123deg, #76FCFF 0%, #F966F8 52%, #E8BBA2 100%) 0% 0% no-repeat padding-box;
background-attachment: fixed;
}
nav {
position: sticky;
top: 0
}
.content {
background-color: #ffffff;
margin: 0px 10px;
box-shadow: 0px 3px 10px #38383880;
}
<body>
<nav>Navbar content</nav>
<div class="content">
<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content
</div>
</body>
I don't see a problem using the same gradient.
body, html {
margin: 0;
padding: 0;
}
body, nav {
background: transparent linear-gradient(123deg, #76FCFF 0%, #F966F8 52%, #E8BBA2 100%) 0% 0% no-repeat padding-box;
background-attachment: fixed;
}
nav {
position: sticky;
top: 0;
}
.content {
background-color: #ffffff;
margin: 0px 10px;
min-height: 120vh;
}
<nav>Navbar content</nav>
<div class="content">
<p>
Content
</p>
</div>
So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
In theory, this is what I want it to look like:
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.
There are a ton of different ways to do this.
Here is a CSS only way.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
Hope this helps!
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
background: #e8e8e8;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hello from the other side!";
}
.title-card.caption-b::before {
content: "It's tricky!";
}
.title-card.caption-c::before {
content: "Don't call it a comeback!";
}
.title-card.logo-a {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}
<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>
I'm trying to make a transparent glass-like box, something similar to what is shown in this image:
I don't know whats wrong with my CSS because it looks like a white box (with low opacity) shown, basically it doesn't have the look or feel as shown in the picture. I was wondering if anyone knows how to achieve something like this?
My CSS (I tried a couple of things like blur or opacity but neither one yields the result I want):
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
div.glass-bg-color::before {
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: absolute;
// filter: blur(4px);
// box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
opacity: 0.3;
background-color: rgba(255,255,255, 1);
}
.glass-bg-color {
color: white;
position: relative;
}
<div class="body-bg-color">
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
</div>
The example you've shown uses a radial gradient as the background of the underlying element, and transparent white for the "glass" effect. For example I've created an elliptical background gradient ( by modifying an example on MDN) placed as a transparent image on top of a solid background of the body.
The glass effect is now just a transparent white background on a container element. I've used an inline-block for demonstration:
body {
margin: 0px;
width: 100vw;
height;: 100vh;
background-color: #00467F;
background-image:
radial-gradient(ellipse farthest-corner at 80vw 15vh ,
rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
);
background-attachment:fixed;
}
.glass {
background-color: rgba( 255,255, 255, 0.1); /* transparent white */
color:white;
display:inline-block;
border-radius: 15px;
padding: 10px;
}
<div class="glass"
style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
Hello Folks!
</div>
(Note the CSS for the body background can produce unwanted scrollbars if the body margin is non zero. An alternative to zero width body margins may be to create a fixed position background element with a z-index of -1. Previous discussion of the issue may be found at CSS3 gradient background set on body doesn't stretch but instead repeats? which I have already found useful.
The answer is really just applying white with a low opacity on the box backgrounds:
The CSS:
body {
position: relative;
width: 100%;
background: #00467F;
background: -webkit-linear-gradient(left, #A5CC82, #00467F);
background: -moz-linear-gradient(left, #A5CC82, #00467F);
background: -o-linear-gradient(left, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
.glass-bg-color {
position: relative;
display: inline-block;
float: left;
margin: 20px;
width: 200px;
height: 200px;
border-radius: 4px;
text-align: center;
background-color: rgba(255,255,255,.08);
color: white;
}
The HTML:
`
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
`
See the fiddle here: https://jsfiddle.net/4y8bx2eg/
Your current background opacity is set to 1. It should be closer to 0.2. And your spread-radius of the box-shadow is 3000px, which should be set more relative to the size of your elements, I'd also suggest changing the blur-radius a bit, which is currently zero.
Is this more like what you are looking for?
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
text-align: center;
}
.glass-bg-color {
box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
background-color: rgba(255,255,255, 0.2);
color: white;
position: relative;
display: inline-block;
padding: 10em;
}
I'm trying to make some text look a little more 3D by adding a shadow to it, but I can not make the shadow appear behind the text, I have tried switching it around but it always break in weird ways, the shadow is either on top or totally messed up, here is a JS Fiddle with my exact code:
https://jsfiddle.net/2azp5z36/2/
As you see the problem is that the shadow is in front of the text instead of behind the text.
If you have a better suggestion than my current method I'm interested, as long as the end result look the same (except for the placement of the shadow, obviously),
I only have 1 requirement: the code for the solution must only use: HTML, CSS and/or JavaScript (preferably HTML5 & CSS3).
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: 0;
}
<h1 class="CV" data-text="CV">CV</h1>
It's because you're setting the z-index of the h1. Just leave it as z-index:auto and the negative z-index should work as intended. Note that based on the properties you're using, this effect will only work in a few browsers.
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: auto;
}
<h1 class="CV" data-text="CV">CV</h1>
You're setting the text color to be transparent through -webkit-text-fill-color so that the background image can be used as the fill. The 'stacking order' means that the text itself is above anything in the background. The text-shadow is a property of the text, so it will also be above the background. I don't think this approach will work.
You'd probably need at least 1 more HTML element to make this work— would that be an acceptable solution?
Ok so, I hope this is what you wanted. I've tried to do it using 2 overlapping <h1> tags. Here is the JS Fiddle. Here is the code:
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
h1.CV2:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV2 {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
<h1 class="CV2" data-text="CV">CV</h1>
<h1 class="CV" data-text="CV">CV</h1>
Thanks everyone for your suggestions, they have been very helpful!
The final solution that I will use comes from: Michael
in this thread: How do I combined CSS text-shadow and "background-image: -webkit-gradient"
And special thanks to: Stephen C
For pointing that tread out for me.
Additional thanks to: Joseph Marikle & Sankarsh Makam
For interesting working code solutions.
The final solution that I will use comes from Michael above and looks like this:
https://jsfiddle.net/2azp5z36/6/
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 5px 5px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
<h1 class="gradient-shadow" title="Hello World">
<div>Hello World</div>
</h1>