I want to have multiple linear gradients or opacity on the same image.
Here is what I have so far:
HTML:
<body>
<div class="container">
<div class="inner-container">
<div class="left-section"></div>
<div class="right-section"></div>
</div>
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.container{
width: 1050px;
height: 750px;
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg)
;
margin: 0 auto;
-webkit-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
margin-top: 50px;
}
.inner-container{
width: 75%;
height: 75%;
border: 1px solid white;
margin: 0 auto;
margin-bottom: 50px;
border-radius: 5px;
background-image:
linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
),
url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg);
}
From the CSS, I am calling the same image in both containers. However doing this makes the layout look weird because the image isn't consistent between the outside and inner containers. How can I use the same image to achieve the affect in the image?
Add background-position: center top to both your container and inner-container and they will line up.
Related
Hi everyone thank you for taking the time. I am trying to add the nav-bar that is out of place inside of a container. This is the HTML
<div class="container-login100" style="background-image: url('images/packages.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<div class="nav-container">
<nav class="nav-bar-outer">
<buttton type="button" class="hamburger-btn"> HERE </buttton>
</nav>
</div>
<form class="login100-form validate-form">
<!--css form content-->
And this is the CSS.
[ Nav-Bar ]*/
.nav-container{
position: absolute;
width: auto;
}
.nav-bar-outer{
background-color: #ffbf00;
padding:5px;
height:50px;
width:390px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-position: center;
background-size: cover;
position: relative;
}
.wrap-login100 {
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 390px;
background: rgba(0, 0, 0, 1);
overflow: hidden;
box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}
.login100-form {
width: 100%;
}
.p-l-55 {padding-left: 55px;}
.p-b-30 {padding-bottom: 30px;}
.p-r-55 {padding-right: 55px;}
.p-t-80 {padding-top: 80px;}
.p-b-37 {padding-bottom: 37px;}
So I think because there is padding in the black container the bar is not positioning itself like I would like to how could it fit inside the container without me having to change the padding (since the content inside would get messed up)
Please add this new CSS to your CSS file.
.wrap-login100 {
position: relative;
}
.nav-container {
position: absolute;
width: auto;
left: 55px;
right: 55px;
}
.nav-bar-outer {
width: 100%;
padding: 0;
}
In an attempt to create shadows around custom shapes, I discovered the drop-shadow filter CSS property. However after having implemented it, I realised that it slowed the website down significantly.
I am therefore searching for an alternative to gain the same effect without compromising the load speed of the page.
The main content of the site is surrounded by a shadow-box wrapper using a box shadow, but this could not be used for the end section due to the transparent part of the background.
I am trying to achieve a shadow which resembles the shadow of the shadow-box.
Here is a jsFiddle illustrating how it currently looks
and here it can bee seen on the real site
HTML
<div class="container shadow-box no-padding"></div>
<div class="container justify-content-center">
<section class="light-bg end-section" id="portfolio"></section>
</div>
CSS
.container{
width:70%;
margin:auto;
}
.shadow-box{
background:green;
height:200px;
-webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}
.end-section {
background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
z-index: 5;
height:200px;
filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}
.light-bg:before {
content: '';
position: absolute;
z-index: 3;
top: -50px;
left: 50%;
margin-left: -50px;
height: 50px;
width: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background: #c1c1c1;
}
I have a question about image positioning and sizing in DIV.
I have an image that I use in a specific DIV and I need it to cover the whole topside of the DIV. When I zoom-in the scale of the browser, instead of shrinking in the DIV, the image disappears and overflows from the right side of the DIV.
Also when I zoom-out the scale, the image is being cut-off from the bottom. I know the problem is with the Height, but I do not know how to fix it.
.main_body {
background-color: white;
margin: auto;
margin-top: 150px;
max-width: 78.3%;
height: 500px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}
.upper_main {
background-image: url("upper_title.png");
background-repeat: no-repeat;
background-size: cover;
height: 8%;
}
<div class="main_body">
<div class="upper_main">
</div>
</div>
EXAMPLE:
Why not simply use an image that take the full width of the top bar :
.main_body {
background-color: white;
margin: auto;
margin-top: 150px;
max-width: 78.3%;
height: 500px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}
.upper_main img {
width:100%;
}
<div class="main_body">
<div class="upper_main">
<img src="https://lorempixel.com/300/50/" >
</div>
</div>
Flexbox is life, Flexbox is our savior.
.main_body {
background-color: white;
margin: auto;
margin-top: 10px;
max-width: 78.3%;
height: 500px;
box-shadow: 0px 0px 15px 0px rgba(50,50,50,0.87);
display: flex;
flex-direction: column;
}
.upper_main {
background-image: url("http://lorempixel.com/1000/100/sports/");
background-repeat: no-repeat;
background-size: cover;
height: 8%;
}
.down {
outline: red dashed 2px;
flex-grow: 1;
}
<div class="main_body">
<div class="upper_main"></div>
<div class="down"></div>
</div>
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
transform:translateX(30%);
}
<div class="demo-div ">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div> </div>
</div>
When i apply translate to inner div , it comes on top of parent div.
But i want is that it should stay within parent on applying tranform.
Also i have event listener on demo-div-inner , so setting it z-index of parent div i.e. demo-div as -1 , stopped event listener from firing.
Add Another attributes margin-right at your demo-div-inner class.
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
margin-right: 66px;
transform:translateX(30%);
}
<div class="demo-div">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div>
</div>
</div>
Here is code i have tried but box shadow
div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div>abc</div>
what i need is this, , It is possible using background image but what i want to do this using css.
here is original image :
Thank you
#Prasanga Please find following code as per your requirement.
div {
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
<div></div>
You can also try this ---
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow:0px 15px 0px 0px white,0px -15px 0px 0px white, 5px 0px 8px #444,-5px 0px 8px #444;
}
<html>
<head></head>
<body>
<div ></div>
</body>
</html>
Very simple here :
div{
background: white;
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
<div>abc</div>