Codepen page
Webpage hosted with Google Drive if you want to see it with pictures (front.html)
relevant code:
.row1 img{
/*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.blue-border{
border: 4px solid rgb(0,102,179);
}
.orange-border{
border: 4px solid rgb(208,78,29);
}
.title-blue,.blue-border,.title-orange,.orange-border{
box-shadow: 5px 5px 7px rgb(117,117,117);
}
I'm creating a webpage for my school, and I need to create inset box-shadows on 4 elements: the two images in the 1st row, and the .blue-border and .orange-border divs in the 2nd row. However, there is already a box-shadow property applied to the borders, so applying a new box-shadow property cancels out the original ones. Also, when I apply a box-shadow property to the images in .row1 (ln 25), the box-shadow of the borders breaks. How do I circumvent the fact that CSS can't handle 2 identical properties with different arguments? And why does the box-shadow on the images in .row1 break the box-shadow of the .blue-border and .orange-border classes?
Thank you!
Related
We are using different static images as per year to display.
I want to make it dynamic by adding image without number and adding number. Its looks good except. I tried text-shadow css property but does not give same result like image.
Is it possible to add shadow by css which goes to end of left corner?
You probably have to use multiples text-shadow to achieve this style.
text-shadow: 1px 1px 0 #087194, 2px 2px 0 #087194, 3px 3px 0 #087194, 4px 4px 0 #087194, 5px 5px 0 #087194;
https://jsfiddle.net/h462ruey/33/
I would like to add a shadow to gnome-shell panel in default theme.
I've edited "/usr/share/gnome-shell/theme/gnome-shell.css" and succesfully removed background color (atl+f2 + r to apply).
I've also added a box-shadow property like this:
#panel {
background-color: transparent;
font-weight: bold;
height: 1.86em;
box-shadow: 0px 3px 10px black;
}
...that, if applied to a div in a html page, would give me what I expect.
Unfortunalelly it seems to be ignored by gnome-shell.
Is something similar available in gnome-shell?
...ok, I've found out where the problem is.
Unlikewise HTML, the shadow alpha is also affected by panel background alpha.
So a black shadow (alpha=1) on a transparent background panel, would result in a transparent (thus insvisible) shadow. So by setting
background-color: rgba(0,0,0,0.5);
font-weight: bold;
height: 1.86em;
box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
It would result on a 0.25 alpha shadow (0.5 * 0.5 = 0.25). That's why the box-shadow effect from my question above is not shown.
As said, that's a different behaviour than HTML where a transparent background div would not affect its box-shadow effect. Perhaps some gnome-shell developer passing by here might want to consider this implementation.
I'm working on a website and I want to add some shadow to my text, is there an easy way to do this using only css? i tried placing a darker clone of the text under it, but that would be hard on different sizes.
You can achieve this using the CSS3 text-shadow property. The general format for specifying this is:
text-shadow: *left-offset* *top-offset* *blur-distance* *color*;
Example Usage:
text-shadow: 2px 2px 1px #000000;
You can create multiple shadows by separating their definitions with commas:
text-shadow: 2px 2px 1px #000000, -2px -2px 1px #111111;
Older versions of IE do not support this property, though; you need to use a filter:
filter: DropShadow(Color=#000000, OffX=2, OffY=2);
Where you replace the values with whatever your preference is.
Note: The answer to your question can be found quite easily using the great search engine Google. Please try that next time before asking a question.
Another note: You really don't have to mention that the website you're working on is an adult website. It's completely irrelevant and might even be a bit dislikable to some users.
Welcome to Stackoverflow, though! I hope that helped!
you can use css text-shadow any times you want on a text:
text-shadow:1px 0px 2px grey, -1px 0px 2px grey, 0px 1px 2px grey, 0px -1px 2px grey;
will create a shadow whole around the text.
What's the easiest way to create drop shadows around div boxes? A print media designer sent me this example design:
http://glacialsummit.com/shadow.jpg
As you can see, the drop shadow seems to "glow" around the div box. Is this easy to re-create with CSS? Or should I tell the designer it's impractical to create this?
Yes, it is possible, even in IE6.
It is possible with CSS3. But the browsers still use their own CSS property names.
Yes, it is possible with CSS3. Here is the sample:
selector {
-moz-box-shadow: 5px 5px 10px #666;
-webkit-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Would work in most of major browsers except IE.
Here is the explain:
selector {
box-shadow: x-coordinate y-coordinate blur-radius color;
}
Cheers.
I'm interested to find which way of creating box shadows with css is most effective. But that I mean : ease of implementation, flexibility, and cross browser compatibility.
Onion skinning is my personal favorite.
An example can be found in this alistapart article.
This is now very simple to achieve:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33);
First value is the horizontal offset.
Second value is vertical offset.
Third value is spread of blur effect.
Fourth Value is color.
Additionally, you can add another value of inset, which will make the shadow appear on the inside of you block element:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;
This is now very well supported: https://caniuse.com/#feat=css-boxshadow
The way I find most effective currently is this:
The CSS rules needed :
.shadow{
position:relative;
display:block;
background-color:#bbb;
border:1px solid black;
}
.shadowed_item{
position:relative;
border:1px solid black;
background-color:white;
top:-5px;
left:-5px;
}
HTML code on which the CSS is applied:
<div class='shadow'>
<div class='shadowed_item'>I have a shadow.</div>
</div>
I found it very simple to implement, flexible and it works the same on FF 3, IE 6 & 7.