Hello guys,
You can check out my preloader here: http://apesdesk.apespark.com/ (Press ESC as soon as you open the page in order to stop loading the rest of the website and see the loader as much time as you need)
When you do so, you'll see the problem with the quality of the background linear gradient quality. The GIFs quality is way better than the CSS's gradient quality. I have no idea why this is caused and how I should fix it. Normally CSS shouldn't have those issues as it's actually computing the gradient, it's not an image, etc. to have lossless quality.
Regards,
Denis Saidov
ApesPark
P.S. I've temporary commented everything else and made the loader to loop infinitely.
I tried to tag your name but it won't work. As mentioned in my comment -
I'm getting the same issue. For a workaround solution I would suggest using a pseudo element to cover either the top or bottom of the page instead.
E.g.
#preloader {
background-color: #fff;
}
#preloader::before {
position: absolute;
top: 0;
left: 0:
height: 50%;
right: 0;
background-color: #477FE7;
z-index: 0;
}
Cheers,
Conor
Related
I want to recreate a "hand-drawn/brushstroke" style div on a white background, like in this image:
It seemed like the perfect match for the clip-path-CSS styling. I went ahead and created an SVG, used the clipPathUnits="objectBoundingBox" attribute and encountered the first problem. When using clip-path: url(urlto.svg#pathid); it did not render, but when I included the SVG on the page (hidden), it worked. I have read this multiple times on StackOverflow but never read any solution to this. Is that behaviour normal?
As said, I got it to work with the site-embedded SVG, but as seen on the spec-documentation of the clip-path functionality, WebKit (Safari and iOS in general) has its problems rendering the thing correctly. I tried prefixing, but that didn't work either.
My question would be: Do you think there is a possibility that I might have missed something in the SVG or in the CSS-Specification that might make it work in Safari? Or, if not, do you think that the problem can be resolved using the mask-borderattribute? Does that make a difference rendering-wise? I did not manage to find the current setup to make this work - basically, as I understood it, I would need to include the same SVG and "slice" it (9-field) correctly. However, I don't understand where that border is added as I would need it to be "inwards" of the div.
I hope this makes somehow sense.
Thanks in advance!
As an alternative you can do it using CSS & blend-modes if this is suitable for you:
div{position:relative;width:300px;height:300px;}
div img{position:absolute;
}
img:nth-of-type(2){mix-blend-mode: screen;}
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="Darwin" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/brush.gif" alt="brush" />
</div>
For future reference: I ended up using probably the simplest method for my use-case, as suggested by the user Timlind - thanks again for your comment!
<div id="container">
# CONTENT #
<div id="cover"><img src="path/to/svg"></div>
</div>
CSS is straightforward:
#container {
position: relative;
}
#cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
watch out for the viewbox definition inside the SVG to facilitate scaling (no fixed with and height in the svg-definition) and set preserveAspectRatio="none" (for this use-case).
pointer-events: none allows users to "click through" the svg-overlay.
So I'm working on a project that requires me to make an animated flag purely with HTML5 and CSS3—looking something like this, and with this kind of movement.
I know there exist some solutions with HTML canvas, but my client specifically requested this be done with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create several div elements and have each with an animation delay on the translateY to create the flag effect all together (JSFiddle here) and do the exact same thing for the text.
I can also make the text overlap the flag by making the text have an absolute position, but my problem is I'm not sure how I can coordinate the wave movement of the text with the flag's so it can be exactly the same. Or, alternatively, if there's another way to do this animation (not sure yet how I'm going to work around the triangles at the edges)? I know an image can be used to animate over it; what would be more efficient in this case?
We can do the animation in CSS3 using Keyframes.
You have to have the transparent image which will have the set of frames(all frames in single image) and animate using keyframes.
Here is one Example like that - https://codepen.io/Guilh/pen/yldGp
HTML
<div class="monster"></div>
CSS
body {
background: #24aecd;
}
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
animation: play .8s steps(10) infinite;
}
#keyframes play {
100% { background-position: -1900px; }
}
I hope this will help you
I am currently working on a rails app, to ease the process of events I host within the game of Minecraft. For those of you who don't know, in Minecraft multiplayer, everyone has a skin. This is what their player looks like, and it is a simple *.png file. The face of a player is always in a certain position in the skin; by that I mean in certain pixel coordinates.
Players' skins are hosted online, so, for example, to access my skin (lachy2901), I would go to http://s3.amazonaws.com/MinecraftSkins/lachy2901.png. Using this, I can access and embed any particular player's skin in my webpage. The problem is, I only want to display the face, after making it a little larger.
My question is; is it possible for me to get this skin file, "crop" it to a certain size and location, and then render this, without changing the original image, which I can't do, or having to store my own versions?
Thank you very much for your time and help, it is greatly appreciated.
See the Demo
HTML
<div>
<img src="https://www.example.com/logo.png">
</div>
CSS
div{
width: 100px;
/*height:100px; specify height also if needed*/
overflow: hidden;
border: solid 1px;
}
img{
position: relative;
top: 20px;
left: -20px;
}
basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working right. I'll post some images below to show you all what I mean.
On my resolution:
http://imgur.com/Pl87L
On a 1024x768 screen:
http://imgur.com/l6CUe
Also, here is the CSS for my background:
html, body {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/../images/background10.jpg) fixed no-repeat;
}
I hope this helps :).
Ross.
There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...
function browserSize() {
var bsr_w = $(window).width();
if (bsr_w <= 800) {
$('body').css("background-image", "url(background_small.jpg)");
} else if (bsr_w <= 1024) {
$('body').css("background-image", "url(background_medium.jpg)");
} else {
$('body').css("background-image", "url(background_large.jpg)");
}
}
In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)
There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.
I'm developing a Flash application which is communicating with Javascript to allow more features such as custom HTML input etc., by placing an absolute positioned div on top of the Flash application and controlling its position etc. with Flash & Javascript.
Because these html elements have to appear above the Flash content, I figured the following basic CSS would be enough to do the trick:
#flashContent {
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
#htmlContent {
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
width: 200px;
height: 200px;
background-color: yellow;
}
So, the htmlContent has a higher z-index than the flash content and thus it should be shown above it. Unfortunately, this only seems to work when you set the Flash object's "wmode" parameter to "transparent".
The problem with this setting is that it's seriously decreasing the application's frame rate to an unacceptable amount.
For static content this does not seem to be a problem, however for my application there's all kinds of elements that you can drag around which have to be moved real-time (while moving the mouse).
So, how do I enable html content on top of flash content without using the "transparent" wmode parameter or how do I optimize frame rate when using the "transparent" wmode parameter?
You can use wmode = 'opaque', and still use z-index'ing. Transparent can be very buggy.
if you are using javascript already to show the new layer on top you could just hide the flash while the div is enabled and show it again when you're done.
don't use absolute positioning. float it.