Site: http://tinyurl.com/x983asd93
Looking at the top right corner, the triangle banner.
Basically, I only want to link that portion of the triangle banner, so that the buttons under it can still be clicked. I don't want the entire div to be linked, but the triangle image is a transparent rectangle, with only the triangle filled. So I'm not sure how to only link that portion of the triangle.
Hopefully you understand.
You should be able to acheive that with an image map.
http://www.maschek.hu/imagemap/
It does mean you'd need to use an img instead of having it as a background, however.
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I am usually a back-end developer that tries to become fullstack and I came to a little problem.
What I want to do is have a button that on click slides to the other side and changes the background. I am familiar with how to make an event on click and actually change the background. My problem is how to make the CSS so it looks good.
Lets say I have black and white themes. I want to have a box with white and black sides. When I click on it I want one of the sides to shift.
Here is how I want it to look.
The idea is to click on the box and the black part to move. Basically the white part is the background and the black part is the button that slides with some animation. Then the black part switches its color to opposite of the current background.
Basically the colors just swap but with cool sliding animation.
I know that I need one div for the box with background the current background.
I also know that I need another div to be the actual part that moves with background opposite of the current one.The inner dif will have a button inside of it that on click will call the function that changes the background.
What I can do so far is
<div class="box">
<div class="slider">
<button onClick="changeBackGroundColor()"></button>
</div>
</div>
The slider div will have half the width of box and full height of box.
Now comes the tricky part - how can I add if in css so that I can always check what is the current background and make the background of slider the opposite of the current one?
Also - how can I make it slide to the border of the box? I need to make the sliding in both directions. From right to left when the theme is white and from left to write when its black.
How to set up the css/html code if the A needs to be at the corner of the bottom right- where the red rectangle pointed
two things:
*responsive page
*background is overlay. the white rectangle is a popup.
Was coming here to say the same thing as #RBCunhaDesign , that would seem like the way to go to me, as well.
Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above
I have a div who are show as rectangle block. i want to show in them on Right top corner a close image who used for remove them like Windows have.
<div class="block"></block>
the especial thing i need to use in this that i not want to put HTML in the div and thing to do this using background image but another thing is i don't know how much div it's have because div have test who user type already.
if i put the background-position 619px 4px that i am unsure that they work when div are much big or too small.
so can someone show me how i can do this
If you want your close icon a few pixels off the right-top corner, you could do this:
You can add some transparent pixels to your background image to the right (the offset from the right side), then you can use:
background-position: right 3px;