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.
Related
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>
Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading.
I tried something like this but it doesn't work.
body {
height: 100vh;
background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.
CSS:
#container{
height: 100vh;
background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}
body {
background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Page:
<div id="container">
// put page code in here like it was body
</div>
I want to make a simple bar with two different colors. What I want is for the 1st color to stop and the second color to start with no transition or gradient. I know it sounds dumb, gradient with no gradient!
CSS
-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);
And it produces very close results, but where the two colors meet it gets blurry because it is still doing the transition/gradient thing.
Is there a way to do perfect stops, if that's even the term?
This is my favorite gradient generator tool for CSS. There is a visual editor like photoshop and it spits out the CSS for you to copy and paste.
http://www.colorzilla.com/gradient-editor/
shortly it should be :
linear-gradient(
to top,
rgba(255,255,255,1) 60px,
rgba( 27,151,143,1) 60px
);
http://jsfiddle.net/b4j35/1/
and for chrome, it needs to overloap to avoid the blur defaut thingy thing :
http://jsfiddle.net/b4j35/2/
div.grad {
height: 100px;
background: linear-gradient(
to top,
rgba(255,255,255,1) 61px,
rgba( 27,151,143,1) 59px
);
border:solid;
}
What you have is already a no-transition gradient, since the end of the white and the beginning of the greenish are both at 60px. So, you can not do it better this way.
The way that is left is the multiple-background way:
div.grad {
height: 100px;
background: linear-gradient(to top, white, white), rgb(27,151,143);
background-size: 100% 60px;
background-position: left top;
background-repeat: no-repeat;
}
fiddle
By the way, I have changed the linear-gradient to the prefix-less version, it works like this in most modern browsers
I am new to css and trying to draw in 3 separate parts of a single box. The box is defined like this in CSS:
#nutrients .row .values li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
I want to be able to do this:
<li><span class="min_graph" style="background:green" height="32%">
<span class="normal_graph" style="background:red" height="22%">
</li>
where the min part would be the bottom third, the normal part would be the middle third, and the max part would be the top third.
I tried this in the CSS:
#nutrients .row .values li span .min_graph {
vertical-align:bottom;
}
#nutrients .row .values li span .normal_graph {
}
#nutrients .row .values li span .max_graph {
vertical-align:top;
}
but clearly I'm not understanding how to focus on the 3 different sections of the box.
Thanks...
========
Thanks so much for all the help! I didn't explain this well enough.
I do want to use div. There are basically 3 sub boxes, the lower (min), the middle (normal), and the top (max).
I want "#nutrients .row .values li" to be the parent element.
Then, the min graph piece would be the bottom 21px; the normal graph would be the middle 21px; and the max graph piece would be the top 21px.
Then, within the bottom 21px (for example), I might want to fill 30% of it, or 50% of it, etc.
Cell 1:
min graph piece - red, 21% of its full height of the bottom third
normal graph piece - white, and no text (the middle third)
max graph piece - white, and no text (the top third)
Cell 2:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 46% of its full height (the middle third)
max graph piece - white
Cell 3:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 100% of its full height (the middle third)
max graph piece - green, and 46% of its full height
In other words, the percentages cannot go into the CSS definition file. The HTML has to be able to set the percentages.
But the CSS does need to allow me to write to the individual three pieces of the parent box.
I need to understand how to make "#nutrients .row .values li" into a parent div.
Ideally, you would want to use <div> elements to accomplish this, as <span> elements are not serving their intended purposes here. I'll go over accomplishing this both ways.
<div> Implementation:
CSS:
/* To use %-based heights, the parent element must have a defined height */
.values { height: 500px; width: 100%;}
.min_graph { background:green; height: 32%;}
.normal_graph { background:red; height: 22%;}
.max_graph { background:yellow; height: 22%;}
HTML:
<div class='values'>
<div class="min_graph">TEST</div>
<div class="normal_graph">TEST</div>
<div class="max_graph" >TEST</div>
</div>
Example
<span> Implementation
Firstly - you will need to ensure that you are closing your <span> elements and you will need to use display: block to ensure that they are visible, as shown:
CSS
#nutrients .row. values li span
{
height: auto;
width: 100%;
display: block;
}
HTML:
<li>
<span class="min_graph" style="background:green; height:32%">Test</span>
<span class="normal_graph" style="background:red; height:22%">Test</span>
<span class="max_graph" style="background:yellow; height:22%">Test</span>
</li>
Example
Check out This JSFiddle with your example. Divs inside your <li> is the way to go, as a div is a block level element that works better for your needs. You define a parent element, in this case, the <li> with the width and height that you want the whole thing to be. Then it is just a matter of defining how big and what color you want each <div> to be.
<ul id="boxes">
<li>
<div id="top">Div 1</div>
<div id="mid">Div 2</div>
<div id="bottom">Div 3</div>
</li>
</ul>
#boxes li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
#top {height:auto}
#mid {background:red; height: 32%}
#bottom {background:green; height:22%;}
You could use a css gradient to color the different sections:
I used this site: http://www.colorzilla.com/gradient-editor/
to produce this:
background: -moz-linear-gradient(top, #ff3232 0%, #ff3030 33%, #f9f227 33%, #f5f900 66%, #00ff00 66%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(33%,#ff3030), color-stop(33%,#f9f227), color-stop(66%,#f5f900), color-stop(66%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
Oh, but unless it's been changed, I don't think the iPad version of Safari accepts percentage gradients, only pixel count, so you may have to tweak that depending on your target user
I think you might be able to achieve what you are looking for more easily with a color sequence or gradient (as mentioned by Robot Woods). I found a good reference to be https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops
body {
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}
i am developing website for one political party(not client,my own purpose) using wordpress software. i am modifying theme called fresh life by theme junkie. actually i am not a front end developer, but i am putting my max efforts to change the theme styles that matches to political party flag.
First of all, website which i am modifying styles is www.ysrcong.com. political party flag URL is http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg .
i am trying to put background color of left part of the web page with 2266BB , right part of the web page with 0FBD60 and middle part of the page with white color.middle part of the website width is 950px. there is no specific widths for left and right.
i have googled and found out one solution. solution i have implemented is , i have designed one image with colors 2266BB and 0FBD60 of same width and height and color 2266BB in left and other in right.
i have set that image as background in all webpages. seems working fine in majority browsers with some small issue. issues i am facing are
1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it was left some height and that part was filled with background image
kindly please give me suggestions how to solve these two issues and also if any other effective solution to achieve this.
following code i have written.
html code
-------------------------
<body>
<div id="bg"><img src="bg.png" width="100%" height="100%" alt="">
</div>
<div id="#wrapper">
webpage content goes here.
</div>
</body>
styles i applied.
---------------------------------
body {
height:100%; margin:0; padding:0;
}
html {
height:100%;
}
#bg {
position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
background: #fff;
margin: 0 auto 0px auto;
padding: 10px 15px 0 15px;
width: 950px;
position:relative;
}
Delete the #bg div that you created for the background
Create an image 1px high by 3000 + px wide. Split the image in half with the right and left side being teh colors that you want
set the body tag in css to background: url(path/to/your/image) repeat-y center top;
Celebrate, you are finished
My inclination would be to do something like this.
HTML
<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>
With the CSS
html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}
Link here: http://jsfiddle.net/folktrash/EQE6K/
For flexibility, I would personally use css gradients like these on the body :
background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left, #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right, #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */
You could then have a "background-image" fallback for old browsers.