Shadow on scrolled for Dialog content from Material-UI - javascript

I'm using Material-UI V4 library to create a React JS app.
I'm using the scrolling long content dialog example here https://v4.mui.com/components/dialogs/#scrolling-long-content.
What I want is to show a soft box-shadow at the top or bottom at the Dialog Content when the Dialog Content is scrolled like these 2 images below:
I found an example using a simple element (written in HTML and CSS) here How do I add a top and bottom shadow while scrolling but only when needed?.
I tried to implement the sample above in my Custom Dialog Content component but it didn't work as expected (no soft box-shadow appeared).
Here is the code for the Custom Dialog Content component:
// MATERIAL UI CORES
import DialogContent from "#material-ui/core/DialogContent";
import { withStyles } from "#material-ui/core/styles";
const CustomDialogContent = withStyles((theme) => ({
root: {
// SCROLLBAR
"&::-webkit-scrollbar": {
width: 5,
height: 5,
backgroundColor: "whitesmokeGray"
},
"&::-webkit-scrollbar-thumb": {
width: 5,
height: 5,
backgroundColor: "darkgray"
},
// SHADOW ON SCROLL
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
backgroundRepeat: "no-repeat",
backgroundColor: "white",
backgroundSize: "100% 40px, 100% 40px, 100% 14px, 100% 14px,",
backgroundAttachment: "local, local, scroll, scroll,"
}
}))(DialogContent);
export default CustomDialogContent;
Here is the full code: https://codesandbox.io/s/long-scroll-dialog-material-ui-ecicb?file=/src/CustomContentDialog.js
So, how can I show a soft box-shadow at the top or bottom at the Custom Dialog Content when the Custom Dialog Content is scrolled.

Related

Spoltight script not working on the mobile version

I'm using a script to have a spotlight effect. In the web version it follows the cursor, in the mobile version should it remain static at the center of the page but when I try to fix it there something weird happen and it seems like it goes below something and it's visible only in the upper part of the website.
www.civitonia.com
CSS:
.spotlight {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}
#media only screen and (min-width: 800px) {
.spotlight {
position: fixed;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px);
}
}
Script:
<script>
window.addEventListener("DOMContentLoaded", ()=>{
const spotlight = document.querySelector('.spotlight');
let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
//attach mousemove event listener if media query matches.
if (matchMedia('only screen and (min-width: 800px)').matches) {
window.addEventListener('mousemove', updateSpotlight);
function updateSpotlight(e) {
spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
}
} else {
spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
}
});
</script>
HTML:
<div class="spotlight" style="background-image: radial-gradient(circle at 98.3559% 72.549%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);"></div>
Could someone help me to keep the spotlight fixed (only in the mobile version) at the center of the page? the spotlight must remain the same in the web version (it keeps following the cursor as it does right now)

Combine linear-gradient with dynamic background-image

I'm trying to achieve color overlay on background images as demonstrated at w3school, but I want to do it for a dynamically set background-image (I'm currently working with VueJS).
What I try to achieve:
<div class="hero-image">...</div>
.hero-image {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.png');
background-size: cover;
}
First attempt - extract background-image to html:
Problem: This will override the color information and only use the background-image settings. I also tried with background attribute instead of background-color in the css code.
<div class="hero-image" :style="{ backgroundImage: `url('${image}')`}">...</div>
.hero-image {
background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-size: cover;
}
Second attempt - extract the complete background attribute:
Problem: This works except the background-size attribute is now ignored. I tried to add cover to the background-attribute in the html but it does not work either.
<div class="hero-image" :style="{
background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>
.hero-image {
background-size: cover;
}
As suggested by Temani, the second attempt should use background-image in the html instead of just background. Solution:
<div class="hero-image" :style="{
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
}">...</div>
.hero-image {
background-size: cover;
}

why inner style is not working in html progress

I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
you need to use background: instead of color:
color - is for text color
Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/

background color not working with img

I have an image that is within the div tag. This div has no background color, but I want to add a background color. but when I add background color are disappearing photos.
For example, cc into the div tag when I add background color within the div tag are disappearing photos
Codepen.io DEMO
HTML CODE
<div class="cc">
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
</div>
And CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
.cc {
width:100%;
height:100%;
padding:10px;
}
Digging through your CSS, I came across a z-index: -1. If you specify this, the image will be rendered behind all elements with a higher z-index. Thus it was hidden
EDIT:
Give your .img_400px400px (which has the gradient) a z-index: 1 and your .img_400px400px img a z-index: 2. Then your background color, gradient and image show. See this jsFiddle

Fade effect for text summaries similar to Amazon?

If you look at a book, for example, in Amazon, you can see a rather nice (and much more intuitive than ellipses) effect for abbreviating text summaries:
Is there a well documented way of doing this or a library that facilitates such a summarization of text?
The extra content is hidden from view with these rules: height: 200px; and overflow: hidden;; you can see them applied to #outer_postBodyPS. But the fade effect is handled in #psGradient:
background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
background: -webkit-gradient(linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
background: -webkit-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -o-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -ms-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 );
background: linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
The different prefixed rules (and the filter) are just for browser-specific instances.
You can inspect the whole stylesheet with these rules at http://z-ecx.images-amazon.com/images/G/01/browser-scripts/dpMergedOverallCSS/dpMergedOverallCSS-12049068973.V1.css.
The visual effect is simply CSS. There's a div with a gradient image fixed to the bottom which adds a "fade" illusion. Set the overlay to position:fixed;bottom:0 to add that visual effect.
As far as actually truncating the text, there are many ways to do it. The easiest way is to use the substring functions, like PHP's substr. http://php.net/manual/en/function.substr.php and simply cut off after X characters.
Alternatively, you can explode http://php.net/manual/en/function.explode.php the string on the [space] character and that would return an array of words. You can then iterate through that array easily and stop when you reach X words...

Categories