Development World

New Development Technologies , Computer Last News , Tips & Tricks , UI , CSS , HTML , ASP , C# , .net Framework , Patterns & Practices & etc

Creating a Glass Button: The Complete Tutorial

Well, it was a while back that I posted the first Creating a Glass button tutorial. Of course, that was based on the old look of Sparkle, and I have had some feedback recently that the project doesn't run anymore. Also, the completed tutorial never 'made it to press' leaving people with a rather lifeless button.

Well folks - GREAT NEWS - I have finished working on a all new glass button. And what better design to follow than some of the glass buttons in our shiny new OS.

Windows Vista task bar 

The Windows Vista taskbar has some real nice buttons - they are see through and have an internal glow. So, I though I would base my all new complete glass button tutorial on these babies. I also hope there is enough content in the tutorial to help you explore other designs and other controls.

picture of the glass buttons app runing

So, attached to this post are the full instructions for creating the buttons above. I have also attached the finished project if you want to explore what I have done. 

This has been a while coming, so please enjoy!

To Read The Tutorial Please Download The Attachment

Reference : http://blogs.msdn.com/mgrayson/archive/2007/02/16/creating-a-glass-button-the-complete-tutorial.aspx

Published 16 February 07 03:33 by Martin Grayson
Filed under: Blend, Design, Controls

Attachment(s) :  CreatingTheGlassButton.zip
نویسنده : Nasser Hajloo : ٦:٥۳ ‎ب.ظ ; ۱۳۸٧/٢/٢٤
Comments پيام هاي ديگران ()      لینک دائم

30 Exceptional CSS Techniques and Examples

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

2. Advanced CSS Menu

A creative and complex navigation scheme.

Advanced CSS Menu

3. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

Stu Nicholls: CSSplay- Sliding Photograph Galleries

4. Lightbox Slides

Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.

Bite Size Standards - Supercharge your image borders

5. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".

Drop shadow on an image

6. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery

7. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

SimpleBits - CSS Photo Zoom

8. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

Dnevnik eklektika - CSS gallery layout—smells like a table

9. Sticky Footer

A static footer with very little XHTML required.

Sticky Footer

10. whatever: hover

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

11. CSS-Only Accordion Effect

An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

The CSS-Only Accordion Effect - CSSnewbie

12. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

13. Pushbutton Links

links that are styled to look like buttons without using images.

MikeCherim.com - Pushbutton Links

14. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

Scrollable Table with Fixed Header

15. Content Overlay with CSS

When you hover over the image, the container div is shown with more text.

Snook.ca -  Content Overlay with CSS

16. A CSS styled table version 2

A beautifully styled, table with semantic mark-up - uses a background image.

A CSS styled table version 2

17. PNG Overlay

Another way to add flare to images (rounds the corners and adds a border and drop shadow).

PNG Overlay

18. Showing Hyperlink Cues with CSS

Simple tutorial on adding icons to different types of links.

Ask the CSS Guy - Showing Hyperlink Cues with CSS

19. Simple Rounded Corner CSS Boxes

Uses only one image and very few lines of code and mark-up.

MODx Content Management System - Simple Rounded Corner CSS Boxes

20. Sitemap Celebration

Tree-like navigation using nested lists, great for sitemap pages.

Zab Design - Sitemap Celebration

21. Easy cross-browser transparency

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

Bite Size Standards - Easy cross-browser transparency

22. Curved corners 2

Fluid width and height divs with rounded corners.

HTML Dog - Curved corners 2

23. Creating a graph using percentage background images

