cssvault - inspiring creativity

Tired of writing boring XHTML and CSS code at the beginning of every slicing project? The XHTML / CSS Markup Generator is a web based tool that allows users to enter very intuitive, shortened syntax in order to generate corresponding XHTML and CSS markup, speeding up your work.

Sample input looks something like this:

#root
 #top
  #logo
   a[href="/"]=Markup Generator
  form#search
   fieldset
    label[for="query"]=Enter keyword:
    input[type="text" name="term"]#query
    button[type="submit"]=Find
 #header
  h1=Markup Generator
  h2=Nifty tool for XHTML/CSS coders
 #content
  #primary
   #about
  #secondary
   #contact.box
   #notify.box
   #bookmarks.box
 #footer
  p=Copyright (c) 2008 xMS.pl

This will result in the following XHTML and CSS code:

(XHTML):

<div id="root">
    <div id="top">
        <div id="logo">
            <a href="/">Markup Generator</a>
        </div>
        <form id="search" method="post" action="./">
            <fieldset>
                <label for="query">Enter keyword:</label>
                <input id="query" type="text" name="term" />
                <button type="submit">Find</button>
            </fieldset>
        </form>
    </div>
    <div id="header">
        <h1>Markup Generator</h1>
        <h2>Nifty tool for XHTML/CSS coders</h2>
    </div>
    <div id="content">
        <div id="primary">
            <div id="about"></div>
        </div>
        <div id="secondary">
            <div id="contact" class="box"></div>
            <div id="notify" class="box"></div>
            <div id="bookmarks" class="box"></div>
        </div>
    </div>
    <div id="footer">
        <p>Copyright (c) 2008 xMS.pl</p>
    </div>
</div>

(CSS):

#root {  }
 #top {  }
  #logo {  }
   #logo a {  }
  #search {  }
   #search fieldset {  }
    #search fieldset label {  }
    #query {  }
    #search fieldset button {  }
 #header {  }
  #header h1 {  }
  #header h2 {  }
 #content {  }
  #primary {  }
   #about {  }
  #secondary {  }
   #contact {  }
   #notify {  }
   #bookmarks {  }
 #footer {  }
  #footer p {  }

Share

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

Share

CSS Type Set is an online application created to assist beginner CSS developers with the task of font styling. It features an AJAX-powered interface that automagically updates the preview pane in real time. The resulting CSS syntax can then be copied and pasted into a CSS file. Give it a try!

Share

GlassBox is a JavaScript library that allows you to add Windows Vista-like transparent effects on your website. It runs on top of the the Prototype and Script.aculo.us library and comes complete with an API documentation and tons of examples. It is released under the MIT license.

Share

IzzyMenu is a free web-based tool for creating snazzy looking CSS menus with minimal effort.

Check it out!

Share

Microsoft has finally made Internet Explorer 8 Beta publicly available for download, and all I can say is: WTF?

First of all, IE8 can only be installed in Windows Vista SP1, XP SP2, 2008 Server, and 2003 Server SP2. Which leads me to think that this is nothing more than a business ploy to get people to upgrade their *cough* legal *cough* Microsoft OS.

Next, what happened to passing the ACID2 test? After bragging about this milestone months ago, it is still failing for some. The exact reason is still unclear, but this inconsistency is disappointing nonetheless.

Third, what about SVG support? The web community has been stuck with raster formats LONG ENOUGH! How much longer must we wait until we arrive at a standardized vector format?

Finally, let’s look at IE8’s “new and exciting” features:

Activities

Activities are contextual services to quickly access a service from any webpage. Users typically copy and paste from one webpage to another.

Kind of cool, but plugins / extensions / add-ons in Firefox do the trick just fine.

WebSlices

WebSlices is a new feature for websites to connect to their users by subscribing to content directly within a webpage. WebSlices behave just like feeds where clients can subscribe to get updates and notify the user of changes.

Again, sort of cool. I am all for microformats, but RSS feeds are already a standard across all modern browsers in different platforms including mobile, so I doubt web developers will want to develop widgets that will only work on IE8.

