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
Related
I want to add a small triangle to the upper-right corner of an input type='text' HTML element, like Excel uses to indicate a comment.
The accepted answer to this question:
How to add triangle in table cell
shows how to do it for a table cell. I naively applied the "note" css class to my input element but it didn't work. Any suggestions for how to achieve this?
Pseudo elements can't be used on input's. You can use the same CSS as described in the linked post (here) but you would have to apply the class to an ancestor.
.note {
position: relative;
display: inline-block;
}
.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="note">
<input type="text">
</div>
Given a simple input field
<input type="text" />
and assuming we can't use or rely on a parent element for styling, you may use multiple box-shadow to create a triangle, e.g.
Codepen demo
Result (triangle outside)
Code
input {
padding: 10px;
border: 1px #ccc solid;
margin: 15px;
box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff,
1px -12px 0 #fff, 2px -11px 0 #fff,
3px -10px 0 #fff, 4px -9px 0 #fff,
5px -8px 0 #fff, 6px -7px 0 #fff,
7px -6px 0 #fff, 8px -5px 0 #fff,
9px -3px 0 #fff, 10px -2px 0 #fff,
11px -1px 0 #fff, 12px 0 0 #fff,
8px -12px 0 #9bc;
}
Of course you can change the size of the triangle playing with the offset(y/x) of the box-shadow.
If you need to place the triangle inside the input you could just add a couple of properties to the code above and use outline and outline-offset instead of the border property to create the illusion of an outer border. All the shadows don't move from their position, just give enough space to the offset in order to wrap them.
Codepen demo
Result (triangle inside)
Code
input {
padding: 0;
border: 0;
outline: 1px #ccc solid;
outline-offset: 15px;
...
}
To mark all text inputs with red corner, you could use
textarea, input[type="text"], input:not([type]) {
background: linear-gradient(225deg, red 5px, white 5px);
}
If you want to mark only required fields, then use required attribute and selector:
[required] { background: linear-gradient(225deg, red 5px, white 5px); }
<input placeholder="optional field">
<input placeholder="mandatory field" required>
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;
}
so i have a nice box-shadow that seems to work in all browsers except ie 8 and below. I need my site to be compatible for IE 8.
here is the effect that i'm referring to:
http://unifiedforuganda.com/ugandanprograms.html
here is the relevant css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
i don't care about the shadow showing up in IE but is it possible to have a black border be there for the image only when the shadow is not rendered? i want to avoid IE conditional sheets if possible
EDIT: seems i even have to use conditional comments or use a hack which i don't want to. now just have to figure out to use the conditional comments for IE....
As you can see here, box-shadow is not supported until IE9. But here is a SO post expalining the usability of box-shadow in IE8 and below.
so i ended up using conditional comments in the of the html document...simplier than i thought....here the code i ended up using:
<!--[if lte IE 8]>
<style type="text/css">
.program-image { border: 1px solid black; }
</style>
<![endif]-->
this will target the .program-image class that normally has the box shadow working in most other browsers but when that fails, the above code will kick in and apply a small black border...this is the css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
How do I get rid of the shadow in the red area below? I have seen other similar questions but don't know how to apply that here.
Live Demo: http://jsfiddle.net/xFa9M/
CSS:-
#list li{
border: 2px solid black;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 4em;
z-index: 1;
}
#list li .tip{
position: absolute;
left: 200px;
top: 0px;
border: 2px solid black;
border-left-width: 0px;
z-index: 0;
display: none;
}
#list li:hover{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
#list li:hover .tip{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
Html:-
<ul id="list">
<li class="top">About Me
<div class="tip">Asas</div>
<li>Garage
<li class="bottom">My Blog
</ul>
Please note that it is ok for me to use JS code tricks, if needed.
If I understand correctly, you are having problems with the middle li's having shadow, while you only want the first (and maybe last) li to have shadow.
If I understood correctly, you could use the li:first-child and li:last-child to set the shadow to the first and last element of your list.
But this is not the case. If you want to hide the left shadow on your .tip, you should set the first paramater of box-shadow to 0px. The first parameter is the horizontal offset.
Like here:
http://jsfiddle.net/rf47W/
Was this what you were looking for?
You cannot.
In order to get around the issue, don't assign dropshadows to the "about me" and "asas" boxes separately, but rather wrap them in a single container and apply the shadow to it.
Have you tried targeting that element with a specific class/id/whatever selector and inserting
the code below?
-moz-box-shadow:none;
-webkit-box-shadow: none;
box-shadow: none;
The CSS and HTML given does not produce the display shown in the image, so I'm having to guess, but try wrapping the asas box in another box with bottom padding and hidden overflow.
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);