List items

  • styled into bar graphs.

    Creating a Graph using Percentage Background

    24. CSS Bar Graphs: Examples

    3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.

    CSS Bar Graphs: Example

    25. Animated Rollover Arrow

    The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

    Animated Rollover Arrow

    26. A CSS-based Form Template

    Showcases an accessible web form.

    Nidahas - Forms markup and CSS - Revisite

    27. CSS Image Text Wrap

    Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

    CSS Image Text Wrap

    28. Before your very eyes - a fade-in image

    A demo using opacity and a single image that gradually fades in to cover the text.

    CSS Play - Before your very eyes - a fade-in image

    29. Pure CSS Pop-ups

    A pop-up technique that works even in IE 5 Mac.

    30. CSS Gradient Text Effect

    Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.

    Reference :


    http://sixrevisions.com/css/30_css_techniques_examples
  • نویسنده : Nasser Hajloo : ۱۱:٢٧ ‎ق.ظ ; ۱۳۸٧/٢/۱٧
    Comments پيام هاي ديگران ()      لینک دائم

    [Howto] Recover HFS+ partition error after Vista installation

    This guide is for restoring our nice, working hackintosh's darwin bootloader.

    Basically, Vista RTM foobars our working MBR's bootloader and you get "HFS+ partition error".
    In following, I will assume we have one HDD with two partitions: part#1 = OSX and part#2 = Vista

    1. Boot off OSX dvd disc in single user mode (press F8 and type -s)
    2. At single user prompt
    fdisk -e /dev/rdisk0
    flag 1
    update
    write
    quit
    4 reboot

    At this point OSX should boot up, just like prior to Vista installation.
    1 In a terminal window,
    su root
    fdisk -e /dev/rdisk0
    flag 2
    quit
    2 reboot

    Vista will say "\Window\system32\winload" corrupted, and it will tell you to insert Vista disc and recover.
    Follow directions from Vista and recover, then reboot. Check Vista boots and works fine.

    1. Boot off OSX dvd disc for single user one last time (press F8 and type -s)
    2. At single user prompt
    fdisk -e /dev/rdisk0
    flag 1
    quit
    3. reboot

    You will discover that Vista recovered and left MBR's darwin bootloader intact smile.gif.
    Happy ending.
    نویسنده : Nasser Hajloo : ٢:٥٦ ‎ب.ظ ; ۱۳۸٧/٢/۱٦
    Comments پيام هاي ديگران ()      لینک دائم

    VS 2008 Web Development Hot-Fix Roll-Up Available

     

    One of the things we are trying to do with VS 2008 is to more frequently release public patches that roll-up bug-fixes of commonly reported problems.  Today we are shipping a hot-fix roll-up that addresses several issues that we've seen reported with VS 2008 and Visual Web Developer Express 2008 web scenarios.

    Hot Fix Details

    You can download this hot-fix roll-up for free here (it is a 2.6MB download).  Below is a list of the issues it fixes:

    HTML Source view performance

     

    • Source editor freezes for a few seconds when typing in a page with a custom control that has more than two levels of sub-properties.
    • “View Code” right-click context menu command takes a long time to appear with web application projects.
    • Visual Studio has very slow behavior when opening large HTML documents.
    • Visual Studio has responsiveness issues when working with big HTML files with certain markup.
    • The Tab/Shift-Tab (Indent/Un-indent) operation is slow with large HTML selections.

     

    Design view performance

     

    • Slow typing in design view with certain page markup configurations.

    HTML editing

    • Quotes are not inserted after Class or CssClass attribute even when the option is enabled.
    • Visual Studio crashes when ServiceReference element points back to the current web page.

    JavaScript editing

     

    • When opening a JavaScript file, colorization of the client script is sometimes delayed several seconds.
    • JavaScript IntelliSense does not work if an empty string property is encountered before the current line of editing.
    • JavaScript IntelliSense does not work when jQuery is used.

    Web Site build performance

     

    • Build is very slow when Bin folder contains large number of assemblies and .refresh files with web-site projects.

    Installation Notes

    For more information on how to download and install the above patch, please read this blog post here.  In particular, if you are using Windows Vista with UAC enabled, make sure to extract the patch to a directory other than "c:\" (otherwise you'll see an access denied error).

    To verify that this hot-fix patch successfully installed, launch VS 2008 and select the Help->About menu item.  Make sure that there is an entry that says ‘Hotfix for Microsoft Visual Studio Team System 2008 Team Suite – ENU (KB946581)’. 

    If you ever want to remove the patch, go to Control Panel -> Add/Remove Programs and select “Hotfix for Microsoft Visual Studio 2008 – KB946581” under Microsoft Visual Studio 2008 (or Visual Web Developer Express 2008) and click “Remove".

    Summary

    Obviously it goes without saying that we would have liked to have shipped without any bugs.  Hopefully this hot-fix enables you to quickly solve them if you are encountering them.  Thank you to those who helped us identify the causes of these issues, as well as to the group of customers who have helped us verify the above fixes the last few weeks.

    Note: If you do encounter issues with VS 2008 features for web development in the future, I recommend always asking for help in the VS 2008 Forum on http://www.asp.net/.  The VS Web Tools team actively monitors this forum and can provide help.

    Hope this helps,

    Reference :

     http://weblogs.asp.net/scottgu/archive/2008/02/08/vs-2008-web-development-hot-fix-roll-up-available.aspx
     

    Download : https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=10826

    نویسنده : Nasser Hajloo : ۱:٤٢ ‎ب.ظ ; ۱۳۸٧/٢/۱٦
    Comments پيام هاي ديگران ()      لینک دائم

    Windows XP Service Pack 3 Final

    Windows XP SP3 description
    Microsoft periodically combines updates, fixes, and other improvements into a single package - Service Pack

    Microsoft develops updates, fixes, and other improvements that address issues reported by the company’s customers and partners. To make it easier for customers to get these updates and enhancements, Microsoft periodically combines them into a single package, and makes that package available for all Windows customers.

    These packages are called service packs", Microsoft revealed in the introduction of the Overview of Windows XP Service Pack 3. With the Release Candidates of Vista SP1 and Windows Server 2008 heading to increased testing pools the past week, and with Microsoft cooking the first public build of the first refresh for its latest Windows client, the official overview for XP SP3 is the only crumb from the service pack fiesta over at the Redmond company. The Release Candidate of XP SP3 in a pre-final stage has already shipped to MSDN and TechNet subscribers.

    Reference & More Link :

    http://bink.nu/news/windows-xp-service-pack-3-officially-avaiable-to-all.aspx

    Direct Download : http://www.microsoft.com/downloads/details.aspx?FamilyID=2fcde6ce-b5fb-4488-8c50-fe22559d164e&DisplayLang=en

    Direct Download Service Pack 3 Final From Microsoft :

    http://www.microsoft.com/downloads/details.aspx?FamilyID=2fcde6ce-b5fb-4488-8c50-fe22559d164e&DisplayLang=en


    Unable to connect to Visual Studio's Localhost Web Server

    Screwing up an installation is so easy! I realized it when I was working on an issue today and had to uninstall the .NET Framework (that's different story ;o). I used my Control Panel and uninstalled it, but I was not done yet! I wanted to wipe out all traces of .NET 2.0 from my box and I deleted the C:\WINNT\Microsoft.NET\Framework\v2.0.50727 folder. Then I simply re-installed it and found that everything was working fine except the projects which were being accessed through FileSystem. I was not able to debug those projects at all... Even a CTRL+F5 wouldn't work!!

    Here is the error message which I got...

    ---------------------------
    Microsoft Visual Studio
    ---------------------------
    Unable to connect to Visual Studio's Localhost Web Server
    ---------------------------
    OK  
    ---------------------------

    Very soon, I found that there is a file called WebDev.WebServer.exe which was located in C:\WINNT\Microsoft.NET\Framework\v2.0.50727 folder and it was gone since I deleted the folder itself! Aahh... too late... But I was really happy when I found that when I copied the file WebDev.WebServer.exe from one of my colleague's box, it worked absolutely fine :o) And that just saved me a lot of time!

    I would have hated myself, if I had to re-install the VS 2005 just because of a simple mistake.

    The point to be noted here are...
    1) Don't use Shift+Del to delete important folders. It is better to rename it ;o) (as if you didn't know already!)
    2) In case you do the same mistake as I did... find a person who has the file, and Copy + Paste!!
    3) It seems like VS2005 installation puts the file (WebDev.WebServer.exe) in the Framework folder. Take good care of it :o)

    نویسنده : Nasser Hajloo : ۱٢:۱٤ ‎ب.ظ ; ۱۳۸٧/٢/٥
    Comments پيام هاي ديگران ()      لینک دائم