Black line between cover-img and cover-body - html

I used a cover image to fill the sidebar, but there's a black line appearing between the cover image that is not filled with the body and cover body itself. You can see it in action here. I'm pretty sure it's not the border or anything.
Thanks!
HTML
<aside id="sidebar">
<div class="cover-img">
<div class="cover-body">
<div class="logo" style="margin-bottom:30px;">
CSS
.cover-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
-moz-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
box-shadow: 1px 0 1px rgba(0,0,0,0.15);
}
.cover-body {
position: absolute;
bottom: 0;
padding: 50px 10% 10%;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cover-body:before {
content: '';
position: absolute;
top: -80px;
right: 0;
bottom: 0;
left: 0;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -moz-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
background-image: linear-gradient(to top,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
}
.cover-body {
padding-top: 20px !important;
padding-bottom: 0 !important;
}

You have a box-shadow on .about-blog-author that's what's doing it:
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
Remove it or change -1px to 0

Its your box-shadow that you specify in the .cover-image class. You can remove it or adjust your code and designs accordingly so that you don't see it there.
Try removing the box-shadow property, and you'll see that that line disappears.

Related

Inset box shadow faded/transparent on the left and right edges

I am trying to add an inset box shadow that has transparency/fades out on the left and right edges of a div. I managed to add a normal inset box shadow but I don't know how to add transparency to the edges. How can I do this?
Here's an example of what I'm trying to achieve.
.container {
height: 300px;
width: 300px;
box-shadow: rgb(178, 169, 169) 0px 8px 8px -8px inset, rgb(178, 169, 169) 0px -8px 8px -8px inset;
<div class="container">
</div>
I managed to do it using radial-gradient. Check this fiddle
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.banner{
width: 100%;
padding: 30px;
background: #eee;
position: relative;
}
.banner::before{
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 75%);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 15px;
z-index: -1;
}
<div>
<div class="banner"></div>
</div>

CSS3 shadow like image

How to create pages similar to a book shadows, using two divs and CSS3? Equal in the image that follows attachment.
I tried using box-shadow with inset but it worked.
box-shadow: inset -5px -5px 5px #888;
Thank you.
You can use linear gradient:
.leftPage{
background: linear-gradient(to right, #fff 92%, #9f9f9f 100%);
}
.rightPage{
background: linear-gradient(to left, #fff 95%, #898989 100%);
}
example -> jsfiddle
Here you go http://jsfiddle.net/DhgY8/1/
HTML
<div class="book">
<div class="left page"></div>
<div class="right page"></div>
</div>
CSS
.book {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: silver;
}
.left {
box-shadow: 6px 0 2px 1px black, -8px 0 6px grey inset;
z-index: 3;
left: 0;
}
.right {
right: 0;
}
.page {
background: white;
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
It's not perfect, but it's pretty close to what you want :)

HTML/CSS: Bottom of body cut off

Maybe it's too late at night.. I'm not sure, but I can't figure out why the bottom of my body is cut off. I've tried playing around with margins/padding, but nothing is working the way it should.
I originally used an ID on my body element, but then decided to add an extra DIV and that's when it broke.
It gets cut off at 601px, which makes me think my margins are off, but I can't tell. I'd like the <div ID='index'> to fill the entire page, but it's not.
Live Example: http://jsfiddle.net/QbUKN/1/
CSS:
body {
margin: 0;
padding: 0;
}
#index {
background: url(../img/bamboo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#b0c4de;
/*
position: absolute;
width: 100%;
height: 100%;
z-index:-1; */
}
#profile {
background: url(../img/lime.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bird {
z-index: 0;
position: fixed;
bottom: 0;
left: 0;
}
/******** WELCOME PAGE ********/
#indexContent {
padding-top: 150px;
}
#welcome {
margin-left: 15%;
margin-top: 150px;
text-align: center;
vertical-align: middle;
float:left;
width: 40%;
z-index: 1;
}
#welcome h1, h2 {
color: white;
font-family: 'Poller One', cursive;
}
#login, #signup {
margin: 10px 60%;
background-color: #FCFAEE;
padding: 0 25px 20px 15px;
border:1px solid;
border-radius: 15px;
width: 300px;
position: relative;
z-index: 1;
/*Box shadow to make div look like it is popping off screen
-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px rgba(0,0,0,0.75); */
}
#login h3, #signup h3 {
border-bottom: 1px solid;
padding-bottom: 10px;
border-color: #D8D8D8;
margin-bottom: 10px;
}
#login .button, #signup .button {
width: 104%;
}
.textField{
margin: 3px 0px;
padding: 5px;
width: 100%;
}
/******** PROFILE ********/
.fillPage {
height: 100%;
margin: 0;
padding: 0;
}
#profileContent {
/*background-color: rgba(255,255,255, .50);*/
background-repeat:repeat;
min-height: 100%;
margin: 0 20% 0 20%;
overflow: hidden; /* Removes background-color gap at end of page in IE */
min-width: 600px;
}
#username {
float: left;
line-height: 1.5em;
}
#logout {
float: right;
margin-right: 25px;
}
#left {
width: 250px;
float: left;
position: fixed;
}
#right{
margin-left: 290px;
margin-right: 50px;
}
#left, #right {
padding-top: 70px;
}
.clear{
clear: both;
}
#stickyNav {
position: fixed;
font-size: 1.5em;
color: white;
background: black;
z-index: 1000;
min-width: 100%;
padding: 10px;
}
.menuItem {
margin: 0px 10px 10px 10px;
background-color: #FCFAEE;
padding: 10px;
border:1px solid;
border-radius: 15px;
width: 100%;
position: relative;
z-index: 1;
-webkit-box-shadow: 2px 2px 0px black;
-moz-box-shadow: 2px 2px 0px black;
box-shadow: 2px 2px 0px black;
}
textarea {
width: 100%;
margin-bottom: 5px;
vertical-align: top;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
overflow: auto;
}
/******** Button Effects ********/
.button {
width: 100%;
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:normal;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.button:active {
position:relative;
top:1px;
}
HTML:
<div id="index">
<div id="indexContent">
<div id="welcome">
<h1>Welcome!</h1>
<h2>MORE STUFF</h2>
</div>
<div id="login">
<form name="login" action="users/profile" method="post">
<h3>Please Sign In</h3>
<input class="textField" type="text" name="email" placeholder="Username or Email"/><br/>
<input class="textField" type="text" name="password" placeholder="Password"/><br/>
<input class="button" type="submit" value="Sign In"/>
</form>
</div>
<div id="signup">
<form>
<h3>Sign up</h3>
<input class="textField" type="text" name="name" placeholder="Full Name"/><br/>
<input class="textField" type="text" name="email" placeholder="Email"/><br/>
<input class="textField" type="text" name="password" placeholder="Password"/><br/>
<input class="button" type="submit" value="Sign Up" />
</form>
</div>
</div>
<div id="bird">
<img src="img/parrot.png" alt="Parrot" />
</div>
</div>
If you want your background to fill the entire page, you should leave your background styles on body. In your index div, you only have 601px of content in height, that's why your background cuts off at 601px.
Edit: this might be what you want.
html {
height: 100%;
}
body {
height: 100%;
}
#index {
height: 100%;
}
fiddle
Adding bottom padding to your existing #indexContent would be the simplest solution.
#indexContent {
padding-top: 150px;
padding-bottom: 150px;
}
#indexContent {
padding-bottom: 100px;
padding-top: 150px;
}
#bird {
bottom: 0;
height: 100px;
left: 0;
position: fixed;
z-index: 0;
}
'#indexContent' div's padding-bottom should be equal or higher than '#bird' div height
Your code works perfectly fine. Just add a small change on id 'index' and 'bird'.
#index {
Display : table;
background: url(../img/bamboo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#b0c4de;
width:100%;
height:100%;
position: relative;
}
#bird {
position:fixed;
bottom: 0;
left: 0;
}

