How to display a certain section of an image? - html

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;
}
​

Related

How to change the position of Navigation Section in Magento 2.3.3 through CSS?

I am trying to reposition the entire block of navigation section in a different position than it is right now, e.g. moving it a little upward as it is shown in the attachment.
I have tried to modify the CSS file under ..porto/web/css/header/type2.css with the class .nav-sections. I have tested with other possible CSS classes and after so many attempts I haven't found it working; now I am looking for help. Can anyone please give me any hint on this issue? I am using porto theme with my site.
Ideally you would want to edit the .xml file from the correct module within your own frontend theme. But if your specifically looking to just edit the css the below might work:
.page-header.type2.header-newskin .nav-sections {
text-align: center;
position: absolute;
top: 70px;
left: 35%;
}
you can just tweak the top and left positions to your needs.

Image's aspect ratio on its container

I know there are similar questions, all of them are old, and I was wondering maybe there are newer techniques.
I have the following HTML:
<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>
What I need is the figure container keeping the room for the img while it's not loaded yet. Without the container keeping the space I end up with twitching content which feels awful.
So far I've came up with the following SASS mixin:
#mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) {
.#{$image-wrapper-class} {
position: relative;
padding-bottom: percentage($y/$x);
}
.#{$image-class} {
position: absolute;
}
}
Being applied like #include image-placeholder(1170, 405, main-slider__slide, main-slider__image); it generates CSS like
.main-slider__slide {
position: relative;
padding-bottom: 34.61538%;
}
.main-slider__image {
position: absolute;
}
The problem is that I have to hardcore the size of my images in the styles and have a separate class for every image of with certain dimensions. Do you guys know better solutions where one general placeholder class would resolve the problem?
As I wrote into comment above - I doubt that there is general solution that will allow you to obtain information about not-yet-loaded element.
However it may be possible to mimic such behavior.
One thing that came in mind is to have tiny resized version of the image to be loaded to be inlined into document and then replaced by actual image upon page load. E.g. your 1170x405 image can be squeezed by 20x factor to 50x20 that will give you ~1kb of image size in jpeg. This image may be stored as <img src="data:" class="image-placeholder"> directly into document and act as a temporary replacement for your actual image. You can scale it to original size using CSS and load original image either by JavaScript or by allowing browser to load it without displaying or by putting it immediately over placeholder. It can be also useful to apply filter: blur(10px) or something like this to image placeholder so it will not look ugly. Actually you can even animate this filter value to provide pleasant visual transition from scaled down placeholder towards original image.
I've used such approach into one of my projects and it was working well.
Hope it will help you.

CSS Gradient Poor Quality

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

CSS Position Loading Bug

I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com

How to enable HTML content on top of Flash content without the frame rate dropping?

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.