I have a footer element and I'd like to fade all content above it, as follows:
scrollable mixed content (should be normal/solid on top)
scrollable mixed content (should transition to transparent here)
fixed-position, solid, footer
The "mixed content" could be anything, there's no set background color. I'm trying to blend or mask the content so it fades to transparent as it approaches the footer boundary.
I don't think it's possible with a footer background image or webkit-mask because that relies on a fixed background color for the mixed content. The only idea I had was putting all the mixed content in a fixed container element and using a mask on the bottom of it, but that's complicated and slows everything down.
Related
My web page contains with a background image and a tranparent card-panel on top of it. Is it possible to only darken the background image while keeping the brightness of the area under the transparent card panel the same?
depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image
-- stretch the pseudo element out to fit the whole area of the parent element
-- make sure that the pseudo element stay under the parent content (the card) in your case
-- Make the pseudo element look darker by adding a background to it, using linear-gradient.
By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.
In case you are not used to these terms and techniques, I put a few links below:
Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp
Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp
on large screens my footer doesn't sit at the bottom of the page leaving a white "bar" along the bottom (color of the page background).
I'm aware of sticky footers etc but due to using absolute positioning on elements in the footer these techniques make the rest of the footer go awry. I have now added an empty div below the footer directly before and set its min height to 100% and background colour to match that of the footer (black) however it does not do anything - only a set height in pixels will do anything but i want it to be dynamic so it fills the space if it is there whether its 10px of space or 500px of space.
Has anyone got an for a work around?
If you don't want to do a sticky footer, make your body background color the same color as your footer, then set the background of your content area to white. This gives the appearance that the footer extends to the bottom of the page, no matter the size of the browser.
Yes, you don't use the 'absolute' style of footer positioning, it's a terrible solution.
Oddly enough, Twitter Bootstrap has the easiest example of how to implement a sticky footer - it's a technique that's been around for ages:
http://getbootstrap.com/examples/sticky-footer/
The method is simple. Put a wrapper div around all your code, except for the footer.
If you refer to the source of that link, you'll see a wrapper with an id of wrap.
If you then examine the css for the above:
http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Just copy the sticky footer styles section and adapt for your site. The key part of this is the footer height value matches the margin and padding values of the wrapper element.
i'm using the method listed here to create a sticky footer. This works great, however my content divs above it have a semi transparent background, and are in turn placed on another background. You can see the site I am working on here
what I want to do is to have a sticky footer, but I also need the transparent background in the content div to expand to reach the footer.
Thanks.
I'm creating a website and I need to style some boxes like this image here. Although, their height aren't fixed for it's dynamic content I used -webkit-border-imageand -moz-image-borderand it worked perfectly. Unfortunately, IE is a bad bad guy and I wanted it to appear properly.
I thought about using CSS3 with box-shadow and -webkit-gradient and -moz-linear-gradient but again IE doesn't work.
I'd like to know some CSS technique so that I can have the gradient box and the shadows within a div with undefined size (I mean dynamic height and width)
Here is the possible solution :)
If the width is fixed, and the background is homogenous, this will work even on IE6:
Take the picture, cut out the middle gradient/white, make it transparent (the shadows should remain opaque), grey to white. Cut it into 2 pieces - the top part which can be stretched to any height without change to looks, and the bottom part with rounded corners (bg-mid.png and bg-bottom.png)
The top gradient part is also cut as a high, 1 pixel wide image.
Write this HTML code:
<div class="gradient-bg">
<div class="top-content">
your content
</div>
<div class="bottom-shadow">
</div>
</div>
Then, style them accordingly. Place the gradient image as the top div Background, the bg-mid.png as the top-content background (with repeat-x), and the bottom shadow - that's bg-bottom.png.
For IE6 you'll need to use conditional CSS statements, and filter CSS attribute to load images with alpha channel.
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.