I am creating an image-slider by using CSS only. I am almost done coding, but I can't figure out what I have to do so that the images don't scale unproportional while sliding. I still want them to fill the div and not to be stretched at 100% and I also don't want to cut the images because I want (you) to figure out a way to do this :)
Here's a part of my code:
div#transition3 {
width:480px;
height:360px;
-webkit-animation:trans2 12s;
-webkit-animation-iteration-count: infinite;
-webkit-box-sizing:border-box;
-webkit-background-origin:border-box;
background-scale:fill;
}
#-webkit-keyframes trans2 /* Safari and Chrome */
{
0% {background:url('../img/1.jpg') no-repeat top left;}
10% {background:url('../img/1.jpg') no-repeat top left;}
20% {background:url('../img/2.jpg') no-repeat top left;}
30% {background:url('../img/2.jpg') no-repeat top left;}
40% {background:url('../img/3.jpg') no-repeat top left;}
50% {background:url('../img/3.jpg') no-repeat top left;}
60% {background:url('../img/4.jpg') no-repeat top left;}
70% {background:url('../img/4.jpg') no-repeat top left;}
80% {background:url('../img/5.jpg') no-repeat top left;}
90% {background:url('../img/5.jpg') no-repeat top left;}
100% {background:url('../img/1.jpg') no-repeat top left;}
}
Here's a fiddle: http://jsfiddle.net/qDmS8/3/.
I hope you know what I mean and be able to help me.
Thanks in advance!
It's not possible to do it the way I wanted to.
The best way to do this is to create containers for each image, then assign CSS transitions to them as seen on http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html
Related
How would you go about creating an irregular border with variable colours like the one in the screenshot?
I considered creating a border image in a graphics editor and then using border-image property as described in the docs.
However, this technique would not allow me to achieve the effect of multiple background colours (grey and white in the screenshot) entering the border "waves".
Another solution would be to just produce the whole background white and grey in say Photoshop, and the just use it on the website. I really wanted to avoid this for performance reasons, and would prefer to just produce a grey, checked pattern fragment and repeat it.
Moreover, as you can see in the screenshot, the dark fragment is an image from a carousel - the images will all come in different colours so applying a border-image to the carousel container is not a solution either.
I would appreciate some advice. Thanks.
Using SVG:
You can do this using SVG. I would say it is pretty complex because the approach uses patterns for the repeating circles, a mask with the pattern as its fill to produce the transparent cuts. This mask is then applied to the image to produce the full effect. This in my opinion is the closest to what you want and also has good browser support. It works fine in IE10+, Edge, Firefox, Chrome, Opera and Safari.
There are a couple of points to note though - (1) You would have to somehow get your carousel work with SVG image because otherwise mask will have no effect (2) the radius of circles change as the width of the container change and so you'd either have to use a fixed size container (or) assign width of the container to the viewBox attribute using JS (or find some setting to prevent the radius change from happening, I don't know of any) .
.masked {
position: relative;
height: 175px;
width: 100%;
background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%);
background-size: 51% 100%;
background-repeat: no-repeat;
background-position: 0% 0%, 100% 0%;
padding-top: 100px;
}
.masked svg {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
}
path {
fill: #fff;
}
image {
mask: url("#mask");
}
<div class='masked'>
<svg viewBox='0 0 1200 100' preserveAspectRatio='none'>
<defs>
<pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100">
<path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" />
</pattern>
<mask id="mask">
<rect height="100%" width="100%" fill="url(#circles)" />
</mask>
</defs>
<image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" />
</svg>
Lorem Ipsum Dolor Sit Amet...
</div>
Using CSS:
This can be done using CSS masks but unfortunately the browser support for this feature is terrible. It is currently supported only in WebKit powered browsers. If other browsers need not be supported then this is a wonderful option. All that we need to do is create a radial gradient (that repeats in X axis) for the mask like in the below snippet, give it the required size and position it accordingly.
.masked {
position: relative;
height: 175px;
width: 100%;
background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%);
background-size: 51% 100%;
background-repeat: no-repeat;
background-position: 0% 0%, 100% 0%;
padding-top: 80px;
}
.masked:before {
position: absolute;
content: '';
top: 0px;
height: 80px;
width: 100%;
background: url(http://lorempixel.com/1000/100/nature/1);
-webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%);
-webkit-mask-size: 100% calc(100% - 12px), 12px 12px;
-webkit-mask-position: 0% 0%, 0px 68px;
-webkit-mask-repeat: repeat-x;
}
<div class="masked">Lorem Ipsum Dolor Sit Amet</div>
I have a menu bar with drop downs that use absolute positioned elements. On hover, the elements fade in using CSS3 transitions. Note, we're using a heavily modified version of Zurb's Foundation 4.
.has-dropdown {
.dropdown {
z-index: 90;
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
We have an instance of an OpenSeadragon image, using the html5 <canvas> option on one page, and a YouTube <embed> on another. The YouTube embed has the wmode="Opaque" and &wmode=transparent code on them to force them to respect z-index as outlined here. Both the embed and the canvas and their parent elements are set to z-index: 2; position: relative;
The issue we're running into is that the .dropdown element drops behind the <canvas> and the <embed> once the transition is complete. This seems to happen mostly on Chrome. As soon as we mouse over any of the menu items, the menu pops back in front.
How do we fix this?
Removing the transition fixed the issue. The menu popped right in front of both the canvas and the embed and stayed there.
This didn't solve the issue with having a css transition, though. In order to fix that, I applied a webkit-transform: translate3d(0px, 0px, 0px); to the .dropdown:
.has-dropdown {
.dropdown {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
Now I have a transition that appears over the top of the embed and the canvas. Happy days!
Just add z-index to higher number like:
z-index: 1111;
If needed add:
pointer-events: none;
When using sprites in Compass/Sass, you get a background-image and a background-position generated.
For example:
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
This background image is positioned in the upper left corner of your element.
With normal CSS I can change this to the bottom right corner like so:
background-position: right bottom;
However, this doesn't work when using a sprite, as its for the entire sprite instead of each image in my sprite.
How can I tell Compass/Sass to place each image of my sprite in the bottom right corner, instead of upper left?
Note: the element I'm using this sprite on, changes in height, so I can't use fixed pixel values.
Thanks.
EDIT: I'm including this image to illustrate what I mean:
I was able to achive this using the :after psuedo class on my element.
You need to give the :after class a width and height equal to your image, and position it using CSS.
.element {
position: relative;
/* your element css */
&:after {
content: "";
position: absolute;
z-index: 1;
display: block;
width: 60px;
height: 60px;
right: 0;
bottom: 0;
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
}
I've been experimenting lately with some css3. What I'm trying to do is make a background image slide left and repeat seamlessly to give the effect of an infinite background animation (kind of like how they do backgrounds in old cartoons, where it's just looping over and over...). The problem that I'm facing with this css3 is that once the animation is complete, it snaps back into it's starting position. See here: my blog. The background of the entry titled "super sluggy" will snap back into place after the animation has completed. I've been looking through w3schools for the answer, and google and even related stack questions but I can't find the solution anywhere. Here is my code:
#keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-moz-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-webkit-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-o-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#sluggy_div{
background: url('../imgs/sluggy-bg.jpg') repeat-x;
animation: l_2_r 7s linear infinite;
-moz-animation: l_2_r 7s linear infinite;
-webkit-animation: l_2_r 7s linear infinite;
-o-animation: l_2_r 7s linear infinite;
}
the background itself is seamless if repeated along the x axis, however when animated the transition is a quick snap and I'd like it to be seamless or not noticable to the user I should say.
Does anyone know how to fix this? Thanks!
The easiest solution I came up with is to simply animate the background-position in the x direction from 0 to a position that's effectively the negative of its width (in this case -1000px):
#-webkit-keyframes l_2_r {
from {background-position: 0 0;}
to {background-position: -1000px 0;}
}
#sluggy {
width: 560px;
height: 374px;
border: 1px solid #f90; /* just for visibility */
background-image: url(http://digitalbrent.com/imgs/sluggy-bg.jpg);
-webkit-animation: l_2_r 7s linear infinite;
}
JS Fiddle (Webkit-vendor-prefix only) demo.
And this seems, in Chromium 18, to work fine. Hopefully you don't mind my using your actual images in the demo, but I didn't have any suitable images with which to test.
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image