This question already has answers here:
Slanted diagonal line in html or css?
(7 answers)
Closed 7 years ago.
I am trying to create a diagonal background in the background of an element. I can do this quite easily using a gradient, however this for a responsive website so the element needs to be fluid.
I can do something like this for a fixed shape...
div {
width:200p
height:200px;
margin-bottom:2em;
border:1px solid #aaa;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}
This is using a rotated gradient with a hard stop, but it is using a fixed width. I have done a codepen here of how it would look with a width set in percentages, and as you can see, the concept breaks. http://codepen.io/juicypixels/pen/gPravL?editors=110
Would be very interested to see if there is a responsive way of doing this, even if I have to use javascript.
Thanks in advance.
try
background:linear-gradient(to bottom left,#ffffff 49%,#aaa 50%,#ffffff 51%);
instead of
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
Related
This question already has an answer here:
What is the point of CSS collapsing margins?
(1 answer)
Closed last year.
I have an element with a margin at the bottom of 10px. And immediately under this element, I place another element with margin at the top of 10px.
Now there is exactly 20px of whitespace between these 2 elements.
What could be the cause of this behavior?
Maybe you're giving some default margin in the body section.
So you can try saving this using:
body{
margin:0
}
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
Disclaimer: I don't have any formal programming background, and I've been trying to mess with front-end design recently. Excuse me if my questions are trivial or misplaced (at least I didn't find clear answers in other posts)
I've been using Outsystems with responsive design framework to develop a web page. In order to profit from the responsive framerwork, I'm trying to make a web block that will look something like this.
Page layout
Inside a container with defined dimensions, I would insert a container (which will fit perfectly this parent container), containing other containers of its own. These 3 containers will always fill the parent horizontally, but will have heights according to the proportions I draw there (merely illustrative).
In order to fill the fixed-size parent, the main container would have to be set with height and width equal to 100% (at least I think so). However, the last child container (60%) may have its contents bigger than the appointed size (I put search results in there), so I tried setting 'overflow-y: auto'. However, that doesn't seem to work. From what I understood, that doesn't work because its parent has its height set to 100%, which isn't a defined size, so it ends up being considered as an undefined size when calculating the child containers size, and it ends up setting its height to 'auto' by default, which leads to visible overflow. I ended up changing the first two containers to have fixed sizes at the end (since they're inputs and they need to be at least visible for typing), however I just can't manage to make the last one fill the rest of the parent's container, while creating a scroll when necessary if its content overflow. What works is setting the parent container with 'overflow-y: auto', but I don't want it to work like this.
Is it possible to set chains of relative sized elements within another with .css or does it need to be alternated between fixed-size/relative-size to work? Would I need to use javascript to make calculations and set their heights at runtime?
Welcome to the world of CSS layout! Your question is quite good and have some really great depth to it. It's not quite clear what you need - exactly - because there are many techniques for variares scenarios it's better to read something on Flexbox and try to make a minimal code prototype with the problem you're facing when making the layout.
More about CSS flexbox (no need for a framework):
https://yoksel.github.io/flex-cheatsheet/#display
I made an example so you can see how it works:
.container {
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #92A8D1;
padding: 20px;
height: 600px;
outline: 1px solid black;
}
.c20 {
min-height: 20%;
background: #88B04B;
padding: 20px;
outline: 1px solid black;
}
.c60 {
flex: 1;
background: #6B5B95;
padding: 20px;
outline: 1px solid black;
}
/* not related to the answer */
body {
margin: 0;
min-height: 100%;
}
<div class="container">
<div class="c20">
hello world 20%
</div>
<div class="c20">
hello world 20%
</div>
<div class="c60">
hello world remaining %.
</div>
</div>
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have bunch of left floated card like elements with set pixel of width and height. Each of the elements are large enough that it looks off when there's not enough space on the right to fit another, I get a big whitespace on the right. I want to even out the white space on the both sides.
With simple left floats, it looks like this:
[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---]-------
what I instead want is something like this:
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---]------
or this:
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
---[---][---]----
How can I achieve this with CSS, and if it is not possible, is there any simple way to do this with JavaScript ?
You can use display: inline-block instead for the cards, and use text-align: center in the parent.
.card {
display: inline-block;
}
.parent {
text-align: center;
}
That way, the cards will work just like wrapping, centered text.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Blur Img's & Div's in HTML using CSS
So basically what I want to do is to blur content witch is behind a div element, that div is with opacity 0 - 0.5.
Here is a jsFiddle
EDIT[1]: What I actually want is that a div goes over an image and the area under the div is blured.
EDIT[2]: div with position: absolute goes over other elements and blur's them.
You should blur image on upload. Then crop other image on upload (or crop it using jQuery/css). Then combine what you have to achieve this effect.
Using css for this task is impossible. Using javascript for this task is bad idea (very slow).
Only option is to use this technique on background image and then place another (cropped with js/upload) ontop of it.
Following up on the answer by Purmou referenced in the comment by #Keith Nicholas, you could do something like:
topblur{
position: absolute;
top:2px;
left:2px;
width: 100%;
height: 150px;
background-image:url(http://www.stefanides.com/home/yard/back%20yard.jpg);
opacity: 40;
filter:alpha(opacity=40);
border: thin solid black;
}
Not a great solution, but it does mess the image up!
Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style
div#column {
margin-left:20px;
-moz-column-width: 250px;
-moz-column-gap: 20px;
-webkit-column-width: 250px;
-webkit-column-gap: 20px;
height: 850px;
}
I need to place an image within this column layout which spans over atleast 2 or 3 columns.
Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.
You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.
Maybe there are JavaScript libraries that can do it...
Add a width on your div and add this style
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
See reference: >>
I asked #Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.
So, my thoughts so far...
column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.
For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.
Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.
There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)
So I think that the only solution currently is:
For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
Absolutely position a copy of the image over the top.
I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!
Use position:absolute, like this:
#image {
position:absolute;
top:300px; //distance from top
left:200px; //distance from left
width:600px; //image width
height:400px; //image height
}