• 200917 Jun

    Earlier this year we asked if you still want more out of CSS 3 and we found that you did. Of late, we are seeing the dialogue rekindled time and again with great posts being written on other major blogs. Smashing Magazine contributor Inayaili de Leon provides code samples and insight on: using browser-specific properties, selectors, RBGA and opacity, multi-column layouts, multiple backgrounds, word wrap, text shadow. @font-face attribute, border radius, border image, box shadow and more. Definitely great work by de Leon, that also earned a mention from ajaxian. So check out the post and enjoy! Well done Inayaili!

    You can skip to the end and leave a response.

  • Comments

    • 01.

      Thanks. I’m always looking for more CSS3 stuff.

    • 02.

      The smashing link is awesome!

    • 03.

      Nice. More examples of some CSS3

    • 04.

      […] delighted that CSS3.info has mentioned my article, I <3 them! http://www.css3.info/css3-rekindled/ (via […]

    • 05.

      This is great!

    • 06.

      Same here – the more stuff CSS3 that gets put out, the better. I like multiple columns, but I too could see this construct becoming abused in the future (multicolumn layouts that are too high so you keep having to scroll up and down to see the content). I think that the more CSS3 that we hear about the better, but I also think that all those who end up using it should become educated on how to use them ahead of time as opposed to abusing them, and know when to use them and when not to. A lot of copier-pasters (those who made Javascript infamous with 24kb html pages with 52kb of Javascript) will need to be pushed into not doing this same thing with CSS3.

    • 07.

      @Josh B that’s a great point. I definitely enjoy being able to accomplish interface effects and treatments with pure markup and CSS as opposed to relying on JS whether it’s crisp and minified or not.

    • 08.

      I’m always adding progressive enhancement to the sites I work on, just to add some niceness to give the user a slighlty better experience.

    • 09.

      @Frederick: indeed. I use jQuery myself for various things on my websites (and on some pages use jQuery UI – I just love movable and droppable boxes, xD), but the sites’ functionalities don’t absolutely depend on it. It’s simply an extra bonus for people who have scripts enabled – anything that’s dependent fully on scripts is simply hidden unless scripts are enabled/present on the client side. Things such as loading a forum categories/boards index through AJAX are initially hidden, for example. For low connections and certain devices, elements that have script are usually disabled.

      Anyway, I’m the same with CSS and markup – for my primary site I use SMF forum and TinyPortal, but it’s all been completely changed. I haven’t used presentational attributes for so long that some I’ve mainly forgotten about. CSS really makes things a lot less redundant, and makes code way more manageable and consistent. Initially with my site’s layout, out of the box that is, it depended mainly on random margins, padding, and so on – the dread of pixel-defined fonts were also present (oh no!).

      These are the main reasons why I like CSS3 so much. The more it moves along, the less Javascript that has to be done to accomplish it. In the past I tried out JS addons for rounded borders, border-images, and so on, and often times they’d crash IE, and to add to it, even minified some of these scripts were simply massive – massive enough to make IE collapse into a neutron star!!

      Unfortunately, I still see many folks out there who use, even with XHTML 1.0 Strict DTD, things such as marquee, blink, and iframes that have weird ugly borders around them. Everything I suggest involves CSS, but some out there don’t wanna hear about CSS. Two months later they begin using it and then that’s when they say they can’t live without it!

      I’ve taken use of things such as database-stored CSS, the storing of CSS vital to various pages so that some of the CSS isn’t used for things that aren’t necessary to use it for. And this will only continue to expand as CSS3 grows, along with browser support. My main site has rounder borders (webkit, mozilla) so when viewing it with any version of IE, it looks slightly ‘off’ but I think it’s a small price to pay, because eventually IE will support it (when the spec becomes mature enough to them to use it, which is about 15 years or so xD).

      @Ryan: Wow, definitely a nice site too! Gotta love that logo too! I particularly like the Futurebox article – it’s a good example of what’s been discussed here! Great stuff!

    • 10.

      @Josh B: Thanks for the kind words. Glad you liked the Futurebox article.

    • 11.

      I find it surprising the author of the Smashing Magazine article apparently doesn’t have Firefox 3.5 installed to experiment with CSS3.

      As you can see from comments like:

      “Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.”

      “Browser support: box-shadow is currently supported only by Webkit-based browsers, but the upcoming Firefox 3.5 will very likely support it as well.”

      Nothing is “uncertain” or “very likely” at this point, it’s already been set in stone before the first beta (for those who didn’t follow, both properties will be in).

    • 12.

      What file extension do I use for CSS3 documents?

    • 13.

      CSS3 file type? Just *.css as before. You can be using some of CSS3’s currently-supported specs right now in your already-existing *.css style sheets. Granted, some only work on Webkit or KHTML, or on Mozilla/Firefox. Some only work on IE, oddly enough. xD IE loves to build the giant laser before building the power source for it! xD

    • 14.

       Could some1 list supply a link with the CSS 3 properties that are supported in IE?

    • 15.
    • 16.

      Very informative blog post. Want more.


Advertise here?