|
CSS - Gradient Border/shadow On Hover
Hi,
What would be the best way to create a hover effect as seen on the "Get Started" button he http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056 Thanks! Similar TutorialsHi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be: www.fatwallet.com points2shop.com Thanks for any guidance! I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page Osake Restaurant you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato. I have uploaded a screenshot of the layer styles for drop shadow and gradient. Screen Shot Below is some code I found from a tutorial for css drop-shadow - Code:
/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}
/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}
#shadow_1:before {
content: 'In shadow';
}
#second_2:before {
content: 'Happy Shadowing!';
}
/*\*/
html*.shadow {
[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
/*\*/
html*.shadow:before {
[color:red;/* required by Safari.
seen by IE6 */
/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;
]color:auto; /* resets color for IE6 */
}/**/
/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}
My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way. Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom Hello, I am wanting to add a shadow to both sides of the container box i have for my css site layout. Is this possible. I was using border-left and border right applying the border settings but i would like to have a more of a shadow result. Can anyone help me with this please? Many thanks in advance. Hi, I am new to css codes , so please help me with my problems if u can. I want to add a shadow to my border from all sides to my image . So, I'm trying to find out if there's an easy way to create a shadow around a border. Essentially, I've got a white background div, with an inner div that takes up part of the white. The inner div has a gray background, and I want to somehow give it the impression of being raised from the white. I couldn't find too much searching through google.. then again, not sure what exactly I need to search for in google. Any help would be greatly appreciated. Thanks Hey people, when slicing a new layout for my site I had to do so in tables for the sole reason of a problem I've had for a long time now, how to have a border images set for either side of an image? The layout is he http://www.trshady.com Now as you can see, either side of the layout I have a .gif 'shadow' which fails due to .gif not handling gradients and .png being uncompatable transparency with IE but how would I ever add these borders with CSS? Say they wasn't shadows and images of other kinds .. how would I be able to achieve such an effect? the border-image property is coming with CCS3 I believe but till then, what solutions do I have? Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work. Here it is: http://www.jimandkris.com/test/verticalpopout.html When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over. I'm shooting for something like this: http://sperling.com/examples/menuv/ The *html hack isn't fixing it like I hoped. What am I missing? Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that? Thanks again! i know this is probably a really simple question but i cant think straight and why i cant work it out. when the person hovers over this image i want it to display a border or a certain colour. Code: #buildings
{
height:195px;
width:280px;
float:left;
margin-left:155px;
margin-top:45px;
}
thats my css i have for this image: Code: <div id="buildings"> <a href="Buildings.php"> <img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" /></a> </div> what would i need to do do ive tried a hover: but that didnt seem to work Hi I have a horizontal menu made from a list. On hovering over the links its supposed to show a yellow bottom border 3px underneath. Works perfectly in everything but IE7. Any ideas please. I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? hey all, i have just been looking at this site http://www.dynasig.net/index.php after seeing a link on devshed to it and i really like the menu...thing is i can't seem to get the gradient like they have it... any ideas?? thanks in advanced to anyone who can reply RF Hi. I would like to create a gradient similar to the microsoft website. http://www.microsoft.com/downloads Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image. Does anyone know how this works? or can point me in the direction of a tutorial on how to achieve this? I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE. So im guessing that you can also set a bkgnd image? for the other browsers? many thanks. Thanks for taking the time to read my question. I have a box in which I have text. I would like to make that box look like it has a shadow to the bottom right. I can't seem to figure out how to do that with my CSS. here is the <div> and my CSS Code: <body> <div id="MainContainer"> <div id="Title">Landmark Feeds - Links to Standard Operating Procedures</div> <hr /> <div class="dtree"> <p id="TreeLinks"><span><a class="QuickLink" href="javascript:%20d.openAll();">Open All Folders</a> <a class="QuickLink" href="javascript:%20d.closeAll();">Close All Folders</a></span></p> <p id="TreeLinks"><span><a class="QuickLink" href="javascript: d.openTo(1, true);">Open Terms</a> <a class="QuickLink" href="javascript: d.openTo(2, true);">Open Payment Schedules</a> <a class="QuickLink" href="javascript: d.openTo(3, true);">Open SOP's</a></span></p> <p><script type="text/javascript" src="JavaScript/dtreeDocWrite.js"></script></p> </div> <hr /> </div> <div id="CR">Last Updated: February 28, 2006</div> </body> Code: #Title {
font-size: 26px;
color: black;
border-width: 3px;
border-color: #d81f03;
border-style: solid;
margin-top: -55px;
margin-left: 0px;
float: left;
background-color: #F5F5F5;
padding: 5px;
}
Thanks, Brad Hey everyone. First of all, I apologise for imposing on you another question about drop shadows in CSS. I have tried my hardest with what I've been trying to achieve here (including using the resources that gave me the info to use this technique in the first place) but I've hit a brick wall. Allow me to demonstrate: http://www.hrfc.org.uk/test2/index.htm At the top right of the content, there is a box I've created, within which the ultimate user of this site will be able to put screen shots, and then type their captions below. Ideally, I want to be able to have this box (.grabcontainer in the CSS) have a drop shadow. I was able to achieve a drop shadow for the <img> on its own (as can be seen by scrolling further down the page to the image at the bottom)... but I can't think of a way of extending this technique so that it works for my .grabcontainer class. If anyone has any suggestions I'd really appreciate it. I've played with this all day but every attempt normally ruins the careful arrangement of the divs. Thanks for reading Eldoc I've got a div tag that I show and hide on an accessKey press. It is used for special navagation in the site. The div tag has a background color defined in the CSS. The background color only shows up in FF. I know I'm using tables when I don't need to, and this is pretty sloppy right now.. but I'm going to clean it up a bit... I just finished writing a function to keep the div tags above select elements in IE and haven't had a chance to do the cleaning up yet. But I think my problem is probably very simple and is something stupid in my style sheet or some behavior of IE I don't know about or have forgotten about. Code:
<div id="gotoSmall"><input type="image" id="hiddenGoTo" src="<c:out value='${pageContext.request.contextPath}'/>/images/XXXXyyyy/empty.gif" name="hiddenGoTo" accessKey="g" onfocus="showHideGoto('show');"/></div>
<div id="gotoDiv">
<form name="GoToScreen" class="form" onsubmit="javascript:return goToNextScreen(this,'<c:out value='${pageContext.request.contextPath}'/>')" method="post">
<table class="goToTable" id="gotoTable">
<tr>
<td align="right" nowrap="nowrap">
<label class="XXXXGoToLabel" id="goTo">go to</Label>
</td><td>
<input name="screenName" autocomplete="off" class="XXXXGoToInput" id="XXXXGoToInput" type="text" onblur="return toUpper(this);" size="12" height="20px" value="" maxlength="12" tabindex="-1"/>
</td>
<td>
<input type="hidden" name="XXXXActionOrTab" value="Refresh"/>
<input type="hidden" name="useSessionKeys" value="true"/>
<input type="hidden" name="backButtonCheck" value="pageLoad"/>
</td>
</tr><tr>
<td align="center" colspan="3">
<table>
<tr>
<td align="right">
<input type="submit" name="GoTo" value="Goto" onclick="buttonClick(this);"/>
</td><td align="left">
<input type="button" name="cancel" value="Cancel" onclick="showHideGoto('hide')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Code:
#gotoDiv{
display: block;
left:450;
top:200;
z-index:10000;
width:204px;
height:54px;
visibility:hidden;
position: absolute;
background-color: grey;
}#gotoSmall{
display: block;
z-index:10000;
width:0px;
height:0px;
position: absolute;
}
.goToTable{
width:200px;
height:50px;
background-color: #e0dfe3;
border: 1px solid black;
border-style: groove;
border-spacing: 0px;
border-collapse: collapse;
}
Hello, I created a 1px x 1000px image for my background that is a gradient. In my css I have the following code: background-image: url(images/background.jpg); background-repeat: repeat-x; Now, on longer pages (that obviously exceed 1000px) the graphic stops. Is there a way to get around this using CSS code, or should I just make the graphic longer? Thanks! My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn). What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out). ANy help will be greatly appreciated. Thanks. TJ Hi all, I am trying to do the following: I want to have a page essentially divided into 3 sections: left side|middle|right side. On the left and right sides of the page, I would like to have a gradient that is a dark shade of gray starting from the edge of the screen and getting lighter as it reaches the middle section of the page. I have seen some tutorials on the web describing how this is accomplished, but I have not had much luck. I have been told that an easy way to do this would be to treat the page as a large table, with the centre cell being another table. I am pretty sure that this is poor design, but I am unsure about how to do this the proper way. As for the gradient portion, the tutorials indicate that I should make an image that is a few pixels in height and x number of pixels in width, and just do something similar to this: Code: .grad{
background:url("gradient.jpg") top left repeat-y;
}
where "gradient.jpg" is the image I created. I could then apply the "grad" class to any element I wish, but I can not get this to work. Any ideas would be helpful. |
|||||||