I'm trying to find a way to simulate the image-mask property in CSS; currently it isn't available in most browsers. Is there a JavaScript library that could work?
I figured out how to do the buckles by creating a white image with a transparent space in the shape of a buckle, and then set a background color, so the background color only shows through where the image is transparent. The problem is, I can't do that for each part, because the white edges that you aren't supposed to see would be visible against the color of the part behind it (Like if you had a black square, and then you used that technique to get a red circle on it, you would end up with a red circle on a white square on a black square.)
It sounds like you're using indexed transparency - you'll want to use PNG images with 8-bit alpha channels instead. Then have an <img /\7gt; for each "component" of your item (i.e. one for the belt, one for the buckle, etc) then use absolute positioning to put each one directly on top of the other. The 8-bit transparency will ensure they all look right.
<div id="previewArea">
<img class="layer2" src="buckle{color}.png" />
<img class="layer1" src="belt{color}.png" />
<img class="layer0" src="pants{color}.png" />
</div>
Of course you'd need some client scripting to swap out each image for the selected color/design.
An alternative option is to have a server-side process dynamically generate images based on given parameters, it results in simpler HTML but would be slower for your visitors - it might work as a fallback for clients that don't support scripting.
Related
I have a semi-transparent sidebar with some background filters, on a mostly dark background
When scrolling further down, the text gets on the white section and gets really hard to read
Is it possible to dynamically change the text color to be dark when the contrast between the text and anything under it is too low? If not through only Tailwind/normal CSS, then how?
Its not a perfect fix, but I had a similar issue and I was able to use Tailwind's Blend Modes:
https://tailwindcss.com/docs/mix-blend-mode
<div class="bg-gray-400 mix-blend-difference" />
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
What is the HTML CSS solution for highlighting specific areas of a map/floor plan like this?
http://www.centrecourtshopping.co.uk/store-info/
They use sprite image look here.
Basically, it works like that:
The map with dark-blue regions is completely static.
There is invisible layer on top of it made from small rectangular in their case <a> -- each corresponds to single dark-blue region and posses its its own id.
When cursor is placed over a rectangular with id x the sprite image is nicely aligned with its background (by setting CSS's background-position).
Do not think, this magic would be possible without using JavaScript.
Hi i was going through a website where they used a very unique (according to me) background. they are mixing a color with an image and using it as background. the image is like
Then they are mixing some yellow color in it & it become like this
When i went through the code they were using something like this
background: #f6b93c url(bg1.png);
but it did not work for me!
Please help me out?
That is nothing but a short hand syntax
background: #f6b93c url(bg1.png);
So the above code simply means
background-color: #f6b93c;
background-image: url(bg1.png);
For more info on background short hand syntax
Demo
a png image with transparency and bg color will do the trick,
Otherwise if it is a jpeg,
the color will fill the rest of the part(for eg:in a div), the image wont cover.
what was happening with this background: #f6b93c url(bg1.png);
fill the color #f6b93c then on the top of that place the image, so it was a %0%(for eg.) transparent image, this will end up with a mixer of both
with latest CSS3 technology, it is possible to create texured background. Check this out: http://lea.verou.me/css3patterns/#
but it still limited on so many aspect. And browser support is also not so ready.
your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:
http://subtlepatterns.com
The image bg1.png does not seem to be in baseurl. You should try relative url. eg. if you have image inside 'images' folder, "images/bg1.png" should work.
I know there are many techniques how to stretch the image to the whole page. I like the ones based on "background-size: cover", but if it is justified, I can use another technique. My problem is that I need to hook links to some parts of this background image with some hover effects - imagine a picture on castle in the background highlighting its different parts when you hover them with mouse.
Note:
I prefer imagemap solution, because it allows polygon shaped hotspots.
Note that I do not want components on top of the image having it's own dimensions.