Here is my site http://goo.gl/MeCxv2 when I have my porfolio's thumbnails on the main page and I want to add an inner shadow for all thumbnail boxes. I want to get like this http://goo.gl/L80HAx but with CSS instead of photoshop :D
So, I try to do like this:
.rollover-project hover-ready {
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
}
But it doesn't work and I'm not even sure, that the class .rollover-project hover-ready is correct.
Could you please to help me?
are you missing a '.' in your selector for hover-ready?
.rollover-project.hover-ready{
}
Edit
Looking at this a little more, the image inside your anchor is covering up the inset border. You could try adding a little padding to the element to reveal the shadow or re-ordering your elements/applying the shadow to a different element
e.g.
.rollover-project.hover-ready{
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
padding: 10px;
}
1] Since [.] is used for selecting class name you will have to use it wherever you use class name, so if you want to select 2 class names it should be .rollover-project.hover-ready OR .hover-ready.rollover-project instead of .rollover-project hover-ready
Refer the below link for help on CSS Selectors
W3Schools - CSS Selectors
2] The box-shadow is not applied on the correct element; it should be applied on the class of the main box element,
<div class="wf-cell category-31 isotope-item">
Edit: As mentioned by #r8n5n, if you apply the box-shadow to the classes .rollover-project.hover-ready i.e. the inner box, it will be overlapped by the thumbnail in the <a> tag, and as suggested by him you've 2 options
i] Add the box-shadow to the parent/outer element (which was my suggestion)
ii] Add a padding so that there is some space to show the box-shadow.
Since you want the box-shadow of 1px, add the padding:1px and see the effect. Similar example on another thread - putting a inset box shadow on an image or image within a div
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
You are developing an HTML5 page that includes several paragraph elements.
You have the following requirements:
Add a drop shadow that is one inch below the textin the paragraph
Set the radius of the drop shadow to five pixels
You need to style the paragraphs to meet the requirements.
Which CSS style should you use?
A.text-shadow: 72pt 0pt 5pt
B.text-shadow: 5px lin 0px;
C.text-shadow: 72pt 5em 0px
D.text-shadow:72pt 0em 5px;
Option B seems to be right but I don't see any shadow. I see shadow output only for option A & D. Which is right? I'm confused :(
Please refer http://jsfiddle.net/4v4yu/
In your option B & C you didn't set a value to display the shadow (0px)
A.text-shadow: 72pt 0pt 5pt
B.text-shadow: 5px lin **0px**
C.text-shadow: 72pt 5em **0px**
D.text-shadow:72pt 0em 5px
Here your jsfiddle fix : http://jsfiddle.net/4v4yu/10/
You should take a look at the w3c documentation for all the allowed units : http://www.w3.org/TR/css3-values/#length-value
I'm no master on CSS, however if i were to do text-shadow i'd use the following:
text-shadow: 1px 1px 1px #000;
Or with rgba
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
I've not seen option B used before, i could be wrong, but i know this method works fine.
Syntax:
text-shadow: h-shadow v-shadow blur color;
Answer: B is correct.text-shadow: 5px 1in 0px;
box-shadow:5px 1in 0px #343434;
the first value: Shading is horizontally, in the upper value the shadow goes to the right but if you give it a negative value, the shadow goes to the left.
The second value: The shadow marker is vertical, in the second value it creates the shadow at the bottom of the element. If we give it a negative value, the shadow is created at the top of the image.
The third value: Indicates Blur. The higher the value of the Blur, the shadows will be displayed and if the value is lowered, the shadows will appear dense.
The fourth value: Specifies the shade color you can select for each color and use the hexadecimal and RGBA color methods to color the shade.
I need a cursor that I can move between two cells in a table. Here is the jsFiddle: http://jsfiddle.net/KNc5u/
If you click on the table, the cursor will cycle between selecting the whole cell, selecting the bottom of the cell and the top.
As you can see, the table "jumps" while the cursor moves because the border width changes. This is ugly. How can I prevent this?
Constraints:
Cursor must be 2 pixel wide (not 1 and not 3)
Pure CSS preferred
No additional HTML elements, please (I could do this easily by wrapping each cell with a div with a 1 pixel white border that I turn black but I'm looking for a solution that doesn't add junk to the DOM)
CSS3 is OK
I can live with IE10+ :-)
As you said you're ok with css3 you can fiddle with box-shadow: http://jsfiddle.net/KNc5u/10/
This example works only with modern browsers and does not using any vendor prefixes like -moz or -webkit. If you need support other browsers you can easily add these prefixes to the existing box-shadow properties.
Feel free to change the color keywords to your needs…
td {
text-align:center;
border:1px solid blue;
padding:1px 2px
}
.selected {
display:block;
border:none;
box-shadow: inset 0 0 -2px 0 #000;
}
.selBottom {
display:block;
border:0;
box-shadow: 0 0 black inset, 0 -2px red inset, 0 0 black inset, 0 0 black inset;
}
.selTop {
display:block;
border:0;
box-shadow: 0 2px green inset, 0 0 black inset, 0 0 black inset, 0 0 black inset;
}
Update
Here is a updated version (imho to hacky): http://jsfiddle.net/KNc5u/13/
However it should fixe your issues for the provided markup. Note that there is a hint: This example will only work in a proper way with similar colors for td and your selected, selBottom and selTop classes.
Update 2
Now with left and right support: http://jsfiddle.net/KNc5u/15/
You can reduce the movement of the table by adding padding to the td
td { border: 1px solid blue; padding:4px}
DEMO
Use a outline instead of a border and remove the padding.
http://jsfiddle.net/KNc5u/3/
Alternatively, change the cell background color to highlight it instead of using an outline.
Edit: Erp so that won't do top/bottom only. Turns out that's very tricky without being messy. I've got a nice version here using the background color with a working cursor (click on any cell) http://jsfiddle.net/KNc5u/7/
If the table cells were fixed sizes, you could use background images to give different types of highlight cursor too.
I show box-shadow with this CSS code.
img {
box-shadow: 2px 2px 1px #888;
}
I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,
<img ... class="noborder">
#noborder
{
box-shadow: 0px 0px 0px #888;
}
However, I still have the shadow with the `class="noborder">code, what might be wrong?
Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .
Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.
I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.
.shadow
{
box-shadow: 2px 2px 2px #888;
}
.noShadow
{
2px 2px 2px transparent
}
.noShadow.none
{
box-shadow: none;
}
And here's a jsfiddle demo to show you how it works.
try replacing #noborder with .noborder, you want it to be a class, not an ID.
Additionally, box-shadow: none is a neater alternative to remove the box shadow
Use box-shadow: none to remove the shadow completely.
<div>test</div>
<div class="noborder">test</div>
div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}
Demo
Using this css for shadows
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
How do I remove shadow from top and bottom sides of the div and leave only horizontal shadow? Is that possible?
There are two ways to do this, but it depends on if you're looking for a hard edge or a soft edge.
Method One:
The trick here would be to wrap your box in a container and apply overflow:hidden to the container. If you give your box right and left margin that's the same as the shadow distance, the shadow will only be visible on the sides; it will be clipped on the top and bottom.
Here's an example:
http://jsfiddle.net/2Luef/1/
Method Two:
Alternatively, depending on the effect you're looking for, you could do something with multiple box-shadows like this:
http://jsfiddle.net/2Luef/3/
It doesn't have the clipping look like above, but it's arguably a nicer look. It also only uses one DOM element.
Yes and no.
The box shadow cannot be places on one side of an element unless you just offset it and/or change the spread, which I suspect isn't quite what you're after.
You can however place the element inside a container with the overflow set on it. The overflow property affects the box shadow. Here's an example.
You can use minus values for the spread value (last px value) to make the shadow not spread out to the other sides. However, that will only allow you to add the shadow to one side; so you can add multiple shadows, separated by a comma.
box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;
For more information, checkout these two links:
How can I add a box-shadow on one side of an element?
http://starikovs.com/2011/11/09/css3-one-side-shadow/
Write like this:
CSS:
.parent{
height:200px;
margin:40px;
overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}
HTML
<div class="parent">
<div class="child"></div>
</div>
check this http://jsfiddle.net/k9kVZ/2/