Developing a set of CSS3 interface elements
GHengeveld |
|
---|---|
Hi people, Recently I've been working on a new base theme for Siena. The goal is to provide a very basic HTML5 template, with enough flexibility to easily change the layout and add new elements. I also want to make it very easy to build good looking user interfaces, by providing a set of CSS3 interface element stylesheets. I've started with buttons and icons, and I intend to extend this to include other common interface elements such as form fields, dialogs and tooltips. The buttons are more or less done now. Included features:
You can have a look and download the CSS here. Let me know what you think and any suggestions you may have. |
lukgoh |
|
---|---|
Awesome stuff. The icons are a great idea. This is exactly what Cotonti needed! |
Eugene |
|
---|---|
I'm sorry, I maybe missed the picture for icons (I mean downloads - i think it's a sprite)... But what I saw on preview is really cool! It will give styles for default and make things easier! do continue with forms... |
Twiebie |
|
---|---|
Good stuff, Gert! |
GHengeveld |
|
---|---|
Thanks guys. It's a work in progress, I just added tooltips. I'm trying to make it flexible so you can re-use class names between elements, for example the colors are used by both the buttons and the tooltips. The icons are indeed a sprite (4 images: white, black, 2 sizes) |
|
Bu konu GHengeveld tarafından düzenlendi(2012-01-12 21:02, 12 yıllar önce) |
Fox |
|
---|---|
very cool ХаЧу ЧПУ для форума!!! ХаЧу ДаКуменцию к ДвИжКу!!! ХаЧу АпиСания TPL ТаГов!??
|
elfrenazo |
|
---|---|
do not quite understand, as used?? |
Kingsley |
|
---|---|
Yes yes, cool new stuff. xD |
urlkiller |
|
---|---|
did you thought about giving it styling for errors in form fields ? Added 1 minute later: also if using theme.css files you could think about embeding the sprites with base64 encode into the css files. Added 2 minutes later:
also for icons: http://www.fontsquirrel.com/fonts/iconic URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
|
GHengeveld |
|
---|---|
Yes, I intend to add state styles, as used by cot_error(). Data-URIs for images aren't supported in all browsers. I've opted to implement something that works cross-browser first. The same goes for @font-face. Actually the best solution would be to use inline (base64) SVGs, but that's not supported at all. @font-face is problematic in terms of accessibility because screen readers don't know a character is actually an icon (image). Update: I did some research into data-uris and found an interesting article on the topic. It seems it's possible to get data-uris working in most browsers, including IE6 and 7. I recently added some more interface elements: http://dev.ghengeveld.nl/css3/buttons/ |
|
Bu konu GHengeveld tarafından düzenlendi(2012-02-06 15:05, 12 yıllar önce) |
urlkiller |
|
---|---|
as for the icons i just had that link. the same icons are existing as regular images that you could use. besides that... do they rounded corners and gradients and all other fancy stuff work in ie6 anyway? no... Added 3 minutes later: also the icons in buttons seem a bit missaligned. maybe you can dead center them? Added 49 seconds later: also maybe add different cursors to disabled elements Added 1 minute later: maybe add flat tooltips. the user maybe gets confused with the button-looking tooltips you have now. URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
|
GHengeveld |
|
---|---|
Ok, all icons use data-uris now. No more sprites. |
urlkiller |
|
---|---|
sorry i didnt wanted to only nag. i like these set very much. its a good piece of work... URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
|