I have a custom page header set within a WordPress theme which simply displays a background image and some custom text that is added on top of the image.
Currently the header looks like this:
I would like to add a skewed background bar to the text that is imposed on top of the background image so that it looks like this:
The skewed div would give gradient backgrounds to both the header and subheader text. I am trying to created the graient divs using the CSS pseudo selector ::before tag.
My issues are that the text is actually contained within a Container div which sets the width of the containing div.
I am trying to get the Summer Sale div background to but up close to the left hand browser window edge. This would mean it would have to break out of the container. I would like to do the same for the subheader text.
Also I am finding that currently the width of the summer sale spans the whole width of the containing div as pictured. I am not after this. I would like it to only span the width of the summer sale text.
Here are my code snippets:
HTML Code
<div class="container">
<div class="row">
<div class="col span_6">
<h1>Summer Sale</h1>
<span class="subheader">Save big on selected products</span>
</div>
</div>
</div>
CSS Code
#page-header-bg h1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 6px;
background: rgba(0,0,0,0.4);
border-color: rgba(0,0,0,0.5);
border-right-width: 4px;
border-right-style: solid;
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg)
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000', GradientType=1 );
}
#page-header-bg .subheader, #page-header-bg h1 {
position: relative
}
#page-header-bg .subheader::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
background: rgba(0,0,0,0.7);
z-index: -1;
padding: 0px 5px 5px 10px;
border-radius: 6px
}
I thought about setting the width of the #page-header-bg h1::before tag however I cannot do that as the text will change and I can;t know what the width will be.
Any help would be greatly appreciated.
I don't know if you made any changes to your site after charlietfl's suggestion but as per the current code in your site you don't need to set the h1 to display: inline-block and width: auto because the h1 and the .subheader are already floated to the left. (Based on your last comment it does seem like you did.)
The reason why the skewed gradient element doesn't expand till left edge of the window is because the .container element has got padding: 0 90px set (meaning, there is a padding of 90px on the left and right). We can easily remove or override this setting to fix the issue but that would result in a lot of alignment changes within your webpage. Hence the simplest option would be to add a negative left position (equal to the padding) to the h1 and .subheader elements like below:
#page-header-bg .subheader,
#page-header-bg h1 {
left: -90px;
}
Alternately, you could also use transform: translate(...) to shift the h1 and .subheader to the left by the same no. of pixels as the padding on .container. Generally, I would prefer the positioning approach because transforms aren't supported by older browsers but since you are already using skew transforms, either of the approaches should be fine.
#page-header-bg .subheader,
#page-header-bg h1 {
transform: translate(-90px);
}
I have not added any demo because there are quite a lot of settings that require to be copied from the actual webpage.
Change the h1 to display:inline-block and width:auto so it doesn't run full width and your :before should then adjust also based on text width
Related
I'm trying to implement an effect in a webpage. The webpage must be fully covered with a background with a transparent window (this window will basically highlight some page of the page to draw user's attention).
The size of the window is unknown beforehand and the effect must be implemented in the frontend. So I'm free to use html, css and js.
I don't know a way this effect can be achieved with css only. And I cannot use something like a png image background, because the size and the dimensions of the transparent window will change dynamically. I'm thinking of generating canvas for and use it as a background image for the div element.
Is this possible to generate a canvas as per my example image and use it as a background?
Can you, please, provide an example?
Thanks.
Use a giant box-shadow:
body {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.window {
width: 150px;
height: 150px;
border: 5px solid red;
box-shadow: 0 0 0 99999px rgba(0, 255, 0, .25)
}
<div class="window"></div>
Another approach would be via the clip-path CSS property, where the clip path is used to define the visible region of the green "overlay".
Using the Clippy tool, you can modify the "frame" clip-path (from the tools preset library) to suit your needs. Here's an example of how the technique can be used to achieve what you require, and what each coordinate of the clip-path corresponds to:
.overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,255,0,0.5);
/* Defines the portion of the green overlay to be drawn and clipped */
clip-path: polygon(
0% 0%,
0% 100%,
25% 100%, /* Bottom left sideline of clipped rectangle */
25% 25%, /* Top left corner of clipped rectangle */
75% 25%, /* Top right corner of clipped rectangle */
75% 75%, /* Bottom right corner of clipped rectangle */
25% 75%, /* Bottom left corner of clipped rectangle */
25% 100%, /* Bottom left baseline of clipped rectangle */
100% 100%,
100% 0%);
}
<div class="overlay"></div>
<img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />
You could then generalize a solution for a visible rectangular region based on a clip-path with JavaScript like this:
/* Calculates clip paths with rectangular "cutout" for specified element */
const setClipPath = (element, { left, top, width, height }) => {
element.style.clipPath = `polygon(
0% 0%,
0% 100%,
${left}% 100%,
${left}% ${top}%,
${left + width}% ${top}%,
${left + width}% ${top + height}%,
${left}% ${top + height}%,
${left}% 100%,
100% 100%,
100% 0%)
`;
}
setClipPath(document.querySelector(".overlay"), {
top : 10,
left : 10,
width : 30,
height : 30
});
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 255, 0, 0.5);
}
<div class="overlay"></div>
<img src="https://images.unsplash.com/photo-1505811210036-052144988918?w=1080" />
Another idea using border
Reponsive
body {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
background-size: cover;
}
.window {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
border-style:solid;
border-width:20vh 30vw;
border-color:rgba(0, 255, 0, .25);
}
<div class="window"></div>
Or with fixed sizes
body {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
background-size: cover;
}
.window {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
border-style:solid;
border-width:calc(50vh - 80px) calc(50vw - 100px);
border-color:rgba(0, 255, 0, .25);
}
<div class="window"></div>
Create a single div that fills the entire screen. The transparent window is the the inside of the div, and the transparent background is the border. Using CSS, use the border-width properties to control the window's position, and use the height and width properties to set the window's size.
#overlay {
/* full page overlay */
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index: 2;
/* window size */
width: 150px;
height: 20px;
/* window position */
border-top: 50px;
border-left: 50px;
border-bottom: 10000px;
border-right: 10000px;
/* window colour */
background-color: rgba(0,0,0,0);
/* frame colour */
border-style: solid;
border-color: rgba(50,150,250,0.5);
}
p {
margin: 50px;
}
<html>
<body>
<p>A paragraph of text</p>
<div id="overlay"></div>
</body>
</html>
I have a linear gradient at the bottom of the page, which is set by body:before. Now I want that 75% color stop to change as I scroll down the page, so I have the js/jquery code below. I don't think $("body:before")works, so how can I fix that, so as I scroll down the color stop gradually goes up too?
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body:before {
content:'';
position: fixed;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
background: linear-gradient(to bottom, rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 75%, rgba(180,180,180,1) 100%);
}
Here's the js code:
$(window).scroll(function(){
$("body:before").css({
"background": "linear-gradient(to bottom, rgba(0, 0,0,1) 0%, rgba(30,30,30,1) " + (75 - $(window).scrollTop()/100) + "%, rgba(180,180,180,1) 100%);"
});
});
I'm afraid you cannot target pseudoelements using jQuery! My suggestion would be to make an element with your desired styling and position it absolute or fixed (depending on what you want to achieve) to the bottom of the body or a container element, which would have position: relative.
OR
Add a class to the body which alters the styling of your :before. That's probably the better shout in all honesty!
I'd like a divs opacity to decrease in direction left, top, right or down just like a linear-gradient does it in the background-image, but just for the whole appearance (not just the background). Is there any way of doing it?
I've tried doing it with this code:
html
<body>
<div id="outer">
<div id="content">
<!-- content -->
</div>
<div id="inner">
</div>
</div>
</body>
css
#outer {
height: 500px;
width: 500px;
padding-left:20px;
}
#inner {
position: absolute;
height: 500px;
width: 500px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
z-index: 999;
}
#content {
position: absolute;
height: 500px;
width: 500px;
}
As expected it worked really well with colors, but now I'd like to insert an image as background of the body and obviously it won't work like this, how would any of you do this?
Edit:Some of you marked it as a duplicate of css gradient opacity slide image left to right color white but It's not the same;I'm not talking about making the background-image get a linear-gradient over it, I'm talking about making a part of the whole div disappear like a gradient.
Use a mask:
.mask {
-webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
mask-image: linear-gradient(to left, transparent 30%, black 100%);
}
To clarify, I am trying to change the second nav bar from the top to be transparent so you can see through it to the image behind it.
I applied this CSS to the navbar which usually will work for transparency:
#nav > .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
But I think there is something happening with the slider where, although the nav is inside the slider div, it is still pushing the slider image down. When I use margin-top:-2em to pull the slider back up underneath the nav, it still doesn't have transparency on the navigation. If you scroll down on the page, you will see the transparent background on the navigation as you should. Any tips are much appreciated.
Change below height to 90%.
.carousel-inner {
height: 100%;
}
And remove the top-margin for #imagebox.
cannot give top:0 for .carousel-control with the current markup since it will overlap the menu. Otherwise you should give white background color to the #nav-wrapper and bring it to front using z-index.
Another suggestion is that it will be better if you could add a new div with <div class="spotlight"> wrapping carousel-indicators, carousel-indicators, left carousel-control and right carousel-control.
.spotlight {
position: relative;
width: 100%;
height: 90%;
}
use this in your style.css file.
.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}
Just remove the background-image from .carousel-control.right and .carousel-control.left
As you can see the below image, there is no color (technically background-image). Hope this is what you are looking for.
add this as Abdullah Ibn Farouk said
.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}
and this is for image to fit properly..
.fill{
width: 100%;
height: 100%;
background-size: cover;
}
Change in bootstrap.min.css
.carousel-control.left, .carousel-control.right { background-image: none; }
I have a colorful background. Over this background there is an white transparent image or white transparent color is applied which covers entire screen. What i need is, on top of this two i need to write text and this text color automatically should be replaced from the colorful background color which is behind the text as shown in the image below. Also the background color varies. How can i do this? I m sorry i m not giving any jsfiddle because i am not sure of how to do this.
Here is a solution...
HTML:
<div class="bg">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS:
.bg {
height: 100%; min-height: 20em;
padding: 2em;
/* Could be any background, including an image */
background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
}
.overlay {
background: rgba(255,255,255,0.4); /* translucent white */
}
.text {
padding: 1em;
font-family: 'Arial Black';
font-size: 3em;
text-align: center;
/* Same background as bg */
background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
/* The magic happens here... */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
...BUT it has the downside of only working with webkit at the moment.
Here is the jsfiddle, but make sure you're in the latest Chrome.
Here's another example of using background-clip and text-fill-color.
Ultimately - unless this design is critical to your website - I would recommend that you not go with this method, and instead look for a more simple solution that will work cross-browser.