I cant find out how to achieve this effect, I'm familiar with parallax effect, but how can I make this "clip-path" effect or whatever is it called, where circles are transparent so image background can be seen through it?
You can use box-shadow and border-radius
body {
background: linear-gradient(blue, lightblue);
}
html, body {
height: 100%;
}
.base {
width: 200px;
height: 200px;
overflow: hidden;
margin: 30px;
}
.inner {
width: 100px;
height: 100px;
margin: 10px;
padding: 40px;
border-radius: 50%;
box-shadow: 0px 0px 0px 1000px white;
color: white;
font-size: 40px;
}
<div class="base">
<div class="inner">TEST</div>
</div>
Related
I have the following overlapping divs:
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
border-radius: 100%;
margin-top: 30px;
}
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='circle'></div>
<div id='rect'></div>
</div>
I want to make the circle div only appear inside of the rectangle div, but I cannot put one inside the other and use overflow. How can this be achieved?
If it's only about visual, use the circle as background of the div:
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background:radial-gradient(circle 75px at 55px 105px, rgba(0, 0, 0, .3) 99%,transparent);
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='rect'></div>
</div>
This isn't very practical, but the only way to do this without changing the markup is to crop it with the parent wrapper using position: relative and overflow: hidden on the parent. Adjust the location of the circle with top: 30px and left: -20px.
The parent would also need to set the rounded corners with
border-radius: 5px.
Of course if this is just a background, then it should be set with a background radial gradient on the rectangle.
Example
#wrapper {
position: relative;
display: inline-block;
margin: 30px;
border-radius: 5px;
overflow: hidden;
}
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 30px;
left: -20px;
border-radius: 100%;
}
#rect {
width: 100px;
height: 100px;
background-color: lightblue;
}
<div id="wrapper">
<div id="circle"></div>
<div id="rect"></div>
</div>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 5 years ago.
I am making a common header and footer which will be used throughout in all the HTML pages. My page has a white header and white footer and the body is grey colored. Now, my work demands to achieve as below:
What I achieved so far is as below:
I don't know why I am getting these white strips in the sides of the body tag. Please suggest, my code is as below.
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif" />
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
That is because of the default (user agent stylesheet) margin applied by the browser on the body tag - see how the white stripes vanish when I set margin: 0 for body.
Demo below:
body {
margin: 0;
}
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif"/>
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
add body{margin:0} in your stylesheet.
By default body tag have margin of 8px in most major browsers.
body{
margin:0
}
main {
background-color: lightgrey;
padding: 50px;
}
header {
background-color: white;
width: 100%;
height: 50px;
}
.content-section {
background-color: lightgrey;
width: 100%;
}
.logo {
height: 20px;
margin: 15px 5px;
width: 116px;
}
.open-card-BG {
font-weight: 300;
margin: 0 auto;
width: 65%;
padding: 20px 40px;
object-fit: contain;
max-width: 325px;
min-height: 200px;
border-radius: 5px;
display: table;
background-color: white;
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
content: '';
position: absolute;
top: 30px;
left: 100%;
width: 30px;
height: 30px;
background: url(../secure.svg) center no-repeat;
background-size: contain;
}
<header>
<img class="logo" src="logo.gif"/>
</header>
<main>
<div class="open-card-BG">main content</div>
</main>
<footer>
I am footer
</footer>
you can try giving the main tag a margin: 0 -10px, may solve your problem.
See the fiddle
you can add this code in your css:
body {
display: initial;
}
Try the following:
html, body {margin: 0;}
I have a an image, 500 px height and width. I used border-radius to make it a circle image. I also have a solid background color that I use border-radius on to make it a circle as well.
I am trying to create an overlay on hover by reducing the opacity of the image, letting the background image peer through. I have it basically working, although there is about a 1px overlap of showing the background image on the bottom of the actual image.
Snippet:
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<div class="image-wrapper">
<img class="testing red" src="img.jpg">
</div>
As you can see from the example there is about one pixel of the background showing at the bottom of the image before any hover.
I think the issue here is that img has display: inline by default.
You can fix it by setting your img to display: block in your CSS
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-wrapper">
<img class="testing red" src="http://lorempixel.com/400/400">
</div>
Try adding this css:
.image-wrapper{
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
Here is the sample example for you question,hope this will help you.
http://jsfiddle.net/z3rLa/1/
.image-overlay {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
border:2px solid #000;
}
.image-overlay:hover {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
opacity:0.5;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSODZIzJ1LLVMxlyd4RKB8TmvAeufTRGolSlX64IagMNtWvo4ij">
</div>
I want to build the following layout:
Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed.
The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too.
What i tried:
# html
<div class="wrapper">
<h1>Das ist ein test</h1>
<h2>subheadline</h2>
</div>
#css
.wrapper {
padding-top: 100px;
text-align: center;
width: 100%;
background-color: #4d4d4d;
height: 400px;
color: #fff;
position: relative;
}
.wrapper:before{
height: 50%;
width:100%;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content:'';
display:block;
position:absolute;
top: 0;
background-color: #3d3d3d;
}
But this does not work and i can't figure it out on my own.
Thank you for your help!
You can set 2 light gradients on top of the darker background.
They overlap each other and leave only the remaining triangle darker
div {
width: 400px;
height: 200px;
border: solid 1px green;
background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}
<div></div>
Try this one, but still need some work on the responsive part.
.box{
position: relative;
width: 100%;
max-width: 600px;
background: #ccc;
min-height: 300px;
}
.box:before {
width: 0;
height: 0;
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 180px solid #555;
}
.box .content{
z-index: 10;
position: relative;
color: #fff;
text-align: center;
padding-top: 40px;
}
h1, h2{
margin: 0;
padding: 0;
}
h2{
margin-bottom: 80px;
}
.btn{
background: #f00;
color: #fff;
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
min-width: 200px;
font-size: 20px;
}
<div class="box">
<div class="content">
<h1>Headline</h1>
<h2>Headline</h2>
CTA
</div><!--// end .content -->
</div><!--// end .box -->
This should get you close, and illustrates a CSS only approach:
* {
margin: 0;
padding: 0
}
body {
background: #ccc;
min-height: 500px;
}
div {
width: 0;
height: 0;
margin: 0px auto;
border: 200px solid transparent;
border-top-color: grey;
}
a {
display: block;
background: blue;
color: white;
padding: 5px 10px;
width: 200px;
margin: 0px auto;
position: relative;
top: -200px;
text-align: center;
text-decoration: none;
}
<div></div>
link
I try to make a menu on the side of my website which rolls out when hovered on it. First I had its width expand but the text would look weird so I figured I would use CSS animation to change the position of the div such that it would move to the right. The problem I get is that those menu divs overlay the 'main' div. The only way to get these divs under the main div is to use z-index: -1 but then :hover doesn't work anymore. I have tried pointer-events: none; but that also doens't seem to work.
<div id="container">
<div id="header">
<img id="mainpic" src="pokebalicon.png" />
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>
<div id="mainpage">
text
</div>
</div>
And the CSS
#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}
#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}
#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
pointer-events: none;
}
.sidediv{
position: absolute;
left: 721px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
}
.sidediv:hover starts an animation which changes left such that it looks like it's being pulled out. But sadly nothing happens when hovering over a sidediv. Any idea how to solve this?
The hovering looks like this:
.sidediv:hover{
-webkit-animation: example 0.5s forwards;
animation: example 0.5s forwards;
}
#-webkit-keyframes example {
100% {left: 841px;}
}
#keyframes example {
100% {left: 841px;}
}
Try this
#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}
#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}
#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
}
.sidediv {
position: absolute;
left: 721px;
top: 80px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
transition: 0.7s
}
#container #mainpage:hover + .sidediv {
z-index: 1;
background: pink;
left: 0px
}
<div id="container">
<div id="header">
<img id="mainpic" src="http://i.imgur.com/IMiabf0.jpg" />
</div>
<div id="mainpage">
text
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>
</div>