I applied a css code to create a shadow on the initial part of the page (I have a social network and I would like to create the type of shadow created by Facebook on user profile pages, just to get an idea).
Everything would seem ok for some pages but not for others. That is, for short pages, the shading might be acceptable, but for long pages, the shading increases as the page length increases, almost encroaching on the page. I tried to set specific height values but without success, indeed if I set a "height" value an unwanted dividing line is created.
The code I'm using is as follows:
background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);
Some idea?
Thank you!
If you use pixel values instead of percentage values you can keep the gradient height uniform.
div {
background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
width: 100px;
}
body {
display: flex;
}
<div style="height: 100px;"></div>
<div style="height: 400px;"></div>
I want to add radial gradient to a photo, starting from the top right part of the image. I have tried a lot of combinations, here is what I managed to do:
background: radial-gradient(circle at top right, #ffffff 0%, #000000 100%), url("../images/banner-image.png");
My problem is: it doesn't show my photo. Any ideas what could be wrong?
You're using solid colors rather than colors with transparency in order to see the image below.
Use rgba colors instead
body {
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), blue), url(http://www.fillmurray.com/284/196);
height: 100vh;
}
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
I know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains how to create something more advanced than this image as background in CSS. Any ideas on how to get started?
Not my fiddle, but I found this: http://jsfiddle.net/leaverou/RtGsM/
body {
background:
-moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%),
black;
background:
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%),
black;
background-position: 0 0, 80px 80px;
-webkit-background-size:160px 160px;
-moz-background-size:160px 160px;
background-size:160px 160px;
}
I would like know how is made the shadow on bottom image, i tried to check to the source code but I not found nothing. Any idea? Thank you
example in the cover image or see in the widget friend on the your profile page under the name there is a shadow for see better the name of color white
You seem to be looking for a gradient. An option is to do this with an image, however this can be done with css as well. Check out this page. Or search Google/Bing/.. for css3 gradient.
I've made a quick fiddle of what I generated in the generator I linked that might fit your needs. You can change the background-color to whatever you want (in the example I set it to red) to show it is transparant.
background: -moz-linear-gradient(top, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 40%, rgba(43,43,43,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,43,43,0)), color-stop(40%,rgba(43,43,43,0)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b2b2b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
UPDATE
Looking at the Facebook code, it does seem that they are using an image to overlay the image. If you look at the source, you will see that a#fbCoverImageContainer.coverWrap.coverImage has two important children, the img.coverPhotoImg.photo.img, that contains the image of the background. Often this image will expand further than the height of the banner itself, since only part of the image is shown. The other important child is div.coverBorder. Looking at it's source it has following css:
background: url(/rsrc.php/v2/yJ/r/UgNUNkKQar6.png) bottom left repeat-x;
This is a 1x95px image creating the overlay.
I've fumbled around a little, getting to this fiddle. This is the code I used:
html
<div class='myHeader'>
<img src='http://lorempixel.com/output/people-q-c-747-438-1.jpg' />
<div class='coverBorder'></div>
</div>
css
.myHeader{
display:block;
position:relative;
height:315px;
overflow:hidden;
}
.coverBorder{
background: url(http://i.imgur.com/UGqidBk.png) bottom left repeat-x;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
}
If you look at the fiddle, you can clearly see that the image expands outside of the div, but the overflow:hidden; hides this. Currently the overlay extends outside of the image because the div.myHeader has no width so it gets set to 100%. Give it 500px and you will see you can easily scale it.
Create a shadow class in your css file
.shadowThing
{
box-shadow: 2px 2px 3px 2px #333;
}
Then apply it to a div (or something else) in your HTML.
<div class="shadowThing">
<!--some content here-->
</div>
Using a gradient background. I'm assuming you're talking about the homepage before you login. If you really mean shadow please be more specific.
Edit in response to comment:
Yes. That is not a shadow, but a gradient background image repeated.
background: url(background-url.png) bottom left repeat-x;
Use google image search and search for term "gradient".
This is achieved by taking a small slice of the image and repeating it as a background along the x axis.
Use the CSS box-shadow property
The syntax is:
box-shadow: h-shadow v-shadow blur spread color inset;
so use like this:
.shadow {
box-shadow: 2px 2px 2px 2px #888888;
}
See this fiddle for an example
It will look like this when applied to a block element with height and width properties set.