I have been trying to get the curl shadow effects given here for box-shadow:inset but have failed to get any thing. Any onw has any clues how I can make it work?
Been trying to get it to work on this jsfiddle
Changing this to box-shadow:inset and trying variations on transform rotate has not yealded any results:
box-shadow: inset 0 10px 13px -3px #000000;
transform: skewY(-12.5deg);
I am basically trying to make something like this for a unordered list in my html/css design.
yes - see this link for some really nice CSS effects: nicolas gallagher
Specifically "Lifted Corners"
Related
First question on Stackoverflow but I've used it constantly while learning how to make websites and a bunch of other stuff. I've been using Bootstrap to create a website with a friend and in the past we've both seen websites with really beautiful navbars.
What we're wondering is if we can utilise Bootstrap's navbars and add some additional code to add a sort of under-glow to the buttons! In an ideal world too, this glow would move from button to button following the cursor and reset to the currently active page button if none are hovered over. I'm hoping you've seen something like this before but it's actually difficult for me to find an example of this now.
I've been looking at using this sort of effect but turned upside down
body { margin: 30px; }
hr {
border: none;
border-top: 1px solid #eee;
height: 5px;
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
}
<hr>
(Source: http://jsfiddle.net/sonic1980/65Hfc/; (provided by another amazing stackoverflow user))
Is this possible? Thanks for any help, let me know if I can provide any further information.
I tried to replicate it with a box shadow, check it out:
.btn{
box-shadow: 0px 5px 5px #888888;
}
http://jsfiddle.net/gumxt15q/
Using inset
http://jsfiddle.net/q0ere00q/
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.
I faced a very interesting fact, and hope you have an answer for that.
I have this code:
width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 0 2px 1px #e3e6e9;
-moz-box-shadow:0 0 2px 1px #e3e6e9;
box-shadow:0 0 2px 1px #e3e6e9;
I saw it on Joomla 1.6 template - and it works cool on IE8, but when I pasted the same code to my template, it doesn't work on IE8, maybe there are some tricks to accomplish that?
Thanks in advance
Internet explorer doesn't support border-radius and box-shadow. There are some projects that try to bring css3 to ie like css3pie or ie-css3. Of course for shadows you can use filters. Read more here.
As others mentioned, that code doesn't work on IE8. Most likely there is a IE8 only stylesheet that uses images to get the same effect.
Personally I just let IE8 and below be a little blocky if I can get away with it. The % of users on those browsers is diminishing fast and I don't mind helping that along. And if your rounded corners are subtle then it's not something many users would even notice. Same goes for box shadow.
How is the "sunken" or "inset" effect applied to these letters in this menu? I looked (briefly) with Firebug but can't find how they're doing it. Works in FF, not in IE.
See http://balsamiq.com/products/mockups/mybalsamiq for actual example.
This is just a Text Shadow with a color lighter than the background instead of darker, causing it to look like a bevel. (We've been trained to believe that the 'sunlight' on a computer screen generally comes from the upper left corner.)
The CSS rule shown when using the Developer Tools for Safari shows:
text-shadow: white 0px 1px 0px;
That is most likely a text-shadow:
p {
text-shadow: 0 1px 0 #fff;
}
No version of IE in existence (not even IE9 beta) supports text-shadow.
It's this:
text-shadow: 0 1px 0 #FFFFFF;
As I see, it's the color combination that create the effect. Just change the text to red color and the text is not inset anymore.
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
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.