Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to create a website background similar to http://www.latlong.net/ but i'm not having any luck. Is this green and gray background one image or is that a green image at the top with a gray background?
I cannot find the css for the background to see what they have, it comes out all jumbled with alot of extra google maps css on it.
Can anyone see what they are doing to do the strip across the top and gray below?
Thanks!
Extracted from inspecting element with Chrome; You need:
body{
background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}
header{
background-color: rgb(215, 230, 184); /* this is #D7E6B8*/
}
Working fiddle: http://jsfiddle.net/shahverdy/NByX9/
How to find this?
Generally if you want to find out that how Html/Css of a webpage is working, the best way is to use some tools like Chrome Developer Tools instead of reading the Html/Css Files from source. There are some other tool in other browsers too.
In Chrome you need to right click on any element of the page and select inspect element.
You can find this out by using Chrome developer tools and inspecting the element:
https://developers.google.com/chrome-developer-tools/
Looks like they are styling the header element using a background color and bottom border and shadow.
header {
margin-bottom:10px;
background-color: #D7E6B8;
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
It is not an image but the background-color css attribute. You can do something like:
<header>My header</header>
with the CSS:
header { background-color: #D7E6B8 }
The body of your page can have css for the gray background:
body { background-color: #EBEDE7 }
There is no background image in that, all are css background colors and shadows.just try with the following,
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I think what you're referring to is the shadow. It's not gray, but black with a high transparency.
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
This is on <header>, which also has a solid green background-color (actually #D7E6B8).
Following classes are used in given page:
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
Related
In my application I have a custom icon with black fill and now my requirement is to change the fill color to white and and border of the smiley will be black. And the smiley icon is given below
and my code is
<div>
<i class="icon icon-smiley-face-2"></i>
</div>
Now I want the above smiley face as white filling background and border of the smiley would ne black.
Can anyone help me regarding the same
See if this works or add a custom class on the i tag. If it is not working add an !important like below (only if it doesn't work without it)
.icon-smiley-face-2{
stroke: #000000 !important;
fill: #ffffff !important;
}
You can do that by simple CSS
.icon-smiley-face-2{
color: #fff;
border:1px solid #000;
}
Check if it works. since it's your custom icon not sure how it's interact.
.icon-smiley-face-2{
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
color: white;
}
Reference - stack ref for answer
do you know how to render a gradient to color transparent in a QT QTableView?
I know I should use some CSS stuff but online I can only find the regular web CSS solution which obviously doesn't work in QT (the QT CSS is a subset of the plain CSS language so we have no -Moz extensions, no IExplorer tricks and so on...)
#resultWidget {
padding: 1px;
margin: 0px;
spacing: 0px;
border-radius:5px;
border-left: 1px solid #0080ff;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(0, 128, 255, 32), stop:1 rgba(0, 0, 0, 0) )
}
Did the trick. Result:
But I guess you meant QSS not CSS.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm not sure if I should be using overflow or something else to fix this, but would appreciate any help I could get.
Scroll to the very bottom of the page. You will see at the very bottom where there's the black div and right below that is a little white space.
How can make that white space become black and still keep the rounded corners?
You have to set your padding-bottom to 0, and set the border radius bottom to the right and the left of the s-in-mid div.
Set bottom padding of .s-inn-mid to 0
Add bottom left and right border-radius 5px to the black div.
border-radius: 0 0 5px 5px
I'd tell you it exactly in terms of classes and ids, but you are using inline styles (GROSS), so that's unfortunately not possible.
Change this:
.s-inn-mid {
padding: 7px 0px 6px 0px;
...
to this:
.s-inn-mid {
padding: 7px 0px 0px 0px;
...
FYI, this has nothing to do with overflow. You simply had padding on the bottom of your container div.
in signup.css line 293 change #fff to #000, as below, tested in chrome.
.s-inn-mid {
width: 1000px;
margin: 0;
padding: 7px 0px 6px 0px;
float: left;
background: none repeat scroll 0 0 #000;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient