I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
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 am new to this site and to web development in general, but I am working on a project that I need a bit of help with. Please bear with me as I am still new to this so I understand my code is sloppy and probably inefficient.
I am working on a sticky header that will stay visible as you scroll down the page. In addition, as you click on the links I would like them to be highlighted and then move to a particular location on the page through a scrolling action. When you click on 1, it should be highlighted and the others should be grayed out.
Since I am using a unique shape to do this I simply used images. I do not know any better so if you have suggestions it would be greatly appreciated. However, this is not the point of my question to you all. I have already figured out how to make the header work by utilizing the knowledge-base here on stack overflow. However, I need to optimize the element so that it is responsive for smaller viewports. I am uncertain how to do this given that I have multiple divs, images and scripts. Every time I try to accomplish this I break some other aspect of the header's functionality. Any help or direction would be greatly appreciated. I don't even know where to start here.
JSFiddle Demo
$(document).ready(function() {
$('div[id^="section"]').on('click', function() {
$('div[id^="section"]').addClass('not-active');
$(this).removeClass('not-active');
});
});
var $window = $(window),
$stickyEl = $('.fusion-page-title-bar'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 225
}, 1000);
return false;
}
}
});
.fusion-page-title-bar {
background-color: rgba(77,77,77,0.6) !important;
z-index: 9999 !important;
position: sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
top: 135px !important;
height: 71px;
border: none;
}
}
.fusion-page-title-bar.sticky{
position: fixed;
top: 0;
}
#main{padding-top:0px !important;}
.stickybanner {
height: 71px;
text-align:center !important;
width:1596px !important;
position:relative !important;
margin:auto !important;
background-color:gray;
}
[id^="section"] {
position: absolute;
display: inline;
}
[id^="section"] img:last-child {
display: none;
}
[id^="section"].not-active img:last-child {
display: block;
}
[id^="section"].not-active img:first-child {
display: none;
}
#section1 {
left: 26px;
position:absolute !important;
}
#section2 {
left: 325px;
position:absolute !important;
}
#section3 {
left: 624px;
position:absolute !important;
}
#section4 {
left: 923px;
position:absolute !important;
}
#section5 {
left: 1222px;
position:absolute !important;
}
.hidecode{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stickybanner">
<a href="#sections1">
<div id="section1">
<img src="http://imgur.com/A3hv0f3.png">
<img src="http://imgur.com/iQv7yhd.png">
</div>
</a>
<a href="#sections2">
<div id="section2">
<img src="http://imgur.com/Ld1TntV.png">
<img src="http://imgur.com/oziGN60.png">
</div>
</a>
<a href="#sections3">
<div id="section3">
<img src="http://imgur.com/zpViBoy.png">
<img src="http://imgur.com/f5wSB6N.png">
</div>
</a>
<a href="#sections4">
<div id="section4">
<img src="http://imgur.com/hgt5u84.png">
<img src="http://imgur.com/Skhrull.png">
</div></a>
<a href="#sections5">
<div id="section5">
<img src="http://imgur.com/iOThUy8.png">
<img src="http://imgur.com/lLRbfvT.png">
</div></a>
</div>
You can rather use CSS for making elements of arrow shaped. It will give you more flexibility and functionality and will be reusable and manageable.
I have made a JSFiddle depicting how can you make a arrow shaped div, the kind you require. You can tweak further more into it to achieve what exactly you want to.
https://jsfiddle.net/mzo5mqz2/
* {
margin: 0;
padding: 0;
}
/*Header full width*/
.header{
width: 100%;
position: fixed;
}
/*Common CSS to display tab shape*/
.header__tab{
min-width: 250px;
width: calc(20% - 20px);
line-height: 50px;
position: relative;
text-align: center;
margin: 50px auto;
display: inline-block;
}
.header__tab:after, .header__tab:before{
content:"";
position:absolute;
width:20px;
height:50%;
left:100%;
}
.header__tab--left__before, .header__tab--left__after {
content: "";
position: absolute;
width: 20px;
height: 50%;
left: -20px;
}
/*Color for Tab 1*/
.tab1 {
background: red;
}
.tab1:after{
bottom:0;
background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
.tab1:before{
top:0;
background: linear-gradient(to right top, red 50%, transparent 50%);
}
.tab1--before {
top: 0;
background: linear-gradient(to right top, transparent 50%, red 50%);
}
.tab1--after {
bottom: 0;
background: linear-gradient(to right bottom, transparent 50%, red 50%);
}
/*Color for Tab 2*/
.tab2 {
background: yellow;
}
.tab2:after{
bottom:0;
background: linear-gradient(to right bottom, yellow 50%, transparent 50%);
}
.tab2:before{
top:0;
background: linear-gradient(to right top, yellow 50%, transparent 50%);
}
.tab2--before {
top: 0;
background: linear-gradient(to right top, transparent 50%, yellow 50%);
}
.tab2--after {
bottom: 0;
background: linear-gradient(to right bottom, transparent 50%, yellow 50%);
}
<div class="header">
<div class="header__tab tab1">
<span class="header__tab--left__before tab1--before"></span>
<span class="header__tab--left__after tab1--after"></span>
<span>DOCUMENTATION ACCURACY</span>
</div>
<div class="header__tab tab2">
<span class="header__tab--left__before tab2--before"></span>
<span class="header__tab--left__after tab2--after"></span>
<span>CODING EFFICIENCY</span>
</div>
</div>
Web Dev Tip:- Invest a little extra time in the beginning and you will have the most flexible web app in the end which will give you the ability to quickly change the interface according to needs.
For ex- In this case, you can easily change the color of the tabs, or the shapes if you no longer like it after a while.
add this style in your css
img{width:100%;}
you can get responsive images for all devices.
You can simply use Bootstrap img-responsive class
and for alignment you can you the class col-md-2 (upto 12 from 0)
here is one example based on your code :
<div class="col-md-2">
<a href="#sections2">
<div id="section2">
<img class="img-responsive" src="~/IMG/PNG_transparency_demonstration_1.png" />
<img class="img-responsive" src="~/IMG/PNG_transparency_demonstration_1.png" />
</div>
</a>
</div>
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I know it is possible to invert an image just using CSS, but what about the tiling effect of background images? I have an image that fills the screen horizontally, but is tiled vertically. Can I flip every other image vertically?
maybe with a pseudo transform and mix-blend-mode : (not for ie ! ):
black linear-gradients are used to blend/hide image, it needs to be size twice the sice of image : here i used a 200px tall image, so gradient needs to be 400px where half is black and the other transparent.
html,
body {
height: 100%;
margin: 0;
}
html {
background: linear-gradient(to bottom, transparent 50%, black 50%), url(http://lorempixel.com/200/200/nature/7);
background-size: 400px 400px, auto;
}
html:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 50%, black 50%) bottom right, url(http://lorempixel.com/200/200/nature/7) bottom right;
background-size: 400px 400px, auto;
transform: scale(-1);
mix-blend-mode: difference;
}
body {
position:relative;
z-index:1;
display:flex;
}
h1 {margin:auto;color:white;text-shadow:0 0 2px black;}
<h1> Mix-blend-mode test</h1>
note, wait untill background image are loaded before any opinion, lorempixel.com is sometimes slow)
with a full width image :
Gradient has to be turned into a translucide black & transparent png of same width and double height of image .
example:
html, body {
height:100%;
margin: 0;
}
html {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAGQCAMAAAD2qlPcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJDNEFDRDIyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJDNEFDRDMyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQkM0QUNEMDJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQkM0QUNEMTJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puiwg40AAAAGUExURQAAAP///6XZn90AAAACdFJOU/8A5bcwSgAAAlNJREFUeNrs08EJAAAIA7G6/9IuUR9CMsLBJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALwwwCmTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJpMATAYmA0wGJgOTASYDk4HJAJOByQCTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGmAxMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMsBkYDIwGWAyMBmYDDAZmAxMBpgMTAaYDEwGJgNMBiYDkwEmA5MBJgOTgckAk4HJwGSAycBkYDLAZGAywGRgMjAZYDIwGZgMMBmYDDAZmAxMBpgMTAYmA0wGJgOTASYDkwEmA5OByQCTgcnAZIDJwGSAycBkYDLAZGAyMBlgMjAZmAwwGZgMMBmYDEwGmAxMBiYDTAYmA0wGJgOTASYDk4HJAJOBycBkgMnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJgNMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMjAZYDIwGWAyMBmYDDAZmAxMBpSsAAMAp3emP3IE2DAAAAAASUVORK5CYII=) top left, url(http://lorempixel.com/868/200/abstract/1) top left;
background-size:100% auto, 100% auto;
}
html:before {
content:'';
position:absolute;
top:0;
left:0;right:0;bottom:0;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAGQCAMAAAD2qlPcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJDNEFDRDIyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJDNEFDRDMyQzEwMTFFNkI2NTM5MTVCOTE0NUZFMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQkM0QUNEMDJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQkM0QUNEMTJDMTAxMUU2QjY1MzkxNUI5MTQ1RkUyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puiwg40AAAAGUExURQAAAP///6XZn90AAAACdFJOU/8A5bcwSgAAAlNJREFUeNrs08EJAAAIA7G6/9IuUR9CMsLBJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALwwwCmTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJpMATAYmA0wGJgOTASYDk4HJAJOByQCTgcnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGmAxMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMsBkYDIwGWAyMBmYDDAZmAxMBpgMTAaYDEwGJgNMBiYDkwEmA5MBJgOTgckAk4HJwGSAycBkYDLAZGAywGRgMjAZYDIwGZgMMBmYDDAZmAxMBpgMTAYmA0wGJgOTASYDkwEmA5OByQCTgcnAZIDJwGSAycBkYDLAZGAyMBlgMjAZmAwwGZgMMBmYDEwGmAxMBiYDTAYmA0wGJgOTASYDk4HJAJOBycBkgMnAZIDJwGRgMsBkYDIwGWAyMBlgMjAZmAwwGZgMTAaYDEwGJgNMBiYDTAYmA5MBJgOTgckAk4HJAJOBycBkgMnAZGAywGRgMjAZYDIwGWAyMBmYDDAZmAxMBpSsAAMAp3emP3IE2DAAAAAASUVORK5CYII=) bottom right, url(http://lorempixel.com/868/200/abstract/1) bottom right;
background-size:100% auto, 100% auto;
transform:scale(1,-1);
mix-blend-mode:difference;
}
body {
position:relative;
z-index:1;
display:flex;
font-size:2vw
}
h1 {margin:auto;color:#F9F3EE;text-shadow:0 0 2px #D999A3;}
<h1>Test via mix-blend-mode if your browser supports it !</h1>
Following on from my comment, I would think the simplest, and maybe only way to do what you want is to create a new image. So say you start with this image:
By flipping the image and adding it to the bottom, you get this:
So then you can simply replace your current url in your CSS and get this:
body {
background-image: url(http://i.stack.imgur.com/KxF8o.png);
background-repeat: repeat-y;
background-size:cover;
}
From my experience thus far, I don't think that flipping only part of the background-image is possible; at least with CSS3.
However, you can achieve your desired result with a couple of ways (there may be more):
• You can create a top div having having the height of your background image and width: 100% to have its background normal and then create another div with width: 100% again and height the remainder of the screen where you put your tiling background inverse.
Check out the result in the snippet.
#div1 {
height: 100px;
background: url("http://cdn.backyardchickens.com/e/ed/200x400px-LL-ed0a9036_image.jpeg");
background-size: 100px 100px;
background-repeat: repeat-y;
}
#div2 {
height: 500px;
background: url(http://cdn.backyardchickens.com/e/ed/200x400px-LL-ed0a9036_image.jpeg);
background-size: 100px 100px;
background-repeat: repeat-y;
/*Invert*/
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
<div id="div1"></div>
<div id="div2"></div>
• Alternatively, you can create an image with the same dimensions as your screen, set the effects you want and then use that image as a background-image.
I am trying to unveil a responsive background image. Basically, I have a value on load. Let's say 50%. So I want half of my image to be sharp, and the other half to be blurred.
Never done this before so I had the idea to produce two images : one plain, one blurred.
HTML - Two empty divs. Those divs are in a container-fluid div, so their width change at every window resize, that's important.
<div class="col-lg-9 left-header">
<div class="overlay">
</div>
<div class="bg">
</div>
</div>
<div class="col-lg-3 right-header">
// some stuff
</div>
Now, everything else has to be js and css.
So I start to style my divs accordingly.
Blurred bg, notice absolute positionning :
.overlay {
background:url('../img/overlay.jpg');
height:580px;
width:100%;
background-position:right;
background-size:cover;
position:absolute;
right:0;
}
Non-blurred bg
.bg {
background:url('../img/bg.jpg');
background-size:cover;
background-position:right;
height:580px;
}
As you can see in the jsfiddle https://jsfiddle.net/yqdx9vgc/, there is a big problem especially at large widths. Indeed, I wanted to play with the width parameter of the .overlay. But then, the two background cover images aren't of the same proportions, so the effect is not working.
Ideally, in the end, I want to set the width with jquery. For instance, if my value is 50%, then I tell jquery to put .overlay at 50% width. But my solution isn't working, how could I keep the same dimensions for both background images with different div sizes ? While keeping the responsive effect
I achieved this effect with pure CSS, enjoy:
https://jsfiddle.net/fk9rbgv5/1/
Here is the code:
.unveil-container {
width:100%;
position:relative;
overflow:hidden;
background-size:100% 100%;
background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
padding:0;
/* This is for keeping proportion - remove if you do not want */
display: inline-block;
width:100%;
}
/* this whole before is for proportion */
.unveil-container::before {
content:'';
display: block;
margin-top: 50%;
}
.overlay {
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
height:100%;
/* PLAY WITH WIDTH */
width:50%;
top:0;
background-position:100% 0;
background-size:200% 100%;
position:absolute;
left:50%;
-webkit-filter: blur(5px);
}
.bg {
position:absolute;
left:0;
top:0;
width: 50%;
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size:200% 100%;
background-position:0%;
height:100%;
}
<div class="col-lg-9 left-header unveil-container">
<div class="overlay"></div>
<div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>
You can set 2 elements, one inside the other, and then translate them in opposite directions using translate.
Animating them is easy with javascript.
With this layout, the elements are 100% width, and the background can be cover (or contains)
var target1, target2, step;
function move () {
target1.style.transform = "translateX(" + step + "%)";
target2.style.transform = "translateX(-" + step + "%)";
step -= 1;
if (step < 0) step = 100;
}
function start () {
target1 = document.getElementById('moving');
target2 = target1.children[0];
step = 50;
setInterval(move, 20);
}
.base {
width: 80%;
height: 300px;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
z-index: 2;
overflow: hidden;
transform: translateX(50%);
}
.overlayimage {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
transform: translateX(-50%);
-webkit-filter: blur(5px);
-webkit-filter: invert();
}
<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>
I changed your filter to make it more visible ...