Looking to do a Parallax Effect on a skewed background. Had a look around on Google and the likes and can see everyone is doing this with an image. Just wondering if anyone has come across a solution where you can do this with a solid colour?
The reason I ask, Is that my design is a solid colour, However the background is using CSS3's Skew to transform the angle.
My current CSS (If it's any use) is as follows :
.diagonal {
transform: skew(0deg, 2deg);
background: #2188c9;
margin-top: -200px;
padding-top: 200px;
height: 220px;
}
.diagonal .content {
transform: skew(0deg, -2deg);
z-index: 1;
}
I've made a jsFiddle for this too.
If it's not achievable. I don't mind making a blue background image in its place.
Thanks
Related
I am creating a website for a project and got stuck with an issue.
I was trying to implement the hover feature, where when I hover over the image it gets zoomed in. That part works nicely, however, I was having an issue when I hover over the last book in the first row. When I hover over that, the entire screen becomes glitchy. This feature is not working as I hoped, i.e. smooth and good to work with. I have attached the image and the code I have.
Thanks for any help!
.books img{
width:200px;
height:300px;
}
.books img:hover {
position: relative;
left: 45px;
width: 300px;
height: 400px;
display: block;
}
I found some code online using -mox-transform and -webkit-transform, however, I have never worked with that before. This seemed complex for me. Any suggestions if I should learn how that works instead of perfecting the above code?
By increasing the width and height on hover the surrounding layout must adapt to that size change. The browser must move the surrounding elements to provide the space for the larger element, that is why it is glitchy.
If you want to do it properly, you will probably have to use transform, as you mentioned.
For your use case it should not be hard. Try this:
.books img {
width: 200px;
height: 300px;
transition: transform 200ms; /* optional transition with 200ms duration */
}
.books img:hover {
transform: scale(1.1); /* scale to 110% */
}
All you need to use is scale property to scale the image. Change your code to this
.books img:hover {
transform: scale(1.5);
}
This should do what you are looking for.
Use transform CSS Property with scale() which is used to increase or decrease the size of an element
.books img:hover {
transform: scale(1.2);
}
I've been trying to figure out if this is possible with CSS. I've seen some really creative and crazy shapes people have been making and this doesn't seem too far off.
I want to be able to create this red ring with css.
I think the route I have been going which is trying a semi-ellipse is doomed from the start because I have no way to knock out the center, I could draw a smaller ellipse within this ellipse with a transparent background but the original ellipse bg color would show.
Current Approach:
.ring{
background: orange;
width:250px;
height: 100px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transform:rotate(-65deg);
margin-left:-75px;
}
What I need is to be able to create some kind of tapered elliptical stroke.
Here's a fiddle: http://jsfiddle.net/clovola/0j7dgc2c/
I created a starting point for you to work from (it's no fun if someone else does everything, right?):
http://jsfiddle.net/0j7dgc2c/6/
Essentially, you'll need learn more about CSS transform. You can rotate around specific axes and use matrix transformations.
.ring{
width:200px;
height: 200px;
border: solid orange;
border-width: 15px 0 15px 25px;
border-radius: 50%;
transform: rotateY(45deg);
margin-left:-75px;
}
I'm trying to create a hover-over effect where an image starts off and in full colour, and when I hover-over the image, I'd like it to have a blue overlay.
The thing is, with just a simple blue overlay, it's just putting a semi-transparent block of blue atop of a colour image... which means other colours are showing through a little. What I'd like is for the image to simply be shades of blue.
Now, I've managed to get an image to go grayscale, and I've managed to get a blue overlay, but is there any way to get CSS to stack the effects? Turn the image greyscale, then multiply the colour over it.
The easier way is likely to just create the effect as a raster image and then just have it change images, but it'd be nice if it could be done in code, instead.
I think you're looking for CSS filter property. See David Walshe's demo here : http://davidwalsh.name/demo/css-filters.php
It's currently experimental and only supported by Webkit I think, but it's the only way to achieve that with CSS.
You can also take a look to Adobe CSS custom filters : http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/
A demo of something I think you wanna do : http://jsbin.com/igahay/3011/ (from this topic: CSS image overlay with color and transparency)
Single image and css filters (if you are satisfied with the result):
img.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; }
img.front:hover { opacity: 1; }
img.back { position: absolute; -webkit-filter: sepia(100%) hue-rotate(180deg) saturate(300%); }
<img class="back" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
Using two images will give you much more flexibility as to the possible effects, transitions etc.
I'd use this:
img.front {
position: relative;
opacity: 0;
transition-property: opacity;
transition-duration: 1s;
}
img.front:hover {
opacity: 1;
}
img.back {
position: absolute;
}
<img class="back" src="https://lh5.googleusercontent.com/-uM248yE5o9M/VFzw11HH-GI/AAAAAAAAJ5c/KrG1kM7XCsc/w400-h225-no/image-b.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
I'm sure there are better ways to solve this, but if you want a color overlay over a grayscale image, you could desaturate a background image and use a pseudo element to create an overlay:
#img1{
width: 400px;
height: 200px;
background-color: rgba(15,192,252,0.5);
background-image: linear-gradient(black, black), url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
background-size: 100%;
background-blend-mode: saturation;
transition: 0.5s;
}
#img1:before{
content: "";
display: block;
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
opacity: 0.4;
}
#img1:hover{
background-color: transparent;
background-image: url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
}
<div id="img1">
<div>
My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :hover):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration.
This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.
After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.
I have two images in an HTML page. One is black-and-white, the other is color. I would like to transition from the black-and-white image to the color image using a custom animation. The effect I'm looking for is where the image appears black-and-white, and then appears to be "painted" in color, stroke-by-stroke.
The easiest way I can think to do this is to create an animated gif that starts white and gets painted black, stroke-by-stroke. Then I could place the color image on top of the black-and-white image using absolute positioning and mask the color image with the animated gif.
However, before pursuing that I searched all over to see if anyone had ever done anything like that, and I've been unable to turn up any examples. Is that even possible, and can you show an example of it?
Or, is there a better way to achieve this effect?
If you have just two images then cross fading two overlayed images is pretty simple
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Look here at demo 3 & 4 http://css3.bradshawenterprises.com/cfimg/
I have done half of the work for you
for this html
<id class="base">
</id>
and this CSS
.base {
width: 200px;
height: 200px;
border: solid 1px black;
position: absolute;
}
.base:before, .base:after {
background-image: url("http://placekitten.com/200/300");
width: 100%;
height: 100%;
position: absolute;
content: '';
}
.base:after {
-webkit-filter: grayscale(1);
-webkit-mask-size: 200px 200px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px);
}
You get (in 2 pseudo elements) the original image and the image turned in grayscale. (You need a webkit browser for this).
Then , the grayscale image is turned transparent with an mask file.
I don't have any gif with transparencies, so I can not test the final result, but I think that it should work. (Just change .webkit-mask-image to url(gif)
Share your result if it works !
demo
And yes, it is a overkill, but once you get it working you can adapt with no work to another image !
updated demo with an animated gif as mask