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.
Related
This question already has an answer here:
How to make a border overlay child div?
(1 answer)
Closed last month.
I'm trying to convert this design from Illustrator into a UI element in vanilla HTML and CSS (design was given to me from a designer to recreate). I need the inner box with the cyan and white outlines to be clickable, like a button, but not the outer light blue area that surrounds the text.
Originally, I figured I could just use a box shadow to create the second, offset white border, but the box-shadow will only be shown in the bottom and right edges of the box, and won't show it inside the cyan border.
I was thinking that maybe I could do another DIV with absolute positioning to offset it, but I'm not sure how to choose the size for that second DIV as I want this button to scale based on viewport width.
How would I go about doing this? I want to avoid the option of saving it as an SVG or image as it would then be hard to create the "a" element to fit only the text portion with a clickable link.
You can do it like below:
button {
font-size: 30px;
padding: 10px 20px;
border: solid #fff;
border-width: 0 5px 5px 0;
box-shadow:
-5px -5px 0 cyan,
-5px -5px 0 inset cyan,
5px 5px 0 inset #fff;
background: none;
cursor: pointer;
}
body {
background: lightblue;
}
<button>Click here </button>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
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
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.
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/