in

ExpressionBlog.com

Microsoft Expression Studio Community

This Blog

Syndication

Mirrored Blogs

Browse by Tags

All Tags » CSS (RSS)
  • Spifftacular borders with CSS3

    #mycontent { margin-left: 10px; position: relative; width: 200px; height: 140px; padding: 10px; } #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('http://blogs.msdn.com/photos/template/images/8686157/original.aspx'); top: 0; left: 10px; } #mycontent .lb { background-image:url('http://blogs.msdn.com/photos/template/images/8686154/original.aspx'); top: 10px; left: 0; } #mycontent .bb { background-image:url('http://blogs.msdn.com/photos/template/images/8686156/original.aspx'); left: 10px; bottom: 0; } #mycontent .rb { background-image:url('http://blogs.msdn.com/photos/template/images/8686150/original.aspx'); 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('http://blogs.msdn.com/photos/template/images/8686160/original.aspx'); right: 0; top: 0; } #mycontent .tlc { background-image:url('http://blogs.msdn.com/photos/template/images/8686158/original.aspx'); left: 0; top: 0; } #mycontent .brc { background-image:url('http://blogs.msdn.com/photos/template/images/8686153/original.aspx'); right: 0; bottom: 0; } #mycontent .blc { background-image:url('http://blogs.msdn.com/photos/template/images/8686151/original.aspx'); left: 0; bottom: 0; } #mycontent p { margin: 10px; } #mycontentcss3 { width: 180px; height: 120px; padding: 10px; border: double #003663 10px; -webkit-border-image: url("http://blogs.msdn.com/photos/template/images/8686155/original.aspx") 10 10 10 10 repeat; border-image: url("http://blogs.msdn.com/photos/template/images/8686155/original.aspx") 10 10 10 10 repeat; } #mycontentcss3 p { margin: 0; margin-bottom: 10px; } .clear { line-height: 0; height: 0; width: 0; clear: left; } #xhtmlcss2, #xhtmlcss3,#csscss2, #csscss3 { margin-left: 10px; margin-right: 10px; max-height: 400px; overflow: auto; background-color: #333; } 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...
  • Free online Training from HP

    Hewlett Packard is providing a free online training for Expression Web 1 (not version 2 of Expression Web ) by Virginia O'Connor . Even though the course is for version 1 of Expression Web, I didn't see anything in the content that can't be applied to version 2 . The training consists of four lessons from May 8 - June 13th, 2008 and their website indicates the training materials will be taken down when the course ends so be sure to sign uo and get the content before June 13th, 2008. Here's the course description from the HP website: Building websites with Expression Web This class covers the basics for creating a website with Microsoft's Expression® Web with features such as toolbars, formatting, page layouts and link creation. With this easy website creation software, you'll apply cascading style sheets, then learn how to create complex queries, how to configure the software for different browsers and how to create interactive web pages with ASP.NET 2.0 capabilities. http://h30187.www3.hp.com/sessions/overview/p/courseSessionId/16257 Anna
  • CSS Sculptor by Eric Meyer for Expression Web 2 or 1

    We're excited to announce that Eric Meyer ( http://meyerweb.com/ and http://www.complexspiral.com/ ), internationally recognized authority on HTML, CSS, and web standards, and author of some of the essential books on CSS (as if you didn't already know all that!), has released a pre-release version of his CSS Sculptor for Expression Web. The CSS Sculptor for Expression Web helps you create custom web standards compliant, CSS-based layouts. Finally, you can confidently and resolutely abandon your antiquated table-based layouts and start churning out CSS layouts like nobody's business! To work with the CSS Sculptor, download the CSS Sculptor installer, close Expression Web, and then run the CSS Sculptor installer. Once the installation is done, start Expression Web (either 2 or 1), and you will have two new items. On the Insert menu, you will have a new WebAssist submenu, like this: And on the File menu, you will have a new command named New CSS Sculptor Page, like this: Keep an eye on this blog for another post in which we walk you through using this cool new tool! After you try the tool out, give Eric your feedback directly by commenting on his own blog post about this tool: http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/ And join in a discussion about the tool, or seek out help or advice, on the new Expression Web forum: http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/ And as always, let us know what you think! Anna