Is this possible to make with CSS? (Color is not important, just bottom side that is oval)
Try
background-color: #60a0d0;
border-bottom-left-radius:50% 10%;
border-bottom-right-radius:50% 10%;
(with appropriate browser prefixes)
You can get any curve with an ellipse or circle, placed behind the main block:
http://jsfiddle.net/e9RLQ/1/
.box {
position: relative;
background: #60a0d0;
}
.box:after {
position: absolute;
z-index: -1;
left: 0;
top: 100%;
width: 300%;
height: 300px;
margin: -292px 0 0 -100%;
background: #60a0d0;
border-radius: 50%;
content: "";
}
The drawback here is the complexity of adding gradient background.
Related
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)
What I'm trying to create is the cyan box. I hope the image kind of explains the idea.
SOLVED
Per Kees van Lierop answer I ended up doing the following:
&__label {
#include span-columns(6);
margin-top: 4rem;
background-color: rgba($color-secondary, 0.5);
color: white;
padding: $base-padding;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 9999px;
height: 100%;
background-color: inherit;
}
}
Giving me a nice result:
You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:
.cyan-box {
position: relative;
&:before {
position: absolute;
top: 0;
right: 100%;
width: 10000000px; // a large amount, long enough to reach the edge
height: 100%;
content: '';
display: block;
background: cyan;
}
}
Is it possible to make this shape with CSS? It can't be done with border radius, is there another way to 'bend' a rectangles sides?
As the other answers, the best way to make your shape perfect is using SVG. However with css3 and the help of pseudolements after and before You may have close shapes.
This one is far from good as I've made the FIDDLE as a fast example but with time you may get better results:
div {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: green;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
div:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
div:after {
content: '';
position: absolute;
bottom: 0px;
right: -11px;
width: 130px;
height: 120px;
background: green;
border-radius: 20% / 150%;
}
I don't think there's any widespread method for constructing shapes like that with pure css.
What you could try though is using inline svg:
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
This is just an example svg, you'll have to model your own. It also accepts base 64:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat;
Edit: I created a fiddle: https://jsfiddle.net/pm3czdhj/7/
You could also try looking into the css property clip-path.
Do some CSS like this will make the rectangle have curved edges:
div {
border: 2px solid;
border-radius: 25px;
}
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
It's possible to use css3 filters as a mask?
For instance, i want to blur only 30% of a div from the top. How can i do it?
I create a little jsfiddle to illustrate what i'm trying to achive: http://jsfiddle.net/uxCXa/2/
I would use a pseudo-element to achieve that and adding a box-shadow to fake WebKit's blur filter.
.container {
position: relative;
width: 200px;
}
.container:after {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background: rgba(100,100,100,0.3);
box-shadow: 0 0 3px 0 rgba(100,100,100,0.3);
z-index: 2;
content: "";
}
top and bottom need to be the half of that 30% you want.