Add CSS inset box-shadow to parent element over the top of a child image

I'm trying to add shadow to the parent object where an child <img> element is positioned inside it. I wan the inset shadow to overlap the image.
My HTML code is:
<section class="highlights">
<img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->
and CSS:
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
The shadow is not appearing for me. What did I do wrong?
The problem is that the image is rendered over the top of the inset box-shadow.
There are 2 possible ways I can think of doing this, one using opacity on the <img> to push it behind the shadow and the second way to position the inset shadow over the top of the image. I prefer the second approach because the full opacity of the image can be retained.
Note: I have made the border large and red for demonstration.
Solution 1 demo
HTML
<section class="highlights">
<img src="http://lorempixel.com/500/360/city/1/" alt=""/>
</section>
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
opacity: .9;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
}
Solution 2 demo
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
}
.highlights::before {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}

Using the Z-index in CSS

I have 3 divs. I am trying to place the #cover div behind the #cover-overlay div which should be behind the #user-stuff div. I can't seem to get my z-index to work quite right. What am I doing wrong?
JSFIDDLE: http://jsfiddle.net/BafSL/1/
My CSS:
#cover {
position: relative;
height: 350px;
width: 920px;
/* background: url('http://images.nationalgeographic.com/wpf/media-
live/photos/000/621/cache/praia-dos-tres-irmaos-beach-portugal_62194_990x742.jpg') no-
repeat center center; */
background: url('https://sphotos-b.xx.fbcdn.net/hphotos-
ash4/486464_10150990114607410_529660447_n.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
#cover-overlay {
position: absolute;
top: 0px;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0,
0.54902) 100%);
background-origin: padding-box;
background-size: auto;
bottom: 50px;
color: rgb(51, 51, 51);
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
height: 200px;
line-height: 16px;
position: absolute;
text-align: center;
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
width: 100%;
z-index: 10;
}
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
z-index: 20;
}
z-index only works on positioned elements, so you need to add a position to your user-stuff div.
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
position:relative;
z-index: 20;
}
jsFiddle example
There is no position in #user-stuff:
#user-stuff {
margin: 0px 0px 0px 0px;
padding: 40px 0px 20px 10px;
height: auto;
width: 400px;
z-index: 20;
position: relative;
}