I am learning CSS, and Ajax border radius is not working in ASP.NET it shows a error like border radius is not a known css property name.
This is because your visual studio 2010 CSS validator is set to 2.1 or lower and border-radius added in CSS3. This is just a warning, so it will work as intended.
Morpheus is right. And some other browsers also does not support that
The best approach is to duplicate each property something like this.
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5);
You can check browsers compatibilty here Border Properties, Values & Browser Support
or
the BEST way is just to IGNORE IT because it still works the way it is. :)
Related
I want to achieve this text style like so:
I want to wrap the text with color white like the image above I tried using
text-shadow: 0px 0px 5px #fff;
but it turns out that the shadow will get blurry. Is there any chance that I can do it using css (if so how)? or should I just convert it into image?
You can simulate it, doing like this:
CSS
span{
text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}
DEMO HERE
The effect you seek is called stroke and sadly not possible (yet) with CSS in a cross browser compatible way.
Faking it with shadows will not work for a stroke thicker than 1 or 2 pixels, or require a ton of layered shadows, slowing down rendering. Other faking techniques are possible but not quite fantastic.
For now the best bet remains to use images for the rare occasions where this is useful.
Ran into this today and at least for Webkit browsers, there's a better solution. You can follow this old article using the code
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
and also try using text shadows with it. It worked well for me after some pixel-pushing. I have some bigger letters, so I ended up using a text shadow like this
text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;
I hope that helps!
I am currently working on basing a design, in which the designer has used a shadow on a div.
Since I am not fond of using images for this sort of thing, I have decided to take my CSS skills to the next level. I am completely new to CSS3, yet I want to give this a try using box-shadow. I have been reading into this new feature but I cannot seem to get my exact design working.
This is what I am searching for:
Top: 1px;
Right: 5px;
Bottom: 9px;
Left: 5px
The designer has used different spreads (well, I believe it's called spreads in this context) for the shadow. My issue is that I cannot manage to get this working with different spreads per side of the div, can anyone help me?
Thanks in advance.
div {
box-shadow: 0px 0px 5px #000;
}
The intention of box-shadow is to create a shadow of the div you are assigning it to. You can't make specific top-left-right-bottom parts bigger or smaller
See: http://css3gen.com/box-shadow/
The only way this can be done is to fiddle with the variables
For example:
box-shadow: 0px 9px 15px 5px #888888;
This box-shadow will generate a box-shadow that..
[0px] doesn't shift left or right
[9px] is 9px down
[15px] has 15px of blur (play around with it for the desired effect)
[5px] is 5px wide (on all sides)
[#888888] has a grey color
Another way would be to use border-images.
This is pretty close: http://jsfiddle.net/EG6FA/
div {
...
box-shadow: 0px 4px 10px #777;
}
-webkit-box-shadow: 0px 0px 10px 5px #888888;
-moz-box-shadow: 0px 0px 10px 5px #888888;
box-shadow: 0px 0px 10px 5px #888888;
(IE9 and IE10 will render a smaller box-shadow. Earlier Explorer versions will show no shadow.)
I've been researching on drop-shadow-effect technique for web design.
So, I would like to apply the technique to use implementing a top header bar for my website.
From my findings, the one that people out there use the most is box-shadow css property.
I'd like to know if this is the most effective yet simple way to achieve the desired outcome or not. any other options available for me to implement the same as well as their pros and cons?
any advice would be very much appreciated?
Simplest way is Photoshop :)
Otherwise, read on: http://www.css3.info/preview/box-shadow/
box-shadow is a CSS3 property, meaning it's not available in < IE9, and not natively available in most browsers, hence the proprietary prefixes:
Sample CSS code for IE drop shadow:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');
CSS3 version:
element {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The only other option to the CSS3 box-shadow property is to use images. CSS3 box shadows are easier to apply and require less page weight (kb) to use. However, not all browsers will support CSS3 box-shadows.
If using the box-shadow property be certain to set all the various properties for different browsers.
box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
-o-box-shadow: 1px 2px 3px #000;
-khtml-box-shadow: 1px 2px 3px #000;
I am trying to use the following two properties in my styles.css:
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
It comes up with the following message.
They are not known css properties.
You get that message beacause these are css3 properties.
To check it's validity use:
http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3
replace EXAMPLE.COM/STYLE.CSS with url to your css file.
If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.
an example for border-radius:
-webkit-border-radius: 5px; /* Safari and webkit */
border-radius: 5px; /* Opera, Chrome */
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */
an example for box shadow:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.
The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.
The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
You can check which browser supports what on Standardista.
I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
This works for me on all my browsers:
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
CSS3 has a box-shadow property. Vendor prefixes are required at the moment for maximum browser compatibility.
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>
The general syntax is :
border-[postion]:[border-style] [border-width] [border-color] | inherit
The list of available [border-style]s are :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
inherit
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
http://www.positioniseverything.net/articles/dropshadows.html