I know html and css very well , i'm looking for something like this with css not with images ?
is there any trick that can do this with Css ?
HTML
<div id="zone-user-wrapper" class="zone-wrapper"></div>
CSS
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
i made a fiddle
Thx
You can try something like this:
Fiddle
HTML:
<div class="zone-wrapper"></div>
<div id="shape"></div>
CSS:
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
#shape {
height: 20px;
background-color: white;
border-top-left-radius: 5000px 300px;
border-top-right-radius: 5000px 300px;
top: -20px;
position: relative;
}
<------------------------------------------------------------ Edit ------------------------------------------------------------->
Replicating the one on this website as you requested.
Here, I've added the border-top-left-radius: 4000px 150px and border-top-right-radius: 4000px 150px; to .content and .seperator. Then, gave appropriate z-index to all elements. .content has the highest z-index value, .zone-wrapper has the lowest z-index value and .seperator is in the middle.
<--------------------[ Fiddle | Full Screen Demo | With the Image from your website ]-------------------->
HTML:
<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>
CSS:
body {
margin: 0 0;
}
.zone-wrapper{
background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;
height:180px;
z-index: 0;
}
.seperator {
height: 50px;
background-color: #00533D;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #93fbdf;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 2;
}
The Flexible Option with a single HTML element
I have focused on creating the shape with a:
single HTML element — <header></header>
flexible percentage units
The CSS
The :before and :after pseudo elements overlap to create the curve
The pseudo elements are given 100% width and will expand and retract
The box shadow helps smooth out the jagged curve and the textured background image distracts the eyes from the remaining jagged pixels
The left: -20px and padding-right: 20px hide the rounded corner and are cut-off with overflow: hidden
Image Attribution: The background image used in the example below is obtained from transparenttextures.com and was created by Atle Mo.
The Example
Open full-screen and watch it re-size.
body {
margin: 0;
}
header {
background: url(http://i.stack.imgur.com/TIgas.png);
height: 80px;
position: relative;
overflow: hidden;
}
header:after,
header:before {
content: '';
display: block;
background: #FFF;
height: 60%;
width: 100%;
position: absolute;
border-radius: 100% 100% 0 0;
top: 50%;
left: -20px;
padding: 0 20px;
box-shadow: inset 0 0 2px #333;
}
header:before {
background: #333;
margin-top: -5px;
}
<header></header>
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
border-radius: 40px 40px 40px 40px;
overflow:hidden;
}
.zone-wrapper2{
margin-top:10px;
display:inlin-block;
background: black;
height:130px;
border-radius: 40px 40px 40px 40px;
}
<div id="zone-user-wrapper" class="zone-wrapper">
<div id="div2" class="zone-wrapper2">
</div>
</div>
The trick is to have 2 divs. The first could be your actual header and another just beneath it having a border-radius property. So your whole header could be a wrapper around the 2.
Did some tinkering to the html of your code.
Added a div in the main header wrapper.
Check the image below:
Hope it is of help.
You can use something like this from (https://stackoverflow.com/a/4777943/3905567):
<div id="header">
<div id="cover-left"></div>
<div id="cover-right"></div>
</div>
http://jsfiddle.net/p2hH7/215/
Related
I'm trying to replicate a design using CSS, a simplified example of this is below:
The pink background should be 50% opacity, however the blue offset shadow/border should be 100% opacity.
I can do the general shapes but not in a way to achieve the desired transparency.
Here is an attempt I made:
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
}
.content-wrap {
position: relative;
z-index: 1;
filter: drop-shadow(13px 15px 0 rgb(0,255,255));
width: 60%;
height: 100%;
}
.content {
clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
background: rgba(255,0,255, 0.5);
height: 200px;
}
.background {
z-index: 0;
position: absolute;
top: 20px;
left: 0;
background: black;
width: 500px;
height: 90px;
margin-top: 50px;
}
<div class="container">
<div class="content-wrap">
<!-- Blue -->
<div class="content">
<!-- Pink -->
</div>
</div>
<div class="background">
<!-- Black -->
</div>
</div>
A couple of aspects are not quite right:
The drop-shadow is visible through the pink, it should just be outside of the element.
The blue should extend to the left-hand edge.
The blue is transparent when I have not assigned it to be, it seems to be related to the child element's background being transparent.
Are there any CSS masters who can figure out a way to do this? The HTML can change if needed.
a box-shadow with skew transformation can do the job here. I am using pseudo-element for the sake of the demo but you can replace them with real elements
.box {
margin: 10px 0;
display: flex;
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: 30% 0;
background: black;
}
.box::after {
content: "";
height: 200px;
width: 50%;
transform-origin: top;
transform: skew(-20deg);
background: rgb(255 0 255/80%);
box-shadow: 25px 25px 0 blue;
}
body {
margin: 0
}
<div class="box">
</div>
I need to create a div with the top left and right border with different heights, with a radius of 50px at each top end respectively, plus a linear gradient background color.
Do you know if it is possible to create it with CSS and HTML?
Thanks for your comments.
It should look like below:
You'll need 2 divs for this, with 1 nested in the other.
Rotate the child element using transform: rotate(deg) and hide the overflowing sides by applying overflow:hidden to the parent.
.parent {
background-color: #E6E6E6;
width: 200px;
height: 200px;
overflow: hidden;
padding-top: 8px;
}
.child {
height: 222px;
width: 217px;
margin-left: -10px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 25px 25px 0px 0px;
transform: rotate( -6deg);
}
<div class="parent">
<div class="child">
</div>
</div>
Yes, with a lot of manipulation (building on the other answer but closer to the example):
We need three divs. The outer one is the wrapper (invisible). The second one is the one with "different heights" and a gradient, which is rotated to give the "different heights" illusion. Finally, we have another div that's almost the same as the second one but fills in the empty space caused by the rotation of the second one.
#wrapper {
height: 500px;
width: 300px;
background-color: transparent;
position: relative;
overflow: hidden;
}
#f {
position: absolute;
width: 100%;
height: 150%;
top: 20px;
left: 18px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 10px 25px 0 0;
transform: rotate(-3deg);
}
#g {
position: absolute;
width: 100%;
height: 150%;
top: 50px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
}
<div id="wrapper">
<div id="f"></div>
<div id="g"></div>
</div>
I Designed a measurement card where the profile image is cutted out by an half elips, i tried several methos (svg mask, svg clipping), but all these methods didn't work. Specially on Safari.
Does anyone has an idea how to realize this layout?
Here is the SVG Half Circle if it helps ya
SVG CIRCLE
You can use the border radius to achieve this layout:
If you want an elliptic shape you have to oversize the clipping element and place the image offsetted inside it:
document.getElementById('button1').addEventListener('click', function(){
document.getElementById('profile').classList.toggle('view');
});
.profile{
background: #1111cc;
width:300px;
height:100px;
position:relative;
overflow:hidden;
margin: 20px;
}
.clip{
position:absolute;
background: red;
width: 100px;
height:130px;
top: -15px;
border-top-right-radius: 50px 65px;
border-bottom-right-radius: 50px 65px;
overflow:hidden;
}
.img{
position: absolute;
top: 15px;
background: rgba(100,100,100,0.8);
width:100px;
height:100px;
}
.name{
position: absolute;
bottom: 15px;
margin: 0;
padding: 0 10px 0 0;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
width: 100px;
}
.profile.view .clip{
overflow: initial;
}
.profile.view{
overflow: initial;
}
<div id="profile" class="profile">
<div class="clip">
<img class="img" src="https://i.stack.imgur.com/oiszU.png">
<p class="name">My name is too long for this world..</p>
</div>
</div>
<button id="button1">view all shapes</button>
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>
I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.
So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.
.app.center {
height: 40px;
width: 28px;
z-index: 5000;
border-radius: 3px;
box-shadow: 0 0 0 3px white;
}
See this fiddle for my entire CSS.
Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.
I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.
Yes, this is basically impossible. That's why I am trying to provide an answer :-)
My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.
The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background
.bkg {
width: 200px;
height: 200px;
border: solid 1px black;
background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}
.button {
width: 100px;
height: 100px;
border-radius: 20%;
border: solid 10px gray;
position: absolute;
font-size: 80px;
}
#bt1 {
left: 40px;
top: 20px;
background-color: red;
}
#bt2 {
left: 80px;
top: 90px;
background-color: rgb(255,0,255);
}
.panel {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
mix-blend-mode: hard-light;
}
<div class="bkg"></div>
<div class="panel">
<div class="button" id="bt1">-1-</div>
<div class="button" id="bt2">-2-</div>
</div>
If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.
The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.
Example:
* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
position: relative; background-color: #444;
left: 200px; top: 100px; height: 100px; width: 200px;
border-top-right-radius: 100px; border-top-left-radius: 100px;
text-align: center; padding-top: 10px; color: white;
}
.app {
position: absolute; transform-origin: center 75px; background: #cc4489;
border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
transform: scale(0.9) rotate(-30deg);
background: #adabae; top: -72px;
}
div.sphere > .app:last-child {
transform: scale(0.9) rotate(30deg);
background: #79787a; top: -72px;
}
.app.center {
height: 64px; width: 52px; z-index: 5000;
background-clip: padding-box; background-origin: padding-box;
border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
border-width: 5px;
}
<div class=" sphere">
<div class="app"></div>
<div class="app center">3</div>
<div class="app"></div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/
As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/
Disclaimer: This is faux clipping. clip-path and mask could be better put to use.