I would like to apply linear-gradient from top to bottom and bottom to top, to create an effect of smoother lines, where text is scrolled.
I achieved linear-gradient at the bottom this way:
<div className="vsebina" style={{WebkitMaskImage:'linear-gradient(180deg, #000 97%, transparent)'}}>.
But I don't know how to apply another gradient to the top (because both don't work together):
WebkitMaskImage:linear-gradient(0deg, #000 97%, transparent)
Demo: https://stackblitz.com/edit/react-ts-stvhtr?file=App.tsx
The answer by #Igor is going in the right direction, but the result is not what you exactly want.
See the forked StackBlitz snippet.
App.tsx
import * as React from 'react';
import './style.css';
export default function App() {
return (
<div>
<div
className="razred"
style={{ backgroundColor: 'rgba(0,0,0,.85)', height: '100vh' }}
>
<div className="fancy-short-banner-three ">
<div className="container" style={{ height: '100vh' }}>
<div className="bg-wrapper" style={{ overflow: 'auto' }}>
<div
className="vsebina"
style={{
overflow: 'auto',
minHeight: '100%',
WebkitMaskImage:
'linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100%)',
}}
>
<div
className="row align-items-center"
style={{ maxHeight: '280px' }}
>
<div className="col-lg-6">
<div className="title-style-one">
<h6>
Lorem Ipsum...
</h6>
</div>
</div>
</div>
</div>
</div>
{/* /.bg-wrapper */}
</div>
{/* /.container */}
</div>
{/* /.fancy-short-banner-four */}
</div>
</div>
);
}
You can simulate the application of 2 gradients by setting the middle of the background as transparent.
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,1) 100%);
Related
I have a background image that is not staying within its div and will overflow into other contents. The background image div is on the same z-index and is nested within the background gradient div which contains the navbar and CTA section. I have tried just adding the background image to the same css class as the background gradient, but that has caused other issues to arise since I cannot resize it to how large it is supposed to be so I am just using the method I stated above. Can someone please help me with this? link to code sandbox is here codesandbox
what its doing:
what it needs to look like:
code below:
import styles from './style';
import { Navbar, CTA, BodyTop, BodyBottom, BodyMiddle, Footer } from './components';
const App = () => (
<div className='w-full overflow-hidden'>
<div className='bg-cta-gradient z-[0] h-[450px]'>
<div className={`flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
code for css:
#media screen and (max-width: 760px) {
.bg-cta-gradient {
background: linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
border-radius: 0px 0px 0px 70px;
}
.background-img {
background-image: url('./assets/bg-pattern-intro-mobile.svg') !important;
background-repeat: no-repeat;
background-size: contain;
width: 1300px;
height: 1300px;
overflow: hidden;
margin-left: 200px;
margin-top: 250px;
}
It seems that the container of this section is not having a border radius matching the shape of the left bottom corner.
That mismatched corner is causing the background image to overflow when on a smaller screen width.
Here is a quick fix that could be tried for this issue: (live demo: codesandbox)
Add a fix class to the CSS in index.css:
/* if it works, change the class name to a proper one later */
.fix-bg-img {
border-radius: 0px 0px 0px 70px;
}
Add the fix class to the said container in App.jsx:
import styles from "./style";
import {
Navbar,
CTA,
BodyTop,
BodyBottom,
BodyMiddle,
Footer,
} from "./components";
const App = () => (
<div className="w-full overflow-hidden">
<div className="bg-cta-gradient z-[0] h-[450px]">
<div
// Add the fix here 👇
className={`fix-bg-img flex-col h-[450px] relative overflow-hidden ${styles.paddingX} ${styles.flexCenter}`}
>
<div className="background-img z-[-0] absolute overflow-hidden "></div>
<div className={`mt-5 margin-bottom absolute z-[2] ${styles.boxWidth}`}>
<Navbar />
</div>
<div className={`z-[0] ${styles.boxWidth}`}>
<CTA />
</div>
</div>
</div>
<div className={`bg-bodyColor z-[2] ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<BodyTop />
<BodyMiddle />
<BodyBottom />
<Footer />
</div>
</div>
</div>
);
export default App;
Hope this will help.
I am currently trying to code a frontpage according this design, using bootstrap 5. I've managed to set the background to cover the entire page. However, I can't seem to get the white transparent overlay-block right, and the placing of the content inside. This should also be responsive according to this design.
Whats the best solution for doing this?
Currently I've got:
Startpage html
<div class="startpage">
<div class="hero">
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-1">
<h1 class="pb-2 pb-md-4">Heading Title</h1>
<button class="btn btn-primary mt-3" type="button">Button Title</button>
</div>
</div>
</div>
</div>
</div>
Startpage css
.startpage {
height: 100vh;
background: url(URL HERE);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero {
background-image: linear-gradient(rgba(250, 250, 250, 0.95), rgba(255, 255, 255, 0.8));
min-height: 70%;
padding-top: 200px;
}
On the navbar I've got:
header {
position: absolute;
width: 100%;
}
I want to apply nackground gradient style like this -> http://nimb.ws/Xq79Uw
Following is HTML code:
<div class="featured-title zl-artful-featured-title">
<aside class="post-meta cf">
<a aria-label="Artful Interiors" class="cat-artful-interiors" href="http://localhost/magnifissance/?cat=86">Artful Interiors</a>
</aside>
<div class="row">
<div class="columns medium-10">
<div class="post-title zl-artful-interi-title">
Enrico Fratesi Shares His Vision of Form, Tradition and Renewal
</div>
</div>
<div class="columns medium-2">
<figure class="post-gallery "></figure>
</div>
</div>
</div>
Any one have a idea for this type style then please update me.
Thanks.
It looks like the gradient is on top of the image in your example. This code using pseudo elements will do that for you, vs putting the gradient code on the div itself.
#artful_interiors .post > a {
position: relative;
}
#artful_interiors .post > a:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient( to bottom, rgba(0,0,0,0) 50%, #000 95% );
}
#zl-artful-featured-title{
background: linear-gradient(
to top,
#63B4C9 35%,
#FFFFFF 70%
);
background-repeat: no-repeat;
height:260px;
width:100%;
}
<div id="zl-artful-featured-title">
<p>Content</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvbOaFeLuR9IUkcut98bJs4r7-Qm8AGcEEYiiKxiAZEiljvUS_"/>
</div>
Try this
#zl-artful-featured-title{
background-image: -webkit-linear-gradient(90deg, #63B4C9 35%, #FFFFFF 40%);
}
If not working try this
#zl-artful-featured-title{
background: linear-gradient(
to bottom,
#63B4C9 35%,
#FFFFFF 70%
);
}
Make sure you've change the # to . if your using class.
I hope it helps
I have a row of semantic-ui cards with an image at the top of each card. However, the images can be of varying heights, meaning that the card title (immediately below the image) can be fairly low. This results in differing heights of card titles across the entire row. I would like to have all images be the same height, yet still scale to larger size screens.
I found this, but it did not solve my issues:
Image alignment within a row of divs
Here is the semantic-ui documentation for a card (mine are based off of this):
http://semantic-ui.com/views/card.html
One solution is to set background size to cover.
Second solution is to make clipping mask for box.
.card {
position: relative;
margin: auto;
display: inline-block;
background: purple;
width:200px;
height:300px;
}
.image {
width:200px;
height:200px;
background-image: url('http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg');
background-size: cover;
}
.image1 {
width:200px;
height:200px;
background-image: url('http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
<div id=background>
<div class=card>
<div class=image></div>
</div>
<div class=card>
<div class=image></div>
</div>
<div class=card>
<div class=image></div>
</div>
</div>
<div id=background>
<div class=card>
<div class=image1></div>
</div>
<div class=card>
<div class=image1></div>
</div>
<div class=card>
<div class=image1></div>
</div>
</div>
I'm using linear gradients to create equal height columns. In safari everything lines up and is fluid all the way from desktop to mobile.
My setup is 2 rows each containing 2 columns each column has an image and a description box underneath. The image is responsive so scales down in size but in Safari this isn't an issue everything continues to line up i.e. the edge of the gradient column (the line where the two colours meet) is in line with the image at every break point.
However in Chrome nothing lines up when you scale down. It's fine at desktop but as soon as you view smaller screen sizes the images and the line dividing the two columns are all off.
I have searched endlessly for a solution to this problem but cant's seem to find anything.
If anyone has any suggestions, it would be greatly appreciated.
HTML
<article class="rowContainer">
<div class="rowOne">
<section class="floatLeft textLightGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
<section class="floatLeft textDarkGreyArea">
<p>Description goes here</p>
<img src="..." />
</section>
</div>
</article>
<article class="rowContainer">
<div class="rowTwo">
<section class="floatLeft textLightGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
<section class="floatLeft textDarkGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
</div>
</article>
CSS
.rowContainer:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
font-size: 0;
}
.rowContainer {
display: inline-block;
}
.rowOne {
overflow: hidden;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #c9c9c9),
color-stop(49.99%, #c9c9c9), color-stop(49.99%, #e0e0e0), color-stop(100%, #e0e0e0));
background-image: -webkit-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0
49.99%,
#e0e0e0 100%);
background-image: -moz-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%,
#e0e0e0 100%);
}
.rowTwo {
overflow: hidden;
background: #e0e0e0;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e0e0e0),
color-stop(49.99%, #e0e0e0), color-stop(49.99%, #c9c9c9), color-stop(100%, #c9c9c9));
background-image: -webkit-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9
49.99%,
#c9c9c9 100%);
background-image: -moz-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%,
#c9c9c9 100%);
}
.floatLeft {
width: 49.99%;
float: left;
}
http://jsfiddle.net/Ht25w/1/
there is a bug with chrome and gradients, it's obviously not your fault. the simplest solution is to give the background gradient to each instead on the father
a solution to fix text in each box is to use display table / table cell with 50% width, give half gradient to each and bottom align the right box while positioning the text absolute to top like in this [http://jsfiddle.net/Ht25w/8/]