SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)

    Thumbs down shiny new features

    Maybe others here are more familiar with the newer features that we can use here and now - but reading through Dan Cederholm's handcrafted css I realised i'm a bit behind.

    Here's a couple that I haven't been taking advantage of:
    Alpha transparency with rgba is an awesome time saver and more flexible way of specifying a color pallete.
    rgba(0, 0, 0, 0.2)
    Code css:
    a { color: rgb(1,2,3) }
    a.lighten-up-a-bit {
      color: rgba(1,2,3,.8);
    }
    alpha transparency in png's is pretty well supported out-of-the-box now. you only need to add a filter for ie6.
    Code css:
    .png-are-go {
      background: url(omega.png);
    }
    * html .png-are-go {
      background: url(blank.gif);
      filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='omega.png', sizingMethod='crop');
    }
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);
    Code css:
    .shadow-boxer {
      -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
      filter: progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=120, Strength=2);
    }
    Sorry if everyone knows all this already - but I flicked through the pages last night and have already found really good places for all of these in todays styling so I thought i'd share. Does anyone else have things that they would add to the list?

    border-radius is a little controversial for me as there's just far too many IE users I want to see nice corners - i would actually prefer to add all the extra markup and images so they can see them. But there's lots of polish we can add for browsers that support it.

    I think I've been out of the trenches for too long..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    A lot of CSS3 features can be used in Firefox and Safari now, but sadly not in IE at all. Many sites now have text shadows, rounded corners and the rest.

    Here's a slight variation on what you've posted above, for adding opacity to a background color, that's found in the SitePoint reference:

    Code:
    .test{
      background: red;
      /* IE filter extension */
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
      width:100%;                /* Required for IE filter */
      -moz-opacity: 0.6;         /* Mozilla extension */
      -khtml-opacity:0.6;        /* Konqueror extension (Safari 1.1)*/
      opacity: 0.6;              /* the correct CSS3 syntax */
    }
    The advice is not to use it in real life, though. That IE stuff is pretty darned ugly. I wouldn't let it anywhere near a main style sheet, but I guess it could be added through conditional comments without too much fuss.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    A lot of CSS3 features can be used in Firefox and Safari now, but sadly not in IE at all. Many sites now have text shadows, rounded corners and the rest.
    text-shadow can be added with an ie filter also.
    The advice is not to use it in real life, though. That IE stuff is pretty darned ugly. I wouldn't let it anywhere near a main style sheet, but I guess it could be added through conditional comments without too much fuss.
    Is that Paul and Tommy's advice?
    Personally I don't have a problem with using filters where it can make life better for the users of IE. An example in Handcrafted CSS is using the AlphaImageLoader when wanting to scale graphics - It makes the image much crispy-er.

    True, they are not standards - But i'm quite used to needing to hack IE.
    You could argue that conditional comments don't belong in html as they're not a standard, that you shouldn't use the meta tags for different IE modes. I'm not really that fussed.

    Lots of people are advising to take advantage of new features to make things better for the users of those browsers that support it. The webkit transitions are an example of where you can add some nice animations between states.

    The main argument is that websites don't have to look exactly the same in every browser. But I'm finding that there's a lot of stuff that does work perfectly fine in all the browsers worth mentioning with a few extra hooks.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Is that Paul and Tommy's advice?
    Paul and Tommy are not Gods .
    If you are going to use border-radius then you are accepting the fact that you will need a workaround for IE (and Opera) (if you are going to give them one)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul and Tommy are not Gods .
    If you are going to use border-radius then you are accepting the fact that you will need a workaround for IE (and Opera) (if you are going to give them one)
    How dare you talk about Paul and Tommy that way!

    I agree on border-radius, which is why I might use it for subtle rounded borders but not for serious rounding - it's more the others things like opacity, shadow, png's that I just didn't touch because of IE's lack of support.

    In a sense embracing the browser deficiencies.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Is that Paul and Tommy's advice?
    I believe it is; it was from the CSS Reference page quoted above.

    Personally I don't have a problem with using filters where it can make life better for the users of IE. An example in Handcrafted CSS is using the AlphaImageLoader when wanting to scale graphics - It makes the image much crispy-er.
    Sure. I occasionally use these things, but I much prefer to put them in a conditional comment (as the lesser of evils, and to keep the main style sheet clean, which then gives it a chance of validating too).

    I'm now starting to learn a bit of unobtrusive JavaScript, and starting to feel that this might be a better way to introduce presentational effects that CSS can't fully handle.

    Quote Originally Posted by RyanReece
    Paul and Tommy are not Gods
    Sacrilege! Thou shalt not speak of the great ones thus...

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I believe it is; it was from the CSS Reference page quoted above.
    Which means it is their advice
    Sacrilege! Thou shalt not speak of the great ones thus...


    Quote Originally Posted by markbrown4 View Post
    How dare you talk about Paul and Tommy that way!
    Ahahaha
    I agree on border-radius, which is why I might use it for subtle rounded borders but not for serious rounding - it's more the others things like opacity, shadow, png's that I just didn't touch because of IE's lack of support.

    In a sense embracing the browser deficiencies.
    Any sort of personalization to the rounding of hte borders will need to be done by images ofc. Border-radius only gives simple edges.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I enjoyed the book too, though while Firefox, Safari, Chrome and Opera support proprietary extensions using the "dash" prefix to give basic support until it's adopted and finalized (the CSS3 spec), it's definitely useful for the future. The one feature I desperately want is multiple backgrounds!!! Would save us plenty of extrenous HTML mark-up wrappers. Unfortunately though while IE still lags behind the others were going to be stuck making do with what we currently have

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Alpha transparency with rgba is an awesome time saver and more flexible way of specifying a color pallete.
    rgba(0, 0, 0, 0.2)
    Code css:
    a { color: rgb(1,2,3) }
    a.lighten-up-a-bit {
      color: rgba(1,2,3,.8);
    }
    It sounds like you actually want hsl() -- not alpha transparency. (Keep in mind that alpha transparency is less performant to render compared to a solid color.)
    Simon Pieters

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Any sort of personalization to the rounding of hte borders will need to be done by images ofc. Border-radius only gives simple edges.
    You can combine it with border-style and box-shadow to get come pretty cool effects.

    Here's an example:
    http://software.hixie.ch/utilities/j...ewer/saved/303
    Simon Pieters

  11. #11
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Which means it is their advice



    Ahahaha
    Any sort of personalization to the rounding of hte borders will need to be done by images ofc. Border-radius only gives simple edges.
    I agree. Tommy & Paul are great web developers dont doubt that one bit. Every developer has room to improve and learn more about the field. But saying they are Gods is kinda of bizarre get real! They didnt invent CSS.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    It sounds like you actually want hsl() -- not alpha transparency. (Keep in mind that alpha transparency is less performant to render compared to a solid color.)
    Good point! You're a very useful person to have around here

    It's good to know about hsl, I can think of more uses for rgba because it allows the colours to blend. Even if it's only for prototyping you can always change the colors to hex values when you're happy with them.
    http://yellowshoe.com.au/examples/rgba.html

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    I agree. Tommy & Paul are great web developers dont doubt that one bit. Every developer has room to improve and learn more about the field. But saying they are Gods is kinda of bizarre get real! They didnt invent CSS.
    I've erected a statue in their honour. The inventor of css was merely a man.

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    I agree. Tommy & Paul are great web developers dont doubt that one bit. Every developer has room to improve and learn more about the field. But saying they are Gods is kinda of bizarre get real! They didnt invent CSS.
    I think Paul is probably better than Håkon at CSS, actually (at least when it comes to doing the impossible in non-compliant browsers).
    Simon Pieters

  15. #15
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I need to get my hands on a copy of this Handcrafted CSS then....

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    I think Paul is probably better than Håkon at CSS, actually (at least when it comes to doing the impossible in non-compliant browsers).
    To be fair we don't seee Hakon that much and I personally feel that statement is biased since we have Paul around here.

    Though I admit Paul can do some great things with CSS. I hope to be up there one day
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Yez, Comradez, you know you are beink spied upon, keep sayink good thinks about Dear Leaderz! : ) Those thinkink bad thinks about Leaderz, know you will be punished in night-time. And, more statues plz.

    The one feature I desperately want is multiple backgrounds!!! Would save us plenty of extraneous HTML mark-up wrappers.
    ++ me too.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Yez, Comradez, you know you are beink spied upon, keep sayink good thinks about Dear Leaderz! : ) Those thinkink bad thinks about Leaderz, know you will be punished in night-time. And, more statues plz.
    Lol @ that entire statement Stomme. I can't describe what you sound like there without seeming mean
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    <natasha>Sound like Former Soviet NoGoodNik, dear boy.</natasha>

    Or mebbe you never saw teh Rocky en Bullwinkle show : )

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    <natasha>Sound like Former Soviet NoGoodNik, dear boy.</natasha>

    Or mebbe you never saw teh Rocky en Bullwinkle show : )
    Off Topic:

    I loved watching that as a kid lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Ya, I bringing up an old thread. Sue me.

    Paul Irish recently made some goofy moderniZed <canvas>-y

    HTML5<audio>HTML5's trademarked sound of angel choir "aaaaa"</audio>

    page which is a pretty neat colour-picker tool: http://mothereffinghsl.com/

    Ok maybe I like the name more than anything else, but still... for those of you who don't just always have the GIMP open and need hsl values, there ya go.

    But the link he has on the bottom does show how easy it can be to get close to the numbers you want entirely in your head and look really awesome to your nerdy web-dev friends:
    http://www.useragentman.com/blog/201...-hsl-notation/

    Now to prevent this post from being entirely without worth, I'll add in this iWhatever app, the one you won't be able to leave home without:
    http://catpaint.info/

    NOW WITH LASERS!

    Everything's more awesome with lasers.

    hslal(120, 50%, 50%, .8, rubymaser);

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    That fat cat should be wearing goggles as the lasers could bounce back and blind him.


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
  •