I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should
In the snippet http://jsfiddle.net/hXMLF/3/ you see a small border on the corners between the white border of the cells and the page background. How can I prevent it?
HTML
<table cellspacing="0" cellpadding="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS
body {
background-color: #efefef;
}
table {
margin: 10px;
border-collapse: separate;
border-spacing: 0px;
}
td {
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
There are two solutions I came up with. Use solution 2 but I'm keeping solution 1 here as well because it may come in handy in some other situation to someone else.
Solution 1: Display
Changing td display to inline-block does the trick but may impact your actual content elsewhere...
td {
display: inline-block; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 1.
Solution 2: Background clip (recommended)
But since you're using CSS3 anyway this is an even better solution:
td {
background-clip: padding-box; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 2.
If it doesn't work on all browsers, you should be aware that there are browser specific settings as -moz-background-clip and -webkit-background-clip that use a different set of values (they basically omit box from border-box, padding-box and content-box)
This happens because
border-collapse: separate;
makes it like that. Tables aren't exactly the prima donna at styling, I recommend You try to use <div> tags instead.
TRY THIS: http://jsfiddle.net/hXMLF/9/
Check this link. You can generate CSS for round corner cell.
http://cssround.com/
Example:
<div
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius: 0px 26px 0px 0px;
border-radius: 0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px;
box-shadow: #B3B3B3 2px 2px 2px;
">
Just modify width and height values to get what you need...
</div>
I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action.
Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.
Included is the CSS code and an example of usage.
<style type="text/css">
boxytest
{
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
</style>
<body>
<div align="center">
<boxytest> Hey guys! What's up? </boxytest>
</div>
</body>
Any help is greatly appreciated.
As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;
jsfiddle here
Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.
I would do something like this:
<body>
<p class="boxy">Test sentence</p>
<body>
The in CSS:
.boxy {
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
/* to prevent word wrapping */
white-space: nowrap;
overflow: hidden;
}
The last bit is based on this post.
I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.
I'm going to use CSS3's box-shadow property to do it, but I can't figure out a way to shade only the parts I want.
Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.
Tab layout
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
Shadow line.
Shadow would go up from the horizontal lines, and outward of the vertical lines.
_______
| |
_______________| |_________________
Here is a live example:
Any help out there, geniuses?
In your sample create a div inside #content with this style
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
and change #content style (remove paddings) and add shadow
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
add shadows to tabs:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}
Cut it off with overflow.
div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}
<div><div>tab</div></div>
You can use multiple CSS shadows without any other divs to get desired effect, with the caveat of of no shadows around the corners.
div.shadow {
-webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
-moz-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
height: 25px
}
<div style="height: 25px"><div class="shadow">tab</div></div>
Overall though its very unintrusive.
One more, rather creative, way of solving this problem is adding :after or :before pseudo element to one of the elements. In my case it looks like this:
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}
See the screenshot, made the pseudo element red to make it more visible.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you are willing to use experimental technology with only partial support, you could use the clip-path property.
This will produce the desired effect: a box shadow on the top, left and right sides with a clean cut-off on the bottom edge.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 8px 2px #888;
clip-path: inset(-8px -8px 0px -8px);
}
This will clip the div in question at:
8 pixels above the top (to include the shadow)
8 pixels outside of the right edge (to include the shadow)
0 pixels from the bottom (to hide the shadow)
8 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
Personally I like the solution found here best: http://css3pie.com/demos/tabs/
It allows you to have a zero state or a hover state with a background color that still has the shadow from the content below overlaying it. Not sure that's possible with the method above:
UPDATE:
Actually I was incorrect. You can make the accepted solution support the hover state shown above. Do this:
Instead of having the positive relative on the a, put it on the a.active class with a z-index that is higher than your #content div below (which has the shadow on it) but is lower than the z-index on your content_wrapper.
For example:
<nav class="ppMod_Header clearfix">
<h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
<ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
<li>Benefits</li>
<li><a class="ppStyle_Active" href="/features">Features</a></li>
<li>Contact</li>
<li>Company</li>
</ul>
</nav>
<div id="ppPage-Body">
<div id="ppPage-BodyWrap">
content goes here
</div>
</div>
then with your css:
#ppPage-Body
box-shadow: 0 0 12px rgba(0,0,0,.75)
position: relative /* IMPORTANT PART */
#ppPage-BodyWrap
background: #F4F4F4
position: relative /* IMPORTANT PART */
z-index: 4 /* IMPORTANT PART */
.ppList_PrimaryNavigation li a:hover
background: #656565
border-radius: 6px 6px 0 0
.ppList_PrimaryNavigation li a.ppStyle_Active
background: #f4f4f4
color: #222
border-radius: 6px 6px 0 0
box-shadow: 0 0 12px rgba(0,0,0,0.75)
position: relative /* IMPORTANT PART */
z-index: 3 /* IMPORTANT PART */
you can cover up shadow using multiple box shadows as well.
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
If you added two spans to hook onto then you could use two, something like:
box-shadow: -1px -1px 1px #000;
on one span and
box-shadow: 1px -1px 1px #000;
on another. Might work!
If the shadows overlap you could even use 3 shadows - one 1px to the left, one 1px to the right and one 1px up, or however thick you want them.
I did a sort of hack, not perfect, but it looks okay:
<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>
<div class="tab-content">Content of tab goes here</div>
SCSS
.tabs { list-style-type: none; display:flex;align-items: flex-end;
.tab {
margin: 0;
padding: 4px 12px;
border: 1px solid $vivosBorderGrey2;
background-color:$vivosBorderGrey2;
color: $vivosWhite;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom: 0;
margin-right: 2px;
font-size: 14px;
outline: none;
cursor: pointer;
transition: 0.2s;
&.active {
padding-bottom: 10px;
background-color: #ffffff;
border-color: #eee;
color: $vivosMedGrey;
border-bottom-color: transparent;
box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
}
&:hover {padding-bottom: 10px;
}
}
.tabContent {
border: 1px solid #eee;
padding:10px;
margin-top: -1px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);