SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using CSS to produce "interesting" messages

    Hello!

    I'm creating my first website and am the point that it's functional, and now, I'd really like for it to look good.

    As a newbie to the process, it's the first time that I'm really using CSS and I think that it would be helpful to get some style advice in conjunction with CSS. In particular, on my site I'll have different types of messages such as "Correct!", "Explore!!!" and "Incorrect..." (it's got lots of quizzes/school stuff).

    I guess my question, then, is whether anyone has advice on a CSS type site that could give me some ideas about the best way to accomplish this, for example, graphics? combination of font-type/graphic? If the site had examples of "good" font uses, that would be even better.

    Thanks so much,

    Eric

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You cold do it with nice background colors on the messages, maybe rounded corners and the like, so CSS itself gives quite a few options. But it would be helpful if you supplied some examples, or some graphics, of what you are thinking of. Say a page of text or something. Otherwise, the question is a bit too open ended (at least in my view).

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    I am going to assume that the messages would be there with or without css?
    CSS cant be used to determine weather a quiz answer is correct or not.

    however if your site is working to the level that the message: "Correct" is being displayed aledy CSS can give so many styling options, they are almost impossible to list here.

    the key is this tho:
    when themessage is output make sure it has a css class like such:

    <p class="message'> I am an interesting message!!!<p>

    now it becomes up to you what you DESIRE it to look like ( at this poit is not so much CSS, as art direction that is needed) once that's settled.. let say for example you designed the message with a bold, inset text and a island bg, actually lets give individual answers their own bg ( one island the other a mountain) you can place rules to create that in your css as such:

    .message { color:#ccc; text-shadow: 1px 1px 1px #000; font: uppercase bold 200%/1.2 Helvetica, Arial, san-serif; widthwidth of image)px}/*simple rough embossed look*/
    #limits{background:url(images/island.jpg) center top #(some blueish color) no-repeat;}
    #derivatives{background:url(images/mountains.jpg) center top #(some greenish color) no-repeat;} (prepare the images so they are of equal width and fade to a corresponding color at the bottom...)

    <p class="message" id="limits>I am an interesting message about limits!!!</p>
    <p class="message" id="derivatives>I am an interesting message about derivatives!!!</p>


    Thats the basic foundation. There is of course tons more you could do, especially progressive enhancement using cs3 but that part is really up to the taste of the designer.

    Look at csszengarden for a alage example of how the same HTML code was embellished in different ways by hundreds of different designers

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for a very helpful reply, with an impressive amount of math jargon thrown in.

    Your examples give me some ideas and the site that you told me about is going to be particularly helpful.

    -Eric


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •