SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot wh33t's Avatar
    Join Date
    Aug 2011
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Come help a programmer do some design with nothing but CSS :D

    Hey SP,

    I've never posted anything related to design on these forums because I never attempt to do any design. Normally I rely on designers that I work with to do that for me, but I'm working on a personal project (kind of like my own CMS) and I would like to be able to add some style flair to it. The catch is that I don't want to use any graphics, but if need be I will (custom logo, custom bullets etc). So I've been trying to scour the web looking for CSS templates and the like but all of them are quite image heavy and I figured some of you designers out there might know of some good websites that show off just how much CSS can do without images or perhaps have learned some tricks along the way to achieve this. My main goal is to make the majority of the website's layout and appearance customizable through the CMS itself. While this isn't difficult for me to program, it's difficult for me to design, so any tips in the right direction would be great. Ultimately I hope to end up with a website that isn't hideously ugly which for me is quite a challenge.

    Thanks in advance.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a good one I came across the other day http://nicolasgallagher.com/pure-css-gui-icons/demo/

  3. #3
    SitePoint Zealot wh33t's Avatar
    Join Date
    Aug 2011
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Here is a good one I came across the other day http://nicolasgallagher.com/pure-css-gui-icons/demo/
    Wow, that's super relevant to what I'm hoping to find! Thank you.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Wow this is a good resource I just found http://daneden.me/animate/

  6. #6
    SitePoint Zealot wh33t's Avatar
    Join Date
    Aug 2011
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Wow this is a good resource I just found http://daneden.me/animate/
    More awesomeness! Keep em coming!

    May I ask, if you know, what is up with the "after" word that keeps appearing in these CSS examples?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by wh33t View Post
    May I ask, if you know, what is up with the "after" word that keeps appearing in these CSS examples?
    This page will explain it better than I can:

    http://reference.sitepoint.com/css/pseudoelement-after

  8. #8
    SitePoint Zealot wh33t's Avatar
    Join Date
    Aug 2011
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This page will explain it better than I can:

    http://reference.sitepoint.com/css/pseudoelement-after
    Hrm, I'm very confused. Why would you want to render something after it's been rendered? I don't understand the point of it?

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,231
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The pseudoclasses :before and :after create "generated" content. Stuff that can be rendered without adding more HTML.
    It's incredibly useful. The example in the middle of the page that Ralph suggested shows a simple application of :after. You might wonder why that couldn't have been done in the HTML, and indeed it could have. (Remember, this is just an example.) The point is that the additional piece is being rendered *without* having added it to the HTML. You'll catch the wave after you have seen it in action (small pun intended).

  10. #10
    SitePoint Zealot wh33t's Avatar
    Join Date
    Aug 2011
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The pseudoclasses :before and :after create "generated" content. Stuff that can be rendered without adding more HTML.
    It's incredibly useful. The example in the middle of the page that Ralph suggested shows a simple application of :after. You might wonder why that couldn't have been done in the HTML, and indeed it could have. (Remember, this is just an example.) The point is that the additional piece is being rendered *without* having added it to the HTML. You'll catch the wave after you have seen it in action (small pun intended).
    How is this useful? Can you give me a real world example of where / when this might be useful? I still don't quite understand. Putting content in a style sheet seems like a bad idea for all kinds of reasons.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Obviously it's not a great idea to use :before and :after for important content, but it's incredibly useful for a whole range of styling needs—saving you from needing extra elements in the HTML to do things that are merely presentational. This article has an interesting discussion:

    http://css-tricks.com/css-content/

    One use he makes of these is to add tick marks to visited links.


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
  •