I'm using the box shadow property to replicate the original circle multiple times, with different spread each shadow, see:
.a {
width: 50px;
height: 50px;
background: #EEB850;
border-radius: 50%;
position: relative;
top: 117;
left: 167;
box-shadow: 0 0 0 50px #243D83,
0 0 0 100px #6592CF;
}
However, the shadows are not replicating the circle, but instead, they look like squares with rounded corners. Any suggestion about this? Screenshot of the result.
While there is the bug in Edge/Chrome a workaround might be to create the circles with radial-gradients on a larger before pseudo element.
Here's a simple example:
.a {
width: 50px;
height: 50px;
background: #EEB850;
border-radius: 50%;
position: relative;
top: 117px;
left: 167px;
}
.a::before {
content: '';
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400%;
height: 400%;
border-radius: 50%;
background-image: radial-gradient(#EEB850 0 25px, #243D83 25px 50px, #6592CF 50px 75px, transparent 75px 100%);
background-position: top left;
}
<div class="a"></div>
Note: because one can sometimes get ragged effects with radial gradient the snippet has put the central color as its first circle to avoid edge effects (small gaps between the element and the radial gradient).
Related
I'm trying to obtain some nice U shapes divs.
This is the expected result (it must look nice and be responsive):
This is the solution I found for footer (the shape is not so good as I want):
footer:after {
content: "";
display: block;
position: absolute;
border-radius: 0px 0px 50% 50%;
width: 100%;
height: 140px;
background-color: white; /* but if I choose a bg image for about us this solution is wrong */
left: 0;
top: 0px;
}
I will have multiple sections similar to #about-us. Can you suggest a nice starting solution here? Please keep in mind in brand section background I have an animation, in footer a background image. This is why I can't use in about-us the solution I used for footer. It's kind of let's cut this div with an oval and make this section transparent.
UPDATE:
My current header / about us annoying merge. Adding a gray shape (inside header or in top of about us) is not a solution.
.u-shape {
height: 120px;
right: -100px;
left: -100px;
z-index: 1000;
position: absolute;
margin: 0 auto;
}
.u-shape.top {
top: -120px;
background: radial-gradient(ellipse at 50% 0, transparent 69%, white 70%);
}
.u-shape.bottom {
top: 0;
background: radial-gradient(ellipse at 50% 0, white 69%, transparent 70%);
}
Usage:
<header>...</header>
<div class="u-shape top"></div>
<div id="about-us"></div>
<div class="u-shape bottom"></div>
<footer>...</footer>
Useful:
https://codepen.io/thebabydino/pen/wFvmA
Sometimes images just explain things better than 1000 words
assumed the black border is my image I want to cut off the top left/right edge - like marked by the red lines.
Would it be possible (if yes: how) to cut an image this way with CSS?
Just in case its not clear what I mean by cut: I want
By cut I mean, that the image will look like this
Without using a wrapper element, you can use clip-path, though the support isn't great.
img.cut {
-webkit-clip-path: polygon(50px 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 50px);
clip-path: polygon(50px 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 50px);
}
<img class="cut" src="http://lorempixel.com/200/300/">
This uses calc (widely supported), so you can specify exact pixel values to clip by.
CSS Pseudo
If you know you're background is going to remain a solid colour, you can achieve this using pseudo elements in a number of ways.
1st option
A very simple solution is to use the pseudo elements with borders to which should get you the effect you want.
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 80px solid white;
border-right: 80px solid red;
width: 0;
}
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
<div></div>
2nd Option
Using a single pseudo element which is larger than the parent and rotating it to get the desired effect.
This is a much cleaner effect and also means the use of background images is supported and easier to implement.
div {
height: 200px;
width: 200px;
background: transparent;
position: relative;
z-index: 9;
overflow: hidden;
}
div:before {
content: '';
width: 200%;
height: 200%;
position: absolute;
transform: rotate(45deg);
background: red;
left: -50%;
top: 20px;
<div></div>
I centered radial gradient 200 px from the top and 200 px from the left. The same I did with span witch contains letter "a". But as I see, gradient center doesn't mach the span center.
Why does it happen?
<body>
<div class="box"><span>a</span></div>
</body>
CSS
.box {
position:relative;
width: 300px;
height: 300px;
background: -webkit-gradient(radial, 200 200, 20, 200 200, 30, from(#FCFCFC), to(#CF0C13));
}
span {
position: absolute;
left: 200px;
top: 200px;
}
You have it correct.
Problem:
The problem you are seeing is because, the span starts at X = 200px and Y = 200px. While the radial gradient sets its center at that point. This is because of the default font glyph which leaves space for ascenders and descenders. This will change for every font-family you have.
This is visible in this snippet, see the span marked in blue:
.box {
position: relative;
width: 300px; height: 300px;
background: -webkit-radial-gradient(200px 200px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
span {
position: absolute;
left: 200px; top: 200px;
border: 1px solid blue;
}
<div class="box"><span>a</span></div>
Solution:
Just shift the radial origin by 10px down on Y axis.
Like this: -webkit-radial-gradient(200px 210px....
Snippet:
.box {
position: relative;
width: 300px; height: 300px;
background: -webkit-radial-gradient(200px 210px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
span {
position: absolute;
left: 200px; top: 200px;
}
<div class="box"><span>a</span></div>
Alternatively, if your span contents are going to change, then its better to use the translate(-50%, -50%) trick to shift it negatively by half-of its size.
In gradient definition you tell where should be the center of gradient background. In left/top properties for span you set left top corner of this span.
It means that the gradient center is in the same place as a span's left top corner (You can see that on http://jsfiddle.net/cyzczvd1/4/).
You need to move span a little bit, I prepare you another fiddle:
.box {
position:relative;
width: 300px;
height: 300px;
background: -webkit-gradient(radial, 200 200, 20, 200 200, 30, from(#FCFCFC), to(#CF0C13));
}
span {
position: absolute;
left: 200px;
top: 200px;
/*
added lines below, background to see element borders, size, centering of text and
move back - you can set directly left: 180px; top: 180px; and avoid this negative margins
*/
background: red;
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
text-align: center;
line-height: 40px;
}
http://jsfiddle.net/cyzczvd1/3/
You need to use transform: translate(-50%, -50%) on the span to align it in the center. This way you won't have to worry about the font-size.
.box {
position: relative;
width: 300px;
height: 300px;
background: -webkit-gradient(radial, 200 200, 20, 200 200, 30, from(#FCFCFC), to(#CF0C13));
}
span {
position: absolute;
left: 200px;
top: 200px;
font-size: 16px;
transform: translate(-50%, -50%);
}
<div class="box"><span>a</span>
</div>
For the radial-gradient, you should use the following syntax.
background: -webkit-radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);
background: -moz-radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);
background: radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);
I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?
You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.
The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).
div {
background: red;
width: 200px;
height: 100px;
position: relative;
}
div:before {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: transparent transparent white white;
border-width: 20px 0px 0px 15px;
left: 0;
top: 80px;
}
div:after {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: white white transparent transparent;
left: 170px;
top: 0px;
}
.with-img {
background: url(http://lorempixel.com/100/100);
}
<div></div>
<br>
<div class="with-img"></div>
Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.
div {
width: 200px;
height: 100px;
position: relative;
}
.with-single-gradient {
background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}
<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>
Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.
<svg viewBox='0 0 100 60' width='200px' height='120px'>
<path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>
Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.
Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.
there's no thing as straight radius, but here you have some tutorials. For weird shapes, you need to use a combination of shape and negative space, basically using figures with the same color of the background . The good news is you could use "transparent" as color, so you can "fake" this figures in an easy way. See tutorials Shapes of CSS or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 but they will highly depend on your needs. Personally, I'd use a BG image and be a happy camper
to make this shape you have to use pseudo class.
and i hope it will help you
div { display: inline-block; margin: 20px; float: left; }
shape {
width: 208px;
height: 130px;
background: red;
position: relative; }
shape:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }
shape:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }
demo
2 gradients and background-size can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat,
linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
background-size: 50% 100%;
}
<div>
</div>
1 gradients and calc() can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}
<div>
</div>
Related to duplicate question https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius :
div {
width:980px;
height:460px;
background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
background-size:50% 100% ;
}
<div>
div shape
</div>
image
<img src="http://i.stack.imgur.com/M48zP.png" />
For the second shape use this:
border-bottom-left-radius:50px;
border-top-right-radius:50px;
Check JSFiddle Demo
Edit:
Question is edited and second shape has been removed.
You can add an element with overflow: hidden;
skew transform the parent by desired angle. Unskew the pseudoelement by the negative of that angle.
Using this approach, you can also add images to background.
div {
height: 100px;
width: 220px;
overflow: hidden;
position: relative;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
transform: skewX(45deg);
}
div:before {
content: '';
position: absolute;
left: 10px;
height: 100px;
width: 200px;
background: red;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div></div>
FIDDLE
FIDDLE (with image)
I'm trying to make a container that has an upward arrow attached to it. I am familiar with the border drawing trick and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px.
The shape I would like to make is this:
.
/ \
/ \
/ \
| flex |
| |
Where the content area can flex to different sizes as a percentage of a parent container.
Here is the CSS, with the problem area flagged:
.metric {
display: inline-block;
position: relative;
height: 150px;
width: 50%;
background: lawngreen;
}
.metric:after {
position: absolute;
top: -25px;
left: 0;
content: '';
background: white;
width: 100%;
height: 0;
border: 75px solid white; /* this fixed width is the problem */
border-top: none;
border-bottom: 25px solid lawngreen;
box-sizing: border-box;
}
Here is the jsfiddle: http://jsfiddle.net/C8XJW/2/
Do you guys know any way to pull this off?
Here is another posibility.
This one does the trick with gradient backgrounds. You need 2 of them, so that the diagonal is easily achieved:
Relevant CSS:
.metric:before, .metric:after {
position: absolute;
top: -25px;
content: '';
width: 50%;
height: 25px;
}
.metric:before {
left: 0px;
background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
right: 0px;
background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}
Updated Fiddle
The differences with Simple As Could Be solution:
Pro Transparent corners (relevant if you have a background)
Con Worse browser support
Here's one great solution. Bascially, you make the arrow always centered, and bigger than you'd ever need it, but lop off the overflow.
Here's the JSFiddle:
http://jsfiddle.net/nBAK9/4/
And here's the interesting code:
.metric:after {
position: absolute;
top: 0;
left: 50%;
margin-left: -250px; /* max expected width /2 */
content: '';
background: white;
width: 500px; /* max expected width */
height: 0;
border: 250px solid white; /* max expected width /2 */
border-top: none;
border-bottom: 50px solid #cf6; /* This size adjusts the slope of the triangle */
box-sizing: border-box;
}
Not sure you can, I played with it found that since em inherits from parents you can play a bit with it.
body{
font-size: 3em;
}
div {
width: 0;
height: 0;
border-style: solid;
border-width: 0 3em 4em 7em;
border-color: transparent transparent #007bff transparent;
-webkit-transform:rotate(360deg)
}
Fiddle
.top-arrow:before, .top-arrow:after {
position: absolute;
top: -25px;
content: '';
width: 50%;
height: 25px;
}
.top-arrow:before {
left: 0px;
background: linear-gradient(to right bottom, transparent 50%, black 50%);
}
.top-arrow:after {
right: 0px;
background: linear-gradient(to left bottom, transparent 50%, black 50%);
}
<div class="top-arrow"></div>