I have boxes that have been designed like this
Basically I need to code them so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.
Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)
If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/
To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.
The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.
If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I can't help with box shadows in IE, I'm afraid.
Actually, IE has a proprietary CSS extension that allows you to add shadows:
.shadowed {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)
DD_Roundies Website
As for other browsers, you can use this:
/*************************************************/
/* The properties follow this format: */
/* property-name: x-offset y-offset blur #color; */
/*************************************************/
box-shadow: 0 0 4px #000; /* For Opera */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
I would strongly recommend CSS3Pie (works in IE6-9).
Related
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.
I've been trying to get the same shadow in all modern browsers (except IE version 9).
Unfortunately, for example Google Chrome doesn't blur it as nice as Firefox does.
Here's my code..
HTML:
<div id="box">Every browser should see my shadow the same way!</div>
CSS:
#box {
box-shadow: 0 4px 4px -4px #000, 4px 0 0 0 #E8EBEF;
padding: 10px;
background-color: #E8EBEF;
width: 200px;
}
and here's a fiddle:
http://jsfiddle.net/hLp8J/1/
What can I do to get the same shadow in at least the latest versions of Firefox, Google Chrome, Safari and Opera? Thanks for your ideas!
The different rendering engines draw the shadow slightly differently (Firefox for example has a smoother falloff than Webkit based browsers, looks better if you ask me)
The only way to guarantee it'll look identical across browsers is to be dumb about it and use images.
Otherwise you need to find a way to deal with the minor differences without adversely affecting your design.
You may try online CSS3 Generator or CSS3 Box Shadow Generator or CSS3 Maker
I want to create a HTML button with rounded corner and elliptical shape without image.
What is the way to do it?
This makes all sides rounded:
border-radius:40px;
This makes them elliptical:
border-radius:40px/24px;
Have a look here to see:
http://jsfiddle.net/xnTZq/
Or with some extra ugly fanciness:
http://jsfiddle.net/xnTZq/6/
-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;
#box-1 {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-border-radius:10px;
}
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
This is a very useful article to read if you need more help with this:
http://www.css3.info/preview/rounded-border/
Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/ ) http://border-radius.com/
koolies
I would like to know how to make rounded border in IE8. I'm using
-moz-border-radius:4px;
-webkit-border-radius:4px;
for mozilla and safari.
There's a jQuery plugin for that. http://jquery.malsup.com/corner/
Download https://code.google.com/p/curved-corner/ and include in your project. Then use the following css to have rounded corner.
For example:
.somediv{
-webkit-border-radius:4px; /* older webkit based browsers */
-khtml-border-radius:4px; /* older khtml based browsers */
-moz-border-radius:4px; /* older firefox */
border-radius:4px; /* standard */
behavior: url(border-radius.htc); /* IE 6-8 */
}
The url to the file is relative to the HTML file which loads the CSS. So this is different to background: url(...) behavior which is relative to the CSS file. More details here
You can't. IE doesn''t handle modern standards and practices and, specifically, no such CSS property exists in IE8.
In IE9 you can use border-radius.
For the older IE versions, there are javascript libraries that will do it for you. You can't do it purely with CSS. At the very least you will need background images.
You can use CSS3 PIE for this. It's easy to implement. Just download it here: http://css3pie.com/download/ and extract its contents.
Then, on your stylesheet, just put behavior:url(css3pie/PIE.htc); along with the css codes of each element that uses border-radius.
For example:
.samplediv{
behavior:url(css3pie/PIE.htc);
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
Like this. in general i will make 1 px wide image of this then will repeat-x.
but is it possible to make same type of background with CSS3 , if yes then tell me how tp make same of this.
alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png
with all browser compatibility IE 8, 7, 6 , FF , Chrome, Safari, iphone.
Pretty much all of the browsers support gradients. Here's the CSS you need:
.gradient{
/* For any browser that can't create a gradient */
background-color: #EFEFEF;
/*//mozilla*/
background: -moz-linear-gradient(top, #efefef, #FFF);
/* Chrome/Safari */
background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
/*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
/*IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}
Try some of the CSS gradient generators that you can find with a Google search, such as:
http://gradients.glrzad.com/
or
http://www.designdetector.com/demos/css-gradients-demo-1.php
Also, take a look at Webkit's gradient tutorial:
http://webkit.org/blog/175/introducing-css-gradients/
And Firefox:
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Now - that in mind:
This is new stuff -- CSS3, which isn't finalized yet. Browser support for CSS3 stuff is very cutting edge. You're not going to get cross browser support for the browsers you've listed. Latest Webkit (Safari, Google Chrome) and Firefox are your best bets. IE supports filters. Opera doesn't support any kind of gradients though.
I think IE 6 and 7 may not support CSS3 gradient.
Even though, you can get the CSS code from this site
http://gradients.glrzad.com/