July, 2008

  • Expression Web team blog

    Spifftacular borders with CSS3

    • 0 Comments

    I've been reading a lot about CSS3 lately, where it's going and all the cool stuff I can't wait for browsers to implement. My personal favorite at the moment is the ability to easily use graphics for borders. Say I want to go crazy with my borders and create something like this:

    This is my spiffy box with any graphic border I want.

    To give you an idea of how we'd have to do that in CSS 2 world you would need eight individual images, and a big honkin' code block like this.

    xhtml

    <div id="mycontent">
      <div class="tb"></div>
      <div class="bb"></div>
      <div class="lb"></div>
      <div class="rb"></div>
      <div class="trc"></div>
      <div class="tlc"></div>
      <div class="brc"></div>
      <div class="blc"></div>
      <p>This is my spiffy box with any graphic border I want.</p>
    </div>

    CSS2

    #mycontent {
      margin-left: 10px;
      position: relative;
      width: 200px;
      height: 140px;
      padding: 10px;
      float: left;
    }
    #mycontent .tb, #mycontent .bb {
      position: absolute;
      height: 10px;
      width: 200px;
    }
    #mycontent .lb, #mycontent .rb {
      position: absolute;
      height: 140px;
      width: 10px;
    }
    #mycontent .tb {
      background-image:url('images/top.png');
      top: 0;
      left: 10px;
    }
    #mycontent .lb {
      background-image:url('images/left.png');
      top: 10px;
      left: 0;
    }
    #mycontent .bb {
      background-image:url('images/right.png');
      left: 10px;
      bottom: 0;
    }
    #mycontent .rb {
    background-image:url('images/bottom.png');
      top: 10px;
      right: 0;
    }
    #mycontent .trc, #mycontent .tlc, #mycontent .brc, #mycontent .blc {
      position: absolute;
      height: 10px;
      width: 10px;
      background-repeat: no-repeat;
    }
    #mycontent .trc {
      background-image:url('images/topright.png');
      right: 0;
      top: 0;
    }
    #mycontent .tlc {
      background-image:url('images/topleft.png');
      left: 0;
      top: 0;
    }
    #mycontent .brc {
      background-image:url('images/bottomright.png');
      right: 0;
      bottom: 0;
    }
    #mycontent .blc {
      background-image:url('images/bottomleft.png');
      left: 0;
      bottom: 0;
    }
    #mycontent p {
      margin: 10px;
    }

    Whew, that was an exhausting amount of typing, especially if you hunt and peck.

    Additionally, problems with the above method abound. For one it's limited to fixed pixel sizes. So if your content starts pushing the height limits of its box it's not the easiest to fix.

    Here's how it's improved in CSS3. Less code and only one image is needed.

    xhtml

    <div id="mycontentcss3">
      <p>This is my spiffy box with any graphic border I want.</p>
      <p>Only its CSS3 improved</p>
    </div>

    CSS3

    #mycontentcss3 {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 120px;
      padding: 10px;
      border-width: 10px;
      border-image: url("images/polyborders.png") 10 10 10 10 repeat;
    }
    #mycontentcss3 p {
      margin: 0;
      margin-bottom: 10px;
    }

    Fingers are much less tired in the CSS 3 version.

    If your browser has support for border-image the results below will match the top example. Otherwise you'll see a double blue border:

    This is my spiffy box with any graphic border I want.

    Only its CSS3 improved

    The new CSS3 attribute border-image is where all the magic happens. To break down the anatomy of a border-image property it's as follows:

    1. url to the image you want to use for the border
    2. pixels to use from top of image for top border
    3. pixels to use from right of image for right border
    4. pixels to use from bottom of image for bottom border
    5. pixels to use from left of image for left border
    6. stretch, repeat or round

    At first I was confused by the above too but it actually turns out to be really simple. Basically you create an image that looks like a mini version of your border box. My image was:

    Polygon Borders

    Then you specify in the 2-5 options above how many pixels you need from each edge to form your borders. It automatically does the intersections of the numbers to grab the correct corners. Then you tell it how it should render the border.

    • Stretch will take a single border edge and stretch its height or width to match the pixel dimensions you need.
    • Repeat will repeat the graphic over and over to fill the area.
    • Round will do almost the same as repeat only it will stretch the border segments individually so that you don’t have any one border graphic split in the middle.

    Additionally, unlike the CSS2 border method this has no problem easily resizing and growing based on the content inside the bordered box.

    As of July 2008, Safari and other webkit-based apps are the only browsers supporting it and you have to use the -webkit- prefix to get it. But fingers crossed we'll see other browsers hopping on board and be able to add this to our developer toolbelt.

    Cheers.
    Alex
    Program Manager, Microsoft Expression Web

  • Expression Web team blog

    How to get 60 days out of your free 30 day Expression web 2 trial

    • 0 Comments

    The free trial version of Expression Web 2 is described as a "30 day" free trial on the FAQ for Expression Web 2 and in one of the screens that appears during installation of the program. In theory, after 30 days have passed the program should not start unless you enter a product key that you've purchased.

    In reality, the trial period ends and the trial program stops running at the end of the month that follows the month you installed the program. This means that if you download and install Expression Web 2 on July 1, 2008, the program won't expire until August 31, 2008, or 62 days later. If you install the program on July 31st, the program will also expire August 31...giving you only 32 days with the program. So if you want to get the most out of your free trial period, download the program at the start of the month!

    After the trial version of Expression Web 2 expires, don’t forget that you can get the upgrade version for only $99 if you own any one of the following:

    • Licensed copy of an earlier version of Expression Web
    • Microsoft Office - any version
    • Microsoft FrontPage® - any version
    • Quark QuarkXPress - any version
    • Adobe Creative Suite - any version
    • Adobe/Macromedia Flash or Director - any version
    • Adobe/Macromedia Dreamweaver - any version
    • Adobe GoLive - any version

    Anna

    anna_head_greenbg100

Page 1 of 1 (2 items)