I've searching for a while, but didn't find a solution.
The problem is that I need css triangle with fixed height (50px) to be stretched on 100% width of the div.
Surely, it can be done via js or jquery, or by replacing with svg, but is there any pure css solution for this?
Pure CSS triangle is manageable via borders, and borders doesn't support thickness in percents. So I guess it's impossible.
Related
Is it possible to calc animation-duration depend on element's width with pure css?
I have a marquee animation. And I want the animation-duration depend on the length(width) of the text itself. Is it possible to deal without js?
Technically you could calculate animation based on width using a CSS preprocessor, but the problem one is going to encounter is that unless the width is specified, CSS isn't going to know how wide something is. That information doesn't become available until the page is loaded.
I use the following code on many divs in my site to do vertical and horizontal centering in responsive divs.
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
However then I want to animate my buttons through css3 transforms, it jumps around as it seems the animation bypasses my centerings with this "hack". Does anyone know of a similar hack to actually make just css animations doable or is this a thing I loose when I want to center things with css?
I used CSS gradient on one of my designs and it works pretty well. But there's a tiny problem - it looks messed up when the content in the page is less that the screen height. Can I define its height to be 100%?
I created that gradient on colorzilla and it seems pretty cross-broswer.
I needed to use background-attachment:fixed; and boom - the background will stretch instead of tile.
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/