ShareThis
Posts
Template:CurrentVersion
-
← Older revision Revision as of 15:04, 21 November 2024
Line 1: Line 1:
−
6.7
+
6.7.1
26.2.11
22.2.11
Designing Forms with CSS and Image Replacement for Buttons
***view Edit HTML for source code***
BASIC FORM CODING
CSS CODING FOR BG IMAGE REPLACEMENT FOR BUTTONS/INPUT FEILDS
------------------------------------------------------
IE5
#login input.button:hover
{
background-image:url(../images/login.png);
background-repeat: no-repeat;
height: 69px;
width: 70px;
}
-------------- http://www.rtbwizards.com/helpcenter/cssforms.htm
Warning: you cannot have both a submit button image and a reset button image. Using an image will cause the reset button to also submit the form in Internet Explorer.
From this:
To this:
http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html
BASIC FORM CODING
CSS CODING FOR BG IMAGE REPLACEMENT FOR BUTTONS/INPUT FEILDS
.fieldset .textfield {
margin:3px;
height:20px;
width:200px;
/** hides input element but keeps function **/
border:solid 0 #fff;
background: transparent
/** add bg img and browser fixes **/
url("graphics/textfield_bg.gif") no-repeat fixed; }
fieldset>input.textfield {
background: transparent
url("graphics/textfield_bg.gif") no-repeat; }
------------------------------------------------------
IE5
#login input.button:hover
{
background-image:url(../images/login.png);
background-repeat: no-repeat;
height: 69px;
width: 70px;
}
-------------- http://www.rtbwizards.com/helpcenter/cssforms.htm
Warning: you cannot have both a submit button image and a reset button image. Using an image will cause the reset button to also submit the form in Internet Explorer.
From this:
To this:
http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html
20.2.11
Global White Space Reset
CSS Negotiation and a Sanity Saving Shortcut
http://leftjustified.net/journal/2004/10/07/css-negotiation/
Global White Space Reset
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
* {
padding:0;
margin:0;
}
this rule cancels the padding and margin of every single element; something which has already been found to have the negative side affect of hiding the drop-down arrow of a select form widget in Firefox. That problem is very simple to fix, (re-apply padding to select select { min-width:1.5em; } – thanks Bryan) but it does bring up a good point — care should be taken when applying this rule to a page which contains forms as usability must remain paramount whenever styling forms.
* {
padding:0;
margin:0;
}
body {padding:5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
li, dd, blockquote { margin-left: 40px; }
fieldset { padding:10px; }
This will basically replicate the original layout of the page in Mozilla, only it will be cross-browser; no differences on lists or other troublesome elements in IE or anywhere else. That’s effective, but it’s far from exciting. What about if we replaced all the values with relative units (% or em)?
* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
Hey now, that’s a bit more like it! Now we have the basis for a site whereby all side margins are controlled by browser width and all vertical spacing is controlled by font size. Quick, simple and highly usable — this could easily be used as the basis for a solid but highly flexible fluid layout.
-------------
http://www.search-this.com/2007/03/12/no-margin-for-error/
One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.
various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.
Global White Space Reset
These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.
* {margin:0;padding:0}
Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go.
If have been reset to zero, you will need to ensure that there is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)
Drawbacks
First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will lose its "depressed when clicked effect" and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.
You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so. Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.
There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.
You can't add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn't work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.
There is no easy fix -- it's something you have to live with if you use the global reset method.
Conclusion
The global reset is useful for beginners who don't understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.
http://leftjustified.net/journal/2004/10/07/css-negotiation/
Global White Space Reset
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
* {
padding:0;
margin:0;
}
this rule cancels the padding and margin of every single element; something which has already been found to have the negative side affect of hiding the drop-down arrow of a select form widget in Firefox. That problem is very simple to fix, (re-apply padding to select select { min-width:1.5em; } – thanks Bryan) but it does bring up a good point — care should be taken when applying this rule to a page which contains forms as usability must remain paramount whenever styling forms.
* {
padding:0;
margin:0;
}
body {padding:5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
li, dd, blockquote { margin-left: 40px; }
fieldset { padding:10px; }
This will basically replicate the original layout of the page in Mozilla, only it will be cross-browser; no differences on lists or other troublesome elements in IE or anywhere else. That’s effective, but it’s far from exciting. What about if we replaced all the values with relative units (% or em)?
* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
Hey now, that’s a bit more like it! Now we have the basis for a site whereby all side margins are controlled by browser width and all vertical spacing is controlled by font size. Quick, simple and highly usable — this could easily be used as the basis for a solid but highly flexible fluid layout.
-------------
http://www.search-this.com/2007/03/12/no-margin-for-error/
One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.
various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.
Global White Space Reset
These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.
* {margin:0;padding:0}
Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go.
If have been reset to zero, you will need to ensure that there is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)
Drawbacks
First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will lose its "depressed when clicked effect" and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.
You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so. Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.
There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.
You can't add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn't work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.
There is no easy fix -- it's something you have to live with if you use the global reset method.
Conclusion
The global reset is useful for beginners who don't understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.
19.2.11
Nuli! Nuli! Project: Fix gap between divs with top padding
16.2.11
Nuli! Nuli! Project: Sunburst Background
http://www.recipester.org/Recipe:Create_sunburst_effect_in_Photoshop_32566105n
15.2.11
Nuli! Nuli! Project: Wushu Logo Design Finalized
The finished logo (and arrows) has a flexible transparent background. As requested I did not replace the links with buttons; instead I also produced color coded arrows to make its interactive interface more obvious and give clarity to the web sites functionality. They can easily be removed from the table cells. Client was very happy with the design so far. Neither of us were happy with the button style yet.
12.2.11
Nuli! Nuli! Project: Wushu Logo Design Evolution
Developing the logo in Inkscape, using san serif fonts according to client preferences. (Futura Myriad or Blackout)
Decided green & orange color combination provides the contrast and fits the WUSHU - Work Hard charge...as opposed to pink/green for instance.
Turns out all caps Blackout provides the best symmetry.
Added slight gradient to text.
10.2.11
Nuli! Nuli! Project: Logo Design Sketches
Using Asian cultural objects as the concept, these very basic vector sketches are the first step
in the evolution of icons for your logo. Clients preferences run parallel to my own opinion. I thought
the Washu figure invoked “Nuli! Nuli!” (Work Hard!) as well. The next
step in the logo design process will be “photoshopping” one of these basic shapes and experimenting
with typography choices.
Lotus
The Lotus was not one of clients choices, but I had already started my idea as vector. It’s
simple symmetry and scalability makes it a suitable logo, icon or avatar image. Also
readable in black and white.
Chinese lantern
Another simple symmetrical shape that works for a logo, icon or an avatar. This simple
vector image could be used with some simple styling. My only concern was that it may
be mistaken for a Christmas ornament without detail. I have already begun a detailed
colored rendering for the lantern. I need to brainstorm about exactly how to incorporate
it on the page. I would need to work that out as I am determining the page design.
Yin Yang
This image has strong appeal from a design stand point. It can stand alone as a logo,
icon or avatar without text yet easy to incorporate with text. As a geometric shape, its
easily scaled up and down for other purposes. If necessary for black and white print, it
would read well in this pure form. The round shape is fits popular Web 2.0 styling for
icons.
Wushu
This is a rough photo shopped extraction. Although a simple silhouette is my intention
for the logo, I would need to clean up the edges and recreate as a scalable vector
image. (Current format pixilated)
Any of these concepts can provide a strong visual impact that conveys an instant
message about what your website is about while maintaining simplicity in the overall
web page layout. Let me know what you think of these preliminary shapes and
which ones you would like me to continue to develop.
I will soon begin the general CSS styling on the pages, reviewing the mobile device
constraints in order to plan how to incorporate logo and some minimal graphics for web
page design.
in the evolution of icons for your logo. Clients preferences run parallel to my own opinion. I thought
the Washu figure invoked “Nuli! Nuli!” (Work Hard!) as well. The next
step in the logo design process will be “photoshopping” one of these basic shapes and experimenting
with typography choices.
Lotus
The Lotus was not one of clients choices, but I had already started my idea as vector. It’s
simple symmetry and scalability makes it a suitable logo, icon or avatar image. Also
readable in black and white.
Chinese lantern
Another simple symmetrical shape that works for a logo, icon or an avatar. This simple
vector image could be used with some simple styling. My only concern was that it may
be mistaken for a Christmas ornament without detail. I have already begun a detailed
colored rendering for the lantern. I need to brainstorm about exactly how to incorporate
it on the page. I would need to work that out as I am determining the page design.
Yin Yang
This image has strong appeal from a design stand point. It can stand alone as a logo,
icon or avatar without text yet easy to incorporate with text. As a geometric shape, its
easily scaled up and down for other purposes. If necessary for black and white print, it
would read well in this pure form. The round shape is fits popular Web 2.0 styling for
icons.
Wushu
This is a rough photo shopped extraction. Although a simple silhouette is my intention
for the logo, I would need to clean up the edges and recreate as a scalable vector
image. (Current format pixilated)
Any of these concepts can provide a strong visual impact that conveys an instant
message about what your website is about while maintaining simplicity in the overall
web page layout. Let me know what you think of these preliminary shapes and
which ones you would like me to continue to develop.
I will soon begin the general CSS styling on the pages, reviewing the mobile device
constraints in order to plan how to incorporate logo and some minimal graphics for web
page design.
9.2.11
Nuli! Nuli! Project: Wushu Icon Evolution
8.2.11
Nuli! Nuli! Project: Logo Conception - Asian Icons
The premise of our design solution is to incorporate a popular Chinese cultural icon with the Nuli! Nuli! text. I feel the symmetry of the repetition in the site name points to a symmetrical configuration of the logo/text with the icon in the center.
Nuli! (icon) Nuli!
Since first considering this project I have spent a lot of time researching Chinese culture and doing rough sketches on paper. Out of the many iconic objects I discovered, I felt the objects listed below might have potential to be abstracted into silhouettes for a suitable vector image for our symmetrical logo:
Pagoda, gong, Great wall, ying –yang, Buddha, lotus, lantern, Chinese coin, fan
A silhouette of the pagoda immediately conveys CHINESE. It’s symmetrical. I can imagine several ways to render; a simple outline; a solid silhouette of 1 color, 2-3 colors used for each roof layer (your bright color scheme.
The lotus and lantern are also very suitable symmetrical icons, with opportunities for many graphic design techniques using your bright palette of colors.
I imagined incorporating your alternate title, N!N! in a circular icon inspired by this Chinese coin. The duality of the N!N! could be expressed in the two halves of the ying-yang shape. N! in each half.
The wushu martial artist came up as a potential icon; It says “work hard.” I saw this photo (below) and imagined a vector of an abstract silhouette with arms stretch out to juxtapose the 2 Nuli!'s A suitable image of this complexity would be more challenging to render and take more time.
As I said the red paper cut outs really intrigued me. I have a techniques for rendering a vector image that’s a floral conglomerate similar to the nciku example (below), but it might prove quite time consuming to come up with visually satisfying arrangement and replicate a style that signifies the Chinese technique. I also imagined using a cutout (stencil) text effect -- nuli! text cut out of red a background -- suggesting Chinese red paper cutouts
The possibilities for creating a logo are always infinite. It’s important to get the client to think about their target audience and the perceptions they wish to convey. And more importantly it’s important for the designer to facilitate communication to arrive at the most appropriate design solution. Although I may favor certain choices due to my ideas for toward rendering them it’s most important that the image fulfills clients expectation of the visual identity for the web site.
7.2.11
Nuli! Nuli! Project: Color Palette - Mobile Design Consideration
One of the first steps for design conception was getting color preferences from the client.
Legend for color palette
flickr pink smashing mag orange nciku green yahoo purple
flickr blue twitter blue nckiku red paper cut black
gradient color - minimalist background shading
More than likely the final design would use no more than 1- 3 colors. I will be picking from this palette for sketching ideas for graphics and text.
Moblie Device Considerations
The W3 Mobile Best Practices USE_OF_COLOR - states that you should make sure that information conveyed with color is also available without color.
Should use contrasting foreground and background colors means for a readable page that does not use colors for the background color and the text color that are too similar.
Subscribe to:
Posts (Atom)