Every “feature” listed after Webslices is basically pointless or a replication of a Firefox, Safari, or Opera feature. It’s sort of like the marketing team had to try very hard to come up with something to sell IE8 with. Nothing “new” or “exciting” here.

Favorites Bar

In Internet Explorer 7, the Links bar provided users with one-click access to their favorite sites. The Links bar has undergone a complete makeover for Internet Explorer 8.

So basically, the team spent countless hours designing a new favorites bar that looks just like every other favorites / bookmarks toolbar and added a new menu item that saves favorites directly into the bar and called it a new feature.

This feature, for one, has really left me speechless.

Next!

Automatic Crash Recovery

Automatic Crash Recovery (ACR) is a feature of Windows®Internet Explorer® 8 that can help to prevent the loss of work and productivity in the unlikely event of the browser crashing or hanging. The ACR feature takes advantage of the Loosely-Coupled Internet Explorer feature to provide new crash recovery capabilities, such as tab recovery, which will minimize interruptions to users’ browsing sessions.

Finally IE8 gets a feature that has been in Firefox for AGES! I guess this is their way of admitting that their browser crashes all to often.

P.S. How long did the designers come up with such a cool name as “Automatic Crash Recovery”? If I were them I’d try to trademark that before someone else does.

Improved Phishing Filter

Internet Explorer 7 introduced the Phishing Filter, a feature which helps warn users when they visit a Phishing site. Phishing sites spoof a trusted legitimate site, with the goal of stealing the user’s personal or financial information. For Internet Explorer 8, we are building on the success of the Phishing Filter with a more comprehensive feature called the “Safety Filter.”

I can’t believe this made it to the “New and Exciting Features” list. The marketing team is really on a roll.

Activities, WebSlices, Favorites Bar, Automatic Crash Recovery, and now Safety Filter? What’s next, the Super Cool Browsing History Manager? Seriously who comes up with these names?! While renaming Phishing Filter to Safety Filter would prevent Grandpa Joe from getting a migraine while trying to imagine why he must bring a filter the next time he goes fishing, I must say that this only leads to more confusion.

It would have been much more intuitive if the Phishing Filter were moved as an option below the Security Filter, because the Security Filter does so much more than prevent phishing attacks. For one, there’s the group policy option for blocking unsafe sites, and two … well that’s just about it.

That’s really just about everything that there is with the new IE8 Beta. If this is any indication of what the final product is going to look like, then I guess we are better off without it. As far as web developers are concerned, it’s just another browser to produce hacks for. Speaking of looks, it looks exactly the same as IE7. At least the Mozilla Firefox team made the effort to come up with a new look in Firefox 3.

On a serious note, hard core developers may wish to take a look at the IE8 Beta 1 Whitepapers, which as of today appears to be central to a single new feature: Better AJAX Development. Hooray. Yeah I know I said this was a serious note. But really guys, WTF?

Share

As a follow up to my recent article on CSS-only, tableless forms, do check out the CSS Form Garden, a gallery that showcases uniquely style forms utilizing the same forms technique.

Share

I have long shunned ASP.Net for the ugly and ancient HTML code that it uses for rendering controls. Enter the CSS Friendly Control Adapters kit (CFCA?) for ASP.Net 2.0, which “… provides pre-built control adapters that you can easily use to generate CSS-friendly markup from some of the more commonly used ASP.NET controls …”

Started late 2006 as a Microsoft project, it was released *gasp* open-source and required a lot of extra steps to incorporate into a project. Frustrated by this, an independent developer, Brian DeMarzo, repackaged the code so that it compiled into a single DLL, thus the present form of CFCA.

Although the website pretty much lacks updates, the project is still alive, with the latest release dated Jan 25.

You may download the code here.

Share

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

Share

This technique uses CSS pseudo selectors to the drop cap effect without modifying the HTML code.

For the poor folks who use IE6, David Kaneka came up with a JavaScript (jQuery) based solution that we can use.

So go ahead and see how it’s done or check out the demo page.

Share