I would like to create something like on attached image using only CSS. Until now I have come-up with:
.block5-header:after {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat;
background-size: contain;
}
But this solution requires to use a lot of different png images, as i have many different sizes of header blocks. I have tried to use pseudo elements with radial gradients, but to no avail. If there is some simpler solution please let me know ;)
Pic of what i would like to achieve. http://i.imgur.com/pwN54o1.png
Alright, I used css position, circles, and rgba.
Pure CSS Solution (Fixed width)
It is also responsive to width changes
HTML
<header class="subNav">
<span class="headCirc"></span>
Something
</header>
CSS
.subNav {
width: 285px;
height: 60px;
overflow: hidden;
background: #4679bd;
display: block;
position: relative;
left: 30px;
top: 30px;
line-height: 60px;
font-size: 20px;
color: #fff;
padding-left: 15px;
border-radius: 10px 10px 0 0;
}
.headCirc {
position: absolute;
top: -30px;
left: -5%;
display: block;
width: 110%;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
What I did was positioned the circle absolutely inside of the header, I then gave the header an overflow: hidden to hide anything of the circle that came out of the box.
You wont be able to get the curved line but if you don't mind that you can try out http://www.colorzilla.com/gradient-editor/
Related
I'm trying to implement this design using CSS and HTML:
As you can see. There is an image of dog, and on top of it is a div with text "Dog". The div blurs the part of the image it covers. So I tried this:
html:
<div>
<img class="profile" src="source.png" />
<div class="profile-name">Dog</div>
</div>
CSS:
.profile-name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
// filter: blur(1px); // Does not work since it actually blurs the actual name, not the image underneath
}
As you can see, the image beneath the div is NOT blurry. How would I go about making the underneath image blurry using proper techniques? I would appreciate any help. Thanks!
You can use backdrop-filter to apply a filter behind an element: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
.profile-name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(1px);
}
You don't need opacity or filter, just use:
background-color: #00000050;
50 is 50% transparent of black. You can adjust it to get expected result.
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 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/
I'm trying to use 'bakground-position' in the background of my div, but not working.
When background an image, the 'background-position' works, but with 'background-color' is not working.
What can I do?
This is my CSS:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-color: #000000;
background-position: right 50px;
}
You can provide an background-image as a solid color, creating a monochrome gradient:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-image: linear-gradient(#000, #000);
background-position: right 50px;
background-repeat: no-repeat;
}
The gradient is fully compatible with an image, and if you set both colors to the same, it is fully equivalent to a solid color
demo
You can workaround with a div only for background, simulating it by mixing position: absolute offsets and negative z-index.. (Though I've tested only in chrome)
See fiddle
HTML
<div id="defaultContentParent">
<div id="defaultContent"></div>
<div id="defaultContentContent"><div>
</div>
CSS
#defaultContentParent {
border: 1px solid #00f;
background-color: #aaa;
color: #fff;
position: relative;
width: 200px;
min-height: 140px;
margin: 0 auto;
z-index: 0;
}
#defaultContent {
background-color: #000000;
height: 50px;
position: absolute;
top: 50px;
right: 0;
width: 80px;
z-index: -1;
}
#defaultContentContent {
z-index: 9999;
}
You can't position a background-color property, since that property fills the entire space. Likewise, you can't use background-color with a background image, because that would, basically, replace your background image with the filled background-color, at which point there is no reason to use a background image at all!
Are you perhaps thinking of using a gradient, or giving a background image a filter of a certain filter? That would be a different question.
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/