Is a gradient like this is possible with pure CSS3? I haven't found a way to create the "swirl".
If you set a pseudo element with a style similar to this, and some transparency applied, I think that you can achieve your request
.test {
height: 400px;
width: 400px;
position: relative;
border-top-left-radius: 180px 250px;
margin: 100px 200px;
box-shadow: -15px -15px 60px -20px lightgreen,
inset 10px 10px 15px -10px lightblue;
}
<div class="test"></div>
I have a prototype going using box-shadows:
.box {
width: 500px;
height:200px;
background: linear-gradient(to right, #50bcf3 , #60ec94);
overflow: hidden;
}
.box:before, .box:after {
content: "";
height: 100%;
width: 200px;
display: block;
position: relative;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.box:before {
left: 200px;
top: 100px;
box-shadow: -30px 0 40px -10px #60ec94;
transform: skewX(-10deg);
}
.box:after {
left: 200px;
top: -300px;
transform: skewX(-10deg);
box-shadow: inset -40px 0 70px -30px #60ec94;
}
<div class="box"></div>
Related
How do you achieve this kind thing on the bottom of a div in CSS?
I try
&:before {
content: '';
position: absolute;
z-index: 2;
width: 133.93px;
height: 93.63px;
border-radius: 5px;
border: 1px solid #ffffff;
box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
background-image: $gradeint;
text-align: center;
transform-origin: center;
transform: rotateZ(45deg);
top: -10%;
right: 0;
}
but that not something I want
You can achieve something like the shape using the clip-path property. Here's an example.
The purple area actually covers the whole container, but the clip-path set on it clips it to the polygon defined by the points 0 0, 100% 0, 35% 60%, 0 0 where 0, 0 is the top-left corner of the container and 100%, 100% would be the bottom-right corner.
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
display: flex;
}
.accent {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: purple;
clip-path: polygon(0 0, 100% 0, 35% 60%, 0 0);
}
.image {
width: 125px;
height: 125px;
background-color: lightgray;
border-radius: 125px;
margin: auto;
z-index: 1;
}
<div class="container">
<div class="accent"></div>
<div class="image"></div>
</div>
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves:
Although the bottom part of this image I think portrays it in better imagery.
My Code
My Current Attempt to generate this shape was using pseudo elements and overflow: hidden, although this does not allow for a gradient background (would require a plain background):
Attempt 1 - Using Pseudo Elements with overflow hidden
.bottom {
height: 300px;
width: 300px;
background: lightgray;
position: relative;
overflow: hidden;
margin-top:-150px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.bottom:before, .bottom:after{
position: absolute;
content: "";
background: white;
}
.bottom:before {
height: 150%;
width: 150%;
top: 50%;
border-radius:50%;
left: -45%;
}
.bottom:after {
height: 200%;
width: 100%;
bottom: -40%;
border-radius:50%;
left: 90%;
}
<div class="bottom"></div>
Attempt 2 - Using Pseudo Elements with 's' shape
.bottom {
background: lightgray;
width: 300px;
height: 300px;
position: relative;
overflow:hidden;
color:white;
border-radius:0 100% 0 100%;
}
.bottom:before{
content:"S";
position:absolute;
height:100%;
width:100%;
top:-100%;
left:-75%;
font-size:60em;
font-family: 'arial';
}
.bottom:after{
content:"S";
position:absolute;
height:100%;
width:100%;
top:-150%;
left:-75%;
font-size:60em;
font-family: 'arial';
}
<div class="bottom"></div>
Attempt 3 - extra elements and box shadows
I also have recently tried using box shadows and extra elements (which i would be ok with), but even then, I can't create it properly:
.bottom {
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.bottom-left {
position:absolute;
top:50%;
left:-50%;
height:100%;
width:100%;
border-radius:50%;
box-shadow: inset -35px 35px 0px -24px rgba(50, 50, 50, 1);
z-index:8;
background:white;
}
.top {
position:absolute;
height:100%;
top:-35%;
left:0;
width:50%;
border-radius:50%;
z-index:8;
background:gray;
box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
}
.top-right {
position:absolute;
top:-80%;
left:45%;
height:120%;
width:100%;
border-radius:50%;
box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
border:20px solid gray;
}
.bigone {
position:absolute;
top:0;
left:-20%;
height:105%;
width:100%;
border-radius:50%;
box-shadow:inset -35px -35px 0px -24px rgba(50, 50, 50, 1);
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-transform-origin:center center;
transform-origin:center center;
background:gray;
}
<div class="bottom">
<div class="bottom-left"></div>
<div class="top"></div>
<div class="top-right"></div>
<div class="bigone"></div>
</div>
None of these approaches seem to allow the generation of this double curved shape easily, and would require a 'block coloured background'
Note: I would be reluctant to resort to SVG since I have 90% of the 'overall shape' completed using just pure css, so It would be good/nice to complete this without an svg element
The internal shape would be a block color, but the border isn't compulsory/critical in my design.
this is where I would like to add it to
Update
This is closest I've been able to get
Considering :
the amount of code needed
the hassle of aligning double curves
CSS doesn't seem to be the way to go here and SVG way more appropriate. To illustrate, see these two snippets :
SVG
DEMO
/*** FOR THE DEMO **/
svg{
display:block;
width:70%;
margin:0 auto;
opacity:0.8;
}
body{
background: url('http://lorempixel.com/output/people-q-g-640-480-7.jpg');
background-size:cover;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 80">
<path stroke-width="1" stroke="#000" fill="grey" d="M95 5 Q70 20 70 38 T50 65 Q55 50 30 40 T5 5z"/>
</svg>
CSS
DEMO (consider I only made one double curve on the right side of the shape)
.ghost {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.ghost:before,
.ghost:after {
content: '';
position: absolute;
}
.ghost:before {
bottom: 0;
right: 50%;
width: 70%;
height: 30%;
transform-origin: 100% 100%;
transform: skewY(30deg) rotate(20deg);
box-shadow: -100px -100px 0px 99px #656565;
border-top-right-radius: 30% 100%;
}
.ghost:after {
top: 0;
right: 0;
transform-origin: 100% 0;
transform: skewX(-10deg) rotate(-20deg);
box-shadow: none;
height: 107px;
width: 173px;
border-top-left-radius: 90% 100%;
box-shadow: -30px -30px 0px 29px #656565, 60px -110px 0px 109px #656565;
}
<div class="ghost">
</div>
Note that I didn't list out the advantages of using an svg in this case (responsiveness, quality of output, curve control, border, border color/opacity, fill colour/opacity, transparency, maintainability, amount of time to build the shape...)
You should use boxshadows and overflows to make that shape.
body {background:url('http://whofortedblog.com/wp-content/uploads/2013/01/33c9f33218a6cab6054375fb76129a80.jpeg');
background-size: cover;}
div {
height: 100px;
width: 200px;
overflow: hidden;
position: relative;
-webkit-transform: scale(1,1.1);
-moz-transform: scale(1,1.1);
-ms-transform: scale(1,1.1);
-o-transform: scale(1,1.1);
transform: scale(1,1.1);
}
div:before {
height: 80px;
width: 100px;
border-radius: 50% / 50%;
box-shadow: 40px -11px 0 -20px white, 42px -22px 0 -10px white, 50px -28px 0 -8px white, 36px -95px 0 20px white;
content: "";
position: absolute;
-webkit-transform: scale(0.9,1.1);
-moz-transform: scale(0.9,1.1);
-ms-transform: scale(0.9,1.1);
-o-transform: scale(0.9,1.1);
transform: scale(0.9,1.1);
top: 50%;
left: -10px;
}
div:after {
height: 70px;
width: 120px;
border-radius: 50%;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
box-shadow: ;
content: "";
position: absolute;
top: -1%;
box-shadow: -1px -28px 0 5px white;
right: -35px;
}
<div></div>
You can certainly improve this version using good position values!
In any case, you should almost never use this solution. the best option in my opinion would be a png image or SVG.
Working:
div {
height: 100px;
width: 200px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
div:before {
height: 80px;
width: 100px;
border-radius: 50% / 50%;
background-color: red;
box-shadow: 40px -9px 0 -20px blue, 42px -20px 0 -10px pink, 50px -25px 0 -8px plum, 37px -95px 0 20px green;
content: "";
position: absolute;
top: 50%;
left: -10px;
}
div:after {
height: 70px;
width: 120px;
border-radius: 50%;
background-color: rgba(255, 215, 0, 0.6);
-webkot-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
box-shadow: ;
content: "";
position: absolute;
top: -1%;
box-shadow: -4px -27px 0 5px rgba(0, 255, 215, 0.6);
right: -44px;
}
<div></div>
I would like a div to look like this:
but would only like to use CSS, how would I go about creating a shape like this?
Do I create custom border for the top and bottom?
You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL
The code from the website:
HTML
<!-- Lets create a CSS3 stamp -->
<div class="stamp">
<!-- the image -->
<img src="http://thecodeplayer.com/uploads/media/css3logo.png" />
</div>
CSS
*{margin: 0; padding: 0;}
body {
background: #B1d202;
padding: 100px;
text-align: center;
}
.stamp {
width: 280px;
height: 180px;
display: inline-block;
padding: 10px;
background: white;
position: relative;
-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient(
transparent 0px,
transparent 4px,
white 4px,
white
);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
}
.stamp:after {
content: '';
position: absolute;
/*We can shrink the pseudo element here to hide the shadow edges*/
left: 5px; top: 5px; right: 5px; bottom: 5px;
/*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
/*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
/*pushing it back*/
z-index: -1;
}
/*Some text*/
.stamp:before {
content: 'CSS3';
position: absolute;
bottom: 0; left: 0;
font: bold 24px arial;
color: white;
opacity: 0.75;
line-height: 100%;
padding: 20px;
}
.stamp img {
}
If you want to only have the borders on the top and on the bottom of your image you can create this by using pseudo elements.
.stamp {
margin-top: 50px;
margin-left: 50px;
position: relative;
width: 500px;
height: 300px;
background: #bbb;
-webkit-filter: drop-shadow(3px 3px 1px black);
filter: drop-shadow(0px 0px 5px white);
}
.stamp:before {
position: absolute;
top: -20px;
display: block;
content: "";
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
.stamp:after {
position: absolute;
bottom: -20px;
content: "";
display: block;
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
body {
margin: 0;
background-color: #333;
}
<div class="stamp">
</div>
You could use the mask-box-image property to do this.
FIDDLE
See this html5 Rocks article on masking
<img src="http://www.html5rocks.com/en/tutorials/masking/adobe/humayun-thom-arno.jpg" />
CSS
img {
-webkit-mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
}
I tried a lot on oval shape which have cut in both sides but not able to do it please
I need code for oval shape with cut in both side..
Here's my code below:-
.demo{
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 178px;
border-radius: 694px / 208px;
z-index: 100;
position: relative;
}
Is this OK ?
HTML
<div id="oval_parent">
<div id="oval"></div>
</div>
CSS
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
DEMO.
Try this:
#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Notice the ratios in the corner values in relation to the height.
Demo - http://jsfiddle.net/XDLVx/
Change the values on css:
#demo {
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 50% / 250px;
-webkit-border-radius: 40% / 250px;
border-radius: 50% / 250px;
z-index: 100;
position: relative;
}
Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.
Here are two possible variants:
Method #01:
Use radial-gradient():
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
height: 100vh;
}
<div class="oval">
</div>
Method #02:
Create an overlay with :before or :after pseudo element.
Add border-radius.
Apply a large box-shadow with overflow: hidden on parent to hide undesired area.
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
position: relative;
overflow: hidden;
height: 100vh;
}
.oval:before {
box-shadow: 0 0 0 500px #000;
border-radius: 100%;
position: absolute;
content: '';
right: -10%;
left: -10%;
top: 10%;
bottom: 10%;
}
<div class="oval">
</div>