I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!
Related
I need to create an element with shadow like in the mockup:
http://take.ms/UdLFk
But I created only
http://take.ms/lns0J .
I have next styles:
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 2px 2px rgba(0,0,0,0.5);
}
My markup:
<div class=" shadow"></div>
So, how i can get a shadow like in mockup? I searched many articles but they did not help me.
Adding a border-radius (with a small height and a background-color that fits the shadow) to the element will give the shadow a nice rounded effect. Maybe decrease the opacity a little and you'll get pretty close. Also try using z-index: -1 to put the shadow behind the image.
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
}
<div class="shadow"></div>
I'm trying to create a box shadow for underneath my header similar to the one on the https://github.com/RaghavMangrola/the-brighton-times project-mockup.
I've already tried adding the property and value
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
but I'm unsuccessful in getting the box shadow to appear.
Could anyone tell me what am i doing wrong? https://gist.github.com/webdevchris/dd10c3e0c585ad94edb0eef793a092c5 Suggestions are greatly appreciated. Thank-You! :)
Your shadow is under your navigation now.
If you remove the background color of .topnav
.topnav {
overflow: hidden;
// background-color: #333;
width: 100%;
}
You will see what I mean. Your shadow actually is there, on it's place ( .header class )
May be you would like to use it like that ?
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
I am simply trying to achieve the same effect as in the image below*. I want the Header to have two borders, one is lighter than the other to give it an embossed feel.
Before I asked this question on here, I have already done some research and tried ideas inspired from websites like: CSS-Tricks, Daverupert ect... But they are adding Outlines - and after trying that it didn't really work on modern browsers so how about the old ones!
*Since I am now allowed to post an image at this time, please refer to this link for an image: http://postimg.org/image/4b6ne0qod/
Please take a look at my website here: leo.meeped.co.uk Look at the header - you will also notice that it has a shadow after the think border that makes it look like it's edge has been folded.
Update: I very like this folding effect, however it makes the header fade out a bit / not stand-out when you scroll down to a white or gray page - as it seem like the shadow blend with the page since they are a very relative colours. So the idea was to add anther border just under the current border to make to emphasise it's edge.
Hope my question is clear, I am looking for your opinions and help.
In case you want the HTML and CSS of my site then here it is:
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img alt="loai design studio logo" src="assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li><a class="active" href="contact.html">Contact Me</a></li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
/*HEADER////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
background-color: #FFFFFF;
border-bottom: 5px solid #E8E8E8;
width: 100%;
position: fixed;
top: 0; left: 0;
z-index: 1000;
-webkit-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
}
/*Header Content Container*/#headerContent {
padding: 0 20px;
}
/*Header Logo*/
#headerLogo {
width: 130px;
margin: 19px 0;
float: left;
}
/*Main Menu*/
#mainMenu {
float: right;
margin: 17px 0;
}
#mainMenu li {
float: left;
}
#mainMenu a {
padding: 10px 15px;
margin-left: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#mainMenu a:hover {
color: #FFFFFF;
background-color: #4E6C98;
}
#mainMenu a.active {
color: #4E6C98;
cursor: default;
}
#mainMenu a.active:hover {
background-color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
background: transparent;
}
If you simply want two borders without using CSS's outline property, why don't you simply create a border bottom for div#headerWrapper and one for div#headerContent making that of headerWrapper darker:
div#headerWrapper
{
border-bottom: solid 1px #3D9ED5;
}
div#headerContent
{
border-bottom: solid 1px #81CEFA;
background-color: #54BEFB;
}
If you want the exact appearance of your picture, you can do so by adding the following code (assuming that the part below the border should be empty):
header
{
height: 50px;
background-color: #FBFBFB;
}
If text should be inserted into the lower half of the picture, add it after the outer div (in header) and remove the height from the CSS.
Try using CSS box shadows to create "shadows". For example:
#headerWrapper {
box-shadow: 0 1px 0 rgba(255,0,0,0.8), 0 2px 0 rgba(0,255,0,0.8);
}
Each new shadow should be separated by a comma.
Does this do what you were wanting?
The browser support is pretty good for box shadows now but you might want to keep it in mind. Pretty much everything except IE8 supports it if you use all the vendor prefixes, for more info see: http://caniuse.com/css-boxshadow
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Anyone know of a way to create one of these lines (refer to image) in CSS?
Here's a rough approximation to start with. You'll need to adjust the specifics. Basically what I've done is create an overhang div, and beneath that is a div that will create a shadow with a falloff on the ends. The overhang div sits on a higher layer so you only see the edge of the shadow.
Demo:
http://jsfiddle.net/X5muV/
Another one, slightly darker: http://jsfiddle.net/X5muV/1/
HTML:
<div id="container">
<div id="overhang"></div>
<div id="falloff-shadow"></div>
</div>
CSS:
#container {
background: #5A5A5A;
width: 700px;
padding: 200px 0 80px 0px;
}
#overhang {
background: #5A5A5A;
border-top: 1px solid #666;
height: 80px;
width: 600px;
margin: 0 auto;
position: relative;
z-index: 5;
}
#falloff-shadow {
width: 500px;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
position: relative;
z-index: 1;
height: 1px;
top: -65px;
}
Yes, you can create that in css3. You will have to combine some effects, but I think a grey line (you will have to add some extra space below, explained later) with a shadow will do.
To write a shadow that appears only in one side (top), check this question/answer: How can I add a box-shadow on one side of an element?
Based on that example, you can try something like:
.myDiv
{
width: 700px;
height: 50px;
border-top: 2px solid #333;
-webkit-box-shadow: 10px 0px 0px -2px #888 ;
}
The shadow is still there on the left, but hidden (-2px). That gives you the illusion of a single shadow. This is just a start-up, try different options and come back if you have any particular questions. But do it yourself first.
If you hover the mouse over the underlined table headings on this page, a tooltip appears
However, in IE7, the tooltips appear about 300px above their intended position, and on the first table, they don't appear at all.
Also, the tooltips are not as nicely styled when shown in IE, e.g. the corners aren't rounded, and the drop shadows aren't shown. I'm not too concerned about the styling, but I would like to get the tooltips displaying in the correct position.
I'm using the YACOP JQuery plugin to display the tooltips (I've modified this plugin slightly to remove the fading effects). The CSS styles applied to each tooltip are:
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
IE < version 9 doesn't support native or vendor specific CSS3 rules like rounded corners or drop shadows.
As for the IE7 Issue, setup a targeted CSS for IE7 either using conditional comments
<!--[if IE 7]>
.callout_main
{
position: absolute;
display: none;
margin: 0px;
left: 576.5px;
top: -66px;
}
Or the CSS browser selector and reposition the callout div with CSS.
The first table's tooltip doesn't seem to appear because it is poistioned way above the top of the page, so above the browsers "render view."
Update:
In response to your question, there is: <div class="callout_main" style="..."> I'd move these inline styles to a CSS file, and for the the IE/ rules change top: 366px; to top: -66px;. I think this will help to resolve your issue :)
.callout {
max-width: 400px;
padding: 5px;
border: 1px solid #7992B0;
background-color: #FFE8A4;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
You're using Webkit and Mozilla's css attributes, the ones starting with -webkit and -moz. These won't work on IE 6,7,8 (or any previous one) because they lack CSS 3 support. One day, all browsers will, hopefully, support CSS 3, but for now, you'll have to use some workarounds (likely), or force your users to use something that's not IE (depends on your users) if you want to have a nice looking tooltop.
There exists a compatibilty master table that will inform you of what you can and cannot use on various browsers.