Is it possible to make such buttons (http://img225.imageshack.us/img225/6452/buttonslw9.jpg) using CSS? It should be Menu, and PHP would just feed the text to html/css and css should take care of the design.
Maybe I want too much out of CSS - especially with that red outline of the text.. ? Any ideas how i can achieve such results without doing those buttons manually in Graphical Editor?
"Pure" solution is possible in latest Safari with text-shadow, -webkit-text-stroke and -webkit-gradient properties (explained in Safari blog).
You could also use SVG + CSS background-image in Opera 9.5 and Safari.
A practical solution that works in more than a couple of cutting-edge browsers is to generate images on the server side with GD library.
There is no cross-browser way to do this (as you said, especially with the red text outline), but the Webkit and Gecko teams are implementing some cool CSS things like gradients embossing with experimental CSS properties.
You might see what jQuery can do for you. It does some pretty cool CSS-like things that go beyond CSS.
Related
I am not a pro- css designer. I need to apply one side rounded and other side slanted style of tabs in my application with pure CSS. There are may solutions available on other sites but they all work for FF and chrome but i need that for IE8..plzz help
I think CSS3Pie is your best bet. You need to download and reference the file in your CSS but it seems to be the closest to "pure CSS" solution you can get with IE8 + border-radius.
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.
I am in the process of dicing and slicing a psd layout from a designer. The design is based on the 960 grid system and consists of multiple boxes (a 960px box for the top menu, 2 460px boxes for the 2 content areas, a 220pixel and a 720 pixel for another content setup option etc). All these boxes are based on a solid background color (body) but they all have rounded corners and a aprox border of 10pixel all the way around which are gradient.
I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.
Any ideas/input?
I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.
The best route to take here would be using pure CSS3 to add the rounded corners and gradients.
Benefits:
No additional, semantically meaningless, crappy markup required
No images required
Easy to implement and maintain
Ability to degrade gracefully for older browsers that don’t support CSS3
Downsides:
Doesn’t work in every browser yet
It’s really up to you.
If you want your site to look exactly the same in every browser, CSS3 is not an option — you’ll have to rely on hard-to-maintain images and bloated markup.
However, if you don’t mind giving users of older browsers a slightly different but still nice design, CSS3 definitely is the way to go.
‘CSS3’ gradients:
http://webkit.org/blog/175/introducing-css-gradients/
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
https://developer.mozilla.org/en/CSS/-moz-radial-gradient
CSS3 rounded corners:
http://www.css3.info/preview/rounded-border/
This ain't going to work flawlessly in all webbrowsers from IE6 and up with only CSS. You'll need to grab JavaScript to get it to work in all browsers. There are jQuery plugins which can round corners on the fly, working on all webbrowsers, without any additional images or CSS. I've had good experiences with this jQuery Corner plugin.
I recommend trying javascript library DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/). Most browsers already support rounded corners as specified in CSS3, and DD_roundies adds the support also for browsers that don't (like IE).