If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left "jumps" for a few times. I love that animation. And that's why I'm going to show you how to create the same button using jQuery and some simple CSS. Download source View demo If you are not sure what button am I talking about, image below might help you.   And this is how our button will look like: Ok, the task here is quite simple - I want the icon to jump for a few times when I hover the button. (In Skype window this icon jumps when you click on it, but I think it would be much better to have it jump on hover) The button itself consist of an image and text placed inside of a link. <a class="button" href="#">     <img src="button.png" alt="" />Send info</a>     or <a href="#">cancel</a> Let's style the button. CSS code for this is simple and won't go through all the classes here. The key is that the icon is absolutely positioned inside its relatively positioned container - the link. The position of the icon is set to simulate Skype button, and that is to cover the left side of the button. Please note that you will see the rounded corners on the button only in Firefox thanks to -moz-border-radius- properties. .button {     padding: 4px 10px 3px 25px;     border: solid 1px #8AB134;     position: relative;     cursor: pointer;     display: inline-block;     background-image: url( 'bkg.png' );     background-repeat: repeat-x;     font-size: 11px;     height: 16px;     text-decoration: none;     color: #40740D;     -moz-border-radius-bottomleft: 5px;     -moz-border-radius-bottomright: 5px;     -moz-border-radius-topleft: 5px;     -moz-border-radius-topright: 5px; } .button img {     position: absolute;     top: -4px;     left: -12px;     border: none; } .button:hover {     color: #8AB134; }  Now the animation. We have three jumps on original Skype button - one large and two small jump. In first jump, icon will go up for 6px, in second 3px and in the last jump 2px. After each jump, the icon will go back to its original position defined in CSS. I guess it is pretty much similar to the Skype button. $(document).ready(function(){     $(".button").hover(function(){         $(".button img")             // first jump              .animate(, 200).animate(, 200)             // second jump             .animate(, 100).animate(, 100)             // the last jump             .animate(, 100).animate(, 100);     }); }); Code is tested in Firefox, Safari and IE7. If this doesn't work in IE6, I simply don't care. The icon used in this tutorial is from Developpers Icons set. Now try the demo, download the source code and enjoy styling your new buttons!  

button quot jump icon animate border skype position radius hover image simple function firefox buttons link href inside none code

I haven't had much time last week but despite this here are 17 interesting links and 5 beautiful web sites. CSS-Based Forms: Modern Solutions Great article full of examples The Calvin & Hobbes Super-Stupendous Guide to Design Learn about design through comics .NET Regular Expressions Find and Replace Add-In for Visual Studio 2008  I needed this stuff some time ago. How to build a front page How much time do you invest in designing home page? Microsoft 2019. Why not now?  Yeah, why not now? 11 Excellent Solutions for Creating Tooltips Really excellent resources, Prototip 2 tips are amazing Complete Beginner’s Guide to Information Architecture These guys just can't made bad article, they are on my least each week. Web Design from the Gut   Extraordinary article by Nishant Kotary Key Components of a Clean and Readable Blog Article You should really know these things Free ASP.NET MVC eBook Tutorial Download if you haven't already. I need to find some time to try MVC 25 Examples of Creative Paper Use in Web Design Very nice roundup and very nice blog design! Easy Display Switch with CSS and jQuery  Yeah, I just adorejQuery! Operating System Interface Design Between 1981-2009  Good old times :) 25 Powerful and Useful jQuery Tutorials for Developers and Designers This might come handy Image Rollover Borders That Do Not Change Layout Great idea by Chris Coyier Framework Definition in less than 140 characters What would be your definition? TinyTable JavaScript Table Sorter Must-have script Web sites Anativa Line 25 Webdesigner Depot Fresh 01 MeshU  

design article definition yeah solutions haven jquery nice week guide blog sites examples page excellent great home nline developers components

Fourth in the series of Warp Speed weekly links, todays list is full of extraordinary articles and three great designs . I am Photoshop Everything you need for Photoshop: brushes, patterns, action, textures, tutorials and more Affixa Make your webmail account accessible from Windows Panoramic Photoviewer in Javascript Fantastic viewer for panoramic images. Too bad it uses Prototype instead of jQuery :) Download Silverlight 3 (Beta1) - Download   All you will need to try Silverlight 3 Beta 1 Eight Tips That Makes You a Better jQuery Coder We love jQuery! jQuery topLink Plugin Excellent idea for "Go to top" navigation. Actually I already saw several websites using it! Sexy Music Album Overlays Awesome idea, must see this one! 7 Common Web Usability Problems Seven common usability problems and how tosolve them. Nice examples and tutorials. Breadcrumbs In Web Design: Examples And Best Practices Another great article by Jacob Gube, full of examples. Sites Without Menus: Do You Really Need a Main Nav? Unusual subject to cover, but well done. Creating a polaroid photo viewer with CSS3 and jQuery Great example on how to create photo album by Marco Kuiper Web sites Mix09 Sourcebits TangledDecals Nathan Sanders

jquery great examples common spee panoramic weekly download problems full usability tutorials idea silverlight photoshop photo sites album warp viewer

Blog comments design is one of the important parts of blog design, but often overlooked. In this article, I will try to identify the most important aspects of designing comments that should be taken into consideration and provide some of examples that I like. 1. Conversation flow One of the most important aspects of comments is conversation flow. There are many ways to break the flow, but there are also many ways to keep it. Readers who comment on an article usually read existing comments and often comment not only on the particular content in article but also reply to other readers. And in those cases it might be difficult to follow the flow. Chronological or threaded view? Or...? Blogs usually have simple, chronological views that are easy to read if you just scroll down the page. However, comments won't always be just "Thank you for the tutorial". You might have to respond to several comments and readers might respond to each other. A real discussion can occur and if that happens it might not be that easy for a reader to catch up with all the comments. One of the solutions is to have the so called "threaded view". This means that comments are not being shown only in a chronological order. Instead, replies to a specific comment are being shown under that particular comment (or under that "thread"). In this way you can easily follow related comments because they are simply visually grouped. I like the comment section on Line25 blog ran by Chris Spooner. It is very neat and easy to follow. Nettuts+ also has threaded view. The interesting thing here is that replies have different layout. But to have easy-to-follow comments you don't need to implement threaded view. There are some simple, easy to implement but also effective solutions. Guys from UX Booth created an interesting solution: they added a reply button on the right hand side of each comment. By clicking that button you get a link to that particular comment with the name of the author you replied to. By clicking on the link readers get scrolled up or down to the related comment. Emphasize authors comment Readers often ask questions and debate with the author. By emphasizing author's comment it becomes simpler to scan and look for author's replies. The simplest and the most often used way to do this is to set a different background color for author's comment.In the example below, on Ordered List blog, author's comment has slightly lighter background. Separate comments and trackbacks Keeping trackbacks and comments together is a a good way to break the flow of comments and many blogs still keep them together. It is not that hard to do such a modification in your blog engine. Some time ago I wrote an article on this subject and showed how to do it in BlogEngine.NET. The image below shows comments and trackbacks on Handycons2 article. 2. Layout Although there are numerous different comment designs out there, following layouts are most widely used. A. Simple layout This is the simplest and probably the most common layout. Reader's name is emphasized and followed by comment date and the comment itself. This can vary in the way that date can be placed on the right of the name, or both can be placed under the comment. B. Two colum layout   The left column contains either an author's name or gravatar and the right contains the comment. If used without gravatar, author's name is usually followed by date. And if gravatar is present it can be followed by author's name. These also have large number of variations.  C. Three column layout The last one is divided into three columns. On the very left is a gravatar, followed by the author's name and finally the comment on the right. 3. All comments visible? It is very common to list all comments in same page as an article, just below the article itself. This is how I list comments as well :) But there are some other options that can be considered here. Tabs 24 days blog has a very interesting concept of showing comments under separate tab (not to mention that this blog design and usability are just awesome!). They have comments tab on the top and bottom of each article so it is easy to switch between article and comments. It might be difficult to switch back and forth if some comment refers to a specific paragraph in the article, and you want to take a look at it. But, on the other hand, you would normally have to scroll up and down, isn't it? Paging Although not widely used, paging could also be a good choice, especially if blog has a large number of comments. Just imagine a hundreds of comments together with article, like WebDesignerWall has? Here are two good examples of paged comments on Tutorial9 and WebDesignerWall. 4. Use a Gravatar or not? Another thing you would probably ask yourself is whether to use a gravatar or not. I would say yes, for one simple reason - it could be a good motivation factor for users to get involved and comment on your articles. Gravatar simply enables readers to be seen to promote ther blogs or their businesses; and people just like to be seen, it's normal. Gravatar can also add value to your design and make it richer. You can combine different elements with gravatar images to enrich comments, use things like balloons and borders, for example. To learn more about gravatar visit gravatar.com. Here are a few examples: Of course, if you choose not to use gravatars it doesn't necessarily have to be a bad decision. You have a lot of options and combinations to choose from, like different layouts, colors and/or backgrounds. One great examples Snook.ca blog.  Be more creative for users that don't have gravatars Speaking of gravatars, one of the things that is almost totally overlooked is, what I will call, no-avatar image. Many blogs use default no-avatar image which is too generic. It is especially common for wordpress users, so you are probably familiar with this image: You can make your blog comments recognizable and more interesting if you create unique no-avatar image. Here are just some of the examples of a good practice. 5. Showcase Finally, let's have a look at some great solutions. It's amazing how much this simple element in blog design can be done in so many creative ways. Blog.spoongraphics Design Reviver Fuel Your Creativity  Psdvibe Komodomedia   Outlaw design blog Tutorial 9   Veerle's blog   WebDesignerWall   Freelance Folder Bartelme design    Dark motion Snook.ca Avalonstar Jason Santa Maria    Ordered list   UX Digest Do you have any other important consideration? Do you have a blog with great comment design? Share it!

comments comment blog article gravatar author design follow layout examples reply flow simple readers image thread list under interesting important

  Crazy Wheels is another free BlogEngine.NET theme by jankoatwarpspeed.com. It is a simple, colorful, three column theme. Is has been published under Creative Commons License which means that you can use it for personal and commercial use as long as you keep the credits. You can see a full preview of the theme in my flickr photostream. Download the theme  See it live It has two-column sidebar. The left column is static and have three predefined "widgets": search, tags and categories. You can, of course, change this and add some other widgets, basically the ones that were used in BlogEngine.NET 1.3. The right column is Widget control introduced in BlogEngine.NET 1.4, where you can change widgets dynamically. You can see the sample sidebar in the image below.   Comment section is clear and neat with lot of whitespace. You have this STOP sign to "force" readers to comment (we all know that you just have to STOP when see this sign. :-) As you can see on the screenshot below, footer is quite simple. It contains the copyright info and Sign in link. And, yes, no pedestrians here!   Download the theme  See it live Feel free to use it and share your thoughts!

theme column blogengine sign widgets free ndownload sidebar wheels three live below stop simple widget sample footer static basically introduc

I like to read articles on webdesignerwall.com. Not just because of its content, but also because of its great design. I like one simple effect this blog has and that is a zoom icon that is being shown when you hover an image. In this simple tutorial, I'll show you how to do it in two ways: CSS way and jQuery way. Before we start, take a look at the live demo, or see it live on webdesignerwall.com. View live demo CSS way This can be easily done with pure CSS. Take a look at the code below. Inside the each link there are an empty <span> element and image. <div id="gallery1">     <h2>CSS solution</h2>     <a href="3029990904_d10cc4fd9d_o.jpg">         <span></span>         <img src="3029990904_6fc619349d_m.jpg" alt="" />     </a>     <a href="3036302292_d37001ed77_o.jpg">         <span></span>         <img src="3036302292_61f44a917c_m.jpg" alt="" />     </a> </div> So, the key is to have absolutely positioned <span> inside the relatively positioned link. Span's have a background image that is our zoom icon, actually. Span's width and height have to be the same as icon's size. You can set the location of zoom icon by setting its top/bottom/left/right position. #gallery1 {width:100%; overflow:hidden;} #gallery1 a {position:relative; float:left; margin:5px;} #gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} #gallery1 img { border: solid 1px #999; padding:5px;} Spans will be hidden initially, but if we add just one more line of code, they will be shown on each hover. #gallery1 a:hover span { display:block;}   jQuery way Things cam be even simpler if we use jQuery. We can, for example, get rid of <span> elements in the structure and add them dynamically. Or we can add an animation effects. So in this case, html code will be somewhat simpler: <div id="gallery2">     <h2>jQuery solution</h2>     <a href="3029990904_d10cc4fd9d_o.jpg">         <img src="3029990904_6fc619349d_m.jpg" alt="" />     </a>     <a href="3036302292_d37001ed77_o.jpg">         <img src="3036302292_61f44a917c_m.jpg" alt="" />     </a> </div>  There are no <span> elements inside links. We can add hem dynamically instead: $("#gallery2 a").append("<span></span>"); Pretty much easy. Now let's add some functionality. Instead of handling hover with CSS we'll do it through jQuery and add fade-in and fade-out effects along the way. $("#gallery2 a").hover(function(){     $(this).children("span").fadeIn(600); },function(){     $(this).children("span").fadeOut(200); }); Zoom icon will slowly fade in on hover a link, and quickly fade out when leave it. So the complete jQuery code will look like this: $(document).ready(function(){     $("#gallery2 a").append("<span></span>");     $("#gallery2 a").hover(function(){         $(this).children("span").fadeIn(600);     },function(){         $(this).children("span").fadeOut(200);     }); }); Do you use some other way to do this or have something similar?

span quot jpgquot hover jquery icon function zoom position fade aquot code href image children background inside link live width

I am excited to celebrate one year of JankoAtWarpSpeed with you! Exactly one year before I posted my first article and since then I posted over 80 articles. This was an interesting, exciting but tough year for me. Apart from everything, I wish to THANK YOU for taking time to read my articles and tutorials and to provide important feedback and suggestions without which all of this won't be possible! I mean, so far, there are more than 2100 comments here! Thanks to your contribution I manage to write and improve myself - as a blogger, developer and person. I really mean it. This year was incredible experience for me and I can only wish my coming years will be as good as this was. I will not go off the beaten path. That means I will continue to write about same stuff as before. The most visited (and commented) content on my blog was tutorials so I will continue to provide more tutorials (oh yes, there will be even more jQuery:)). There will be a little bit more space for ASP.NET. Thanks to discussion on ASP.NET and PHP and your incredible feedback, I will start to work on "ASP.NET for web designers" series soon. I hope it will help web designers and ASP.NET developers to better understand designing in ASP.NET. You never know what you'll be working on next time :) I will also focus more on user experience and usability in general and write more articles like Blog comments design considerations. This kind of articles is very time consuming but give me a great pleasure while researching and writing! For the end, I am preparing PDF e-book that will contain all of the tutorials I published so far, but I can't promise when it will be ready for download. Soon, I hope. Thank you once again. Keep on commenting and criticizing.

year articles write tutorials wish before hope post nfor blog soon mean feedback nthere incredible thanks comments provide experience nthank

Home page of Africa Tour 2008 is a good example of how simple solutions can also be effective. In this tutorial I will recreate (in my own way) their effect using World map. As I said, the effect is more than simple - each continent is marked with a "pin balloon" (I couldn't think of a better name) and when you hover the balloons they get larger. This is something that many of us have done many times, I'm sure of it. However, this example has a trick: balloons grow diagonally starting at the anchor point (anchor point is the little triangle that comes out of the balloon). View live demo So, we have three tasks: to anchor each balloon properly to position each balloon properly to add the hover effect Anchoring and positioning Each balloon will be a div with a background image, absolutely positioned inside the relatively positioned World map. This is the HTML structure that we need. <div id="map">      <div id="america"></div>      <div id="europe"></div>      <div id="africa"></div>      <div id="asia"></div>      <div id="australia"></div>      <div id="southAmerica"></div> </div> And the css: #map { width:669px; height:351px; background-image:url('map.jpg'); position:relative;} #map div { width: 120px; height:60px; position:absolute; cursor:pointer; background-repeat:no-repeat;} This part is simple. Each balloon will be 120x60px, absolutely positioned. Now, let us examine the image below. We want to anchor the balloon to the center of the North America. That is in the position x = 150px, y = 120px. Simplest way to position an element is to set its top and left values. To do that, we have to subtract the width and height of the balloon image from the x and y of the anchor point. In case of North America, our positioning point will be x = 30px, y = 60 px. But there is more. We want our anchor point to remain fixed while the balloon grows in the opposite direction. In order to achieve this we need to position the background image properly. Div named #america will have "background-position:right bottom" and that will assure that anchor point will not move. #america { background-image:url('america_small.png'); top:60px; left:30px; background-position:right bottom;} This allows us to simply show another image on hover: #america:hover Let us examine the next example: Africa's balloon is flipped horizontally in comparison to North America's balloon. This only means a different background image position. The image will be positioned to the left and bottom: #africa{background-image:url('africa_small.png'); top:160px; left:360px; background-position:left bottom;} Other balloons can be anchored using the same approach. Now, let's see the full CSS code: #map { width:669px; height:351px; background-image:url('map.jpg'); position:relative;} #map div { width: 120px; height:60px; position:absolute; cursor:pointer; background-repeat:no-repeat;} /* Right-anchored baloons */ #america { background-image:url('america_small.png'); top:60px; left:30px; background-position:right bottom;} #america:hover #europe{background-image:url('europe_small.png'); top:50px; left:240px; background-position:right bottom;} #europe:hover #southAmerica{background-image:url('southamerica_small.png'); top:190px; left:110px; background-position:right bottom;} #southAmerica:hover /* Left-anchored baloons */ #africa{background-image:url('africa_small.png'); top:160px; left:360px; background-position:left bottom;} #africa:hover #asia{background-image:url('asia_small.png'); top:60px; left:480px; background-position:left bottom;} #asia:hover #australia{background-image:url('australia_small.png'); top:200px; left:540px; background-position:left bottom;} #australia:hover As I said at the beginning, effective doesn't always mean complicated. Now, where can this effect be used? Primarily on maps (world maps, region maps or city maps). You can use it to pinpoint any location, from town to your company's headquarters, for example. I can't see any other usage, can you?

background image position png anchor hover balloon bottom america height africa width maps effect balloons repeat properly world north simple

As I promised in the one-year-celebration article I am starting an "ASP.NET for web designers" series in order to introduce ASP.NET to web designers who mostly use PHP; as well as to introduce basics of web design in ASP.NET to developers who actively use this technology. For instance, I realized that many ASP.NET developers don't know HTML equivalents for server controls. On the other hand, there is a general opinion that ASP.NET produces bad HTML code. I will cite Dave Ward: "I reject the notion that WebForms makes you write bad code (or that MVC ensures good code). Bad developers do that, not frameworks." If you are an experienced ASP.NET web developer, some things in this article (or all of them) might be familiar to you. However, you are welcome to share your thoughts and experiences! The series will include: Introduction (this article) Data controls Navigation Working with Themes Working with Master pages Validation  Checklist Sample application In this article, I will cover introduction to ASP.NET including explanation of server controls, tools that you need for work and additional resources. Scope of this article, as well as all others in this series, is designing user interfaces in ASP.NET. It won't cover development in ASP.NET, but will provide additional resources for those interested in server-side development. Introduction A concise description of what ASP.NET is can be found on Wikipedia: "ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language." We can say that you actually don't do any coding in ASP.NET, but rather in HTML and some of the .NET languages. In examples in this series I will use C#. To be able to work with ASP.NET you can use any text editor, but I would recommend you to use any of Visual Studio versions to get enhanced development environment. Visual Web Developer Express is lite version of Visual Studio that can be downloaded for free (including .NET Framework 3.5). It contains all that you need to design in ASP.NET. You don't necessarily have to have IIS installed because Visual Studio (and Web Developer Express) has built-in ASP.NET development server. To create a new web project in Visual Studio, you choose File -> New -> Website and choose ASP.NET Website in dialog window. Visual Studio will create a solution with one web site. Solution is a placeholder for your projects; it enables you to organize related projects. As seen on the image below Solution Explorer is panel where you can see all projects and files under your solution. Panel on the left side is Toolbox which contains all the server control, but we'll talk about that later in this article. When you create a new Web site, Visual Studio creates several files for you: Default.aspx, Web.config and App_Data folder. All ASP.NET pages consist of two files - presentation file where HTML is stored (.aspx file) and code-behind file where server-side code is stored (.cs file). This enables clear separation of server-side code and presentation. Each .aspx page is being created with a template code. It contains page definition and some basic HTML structure including <FORM> element. Please note that you can have only one form element per page. An interesting part for web designers who haven't worked with ASP.NET yet is a page element at the very top of each aspx page. It contains a definition of aspx page that may include server side language that will be used, name of code-behind file and so on. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> Web.config file is a configuration file for your web site based on XML structure. This simple XML file contains parameters and determines the behavior of some parts of your web site. You can define, for example, authentication mode and modules or you can define custom application settings. App_Data folder is where your databases might be stored. To be able to work with ASP.NET you will need some basic understanding of server controls. Server controls Besides HTML elements, ASP.NET uses server controls which have similar definition to HTML elements. The important difference between the two is that, unlike HTML elements, server controls are accessible from the code-behind or: the server side. This is determined with runat="server" attribute in their definitions. Server controls have different attributes than HTML elements and they are called properties. For example, Image control (which is equivalent to IMG element) has ImageUrl property instead of SRC attribute. But Visual Studio has very useful feature called intellisense which is some kind of autocomplete for your code and that will help you explore various properties. Imoprtan note: Always style elements using CSS insted of server controls properties. Server controls are much simpler than you might think. Each server control is rendered to a known HTML element on the client. Here is a list of server controls with their HTML equivalents and selectors that can be used from CSS or jQuery. Server control HTML equivalent CSS/jQuery selector Label <span> span TextBox <input type="text"> input[type="text"] TextBox (TextMode="Password") <input type="password"> input[type="password"] TextBox (TextMode="Multiline") <textarea> textarea Button <input type="submit"> input[type="submit"] LinkButton <a href="postback options"> a ImageButton <input type="image"> input[type="image"] HyperLink <a> a DropDownList <select> select ListBox <select size="n"> select CheckBox <input type="checkbox"> with <label> input[type="checkbox"] CheckBoxList <table> with a list of <input type="checkbox"> table or table input[type="checkbox"] for items RadioButton <input type="radio"> with <label> input[type="radio"] RadioButtonList <table> with a list of <input type="radio"> table or table input[type="radio"] for items Image <img> img ImageMap <img> img Table <table> table BulletedList <UL> or <OL> based on BulletedStyle property ul or ol HiddenField <input type="hidden"> input[type="hidden"] Literal Literal doesn't have its HTML equivalent, it is usually used as a placehoder to render HTML generated on the server   Calendar <table> <table> FileUpload <input type="file"> input[type="file"] All server controls are placed in Toolbox positioned on the left side if Visual Studio window. The controls listed in the table above are placed in "standard" panel in the Toolbox. To see how ASP.NET renders controls let's have a look at one example. Sample ASP.NET signup form This is an example that simulates very basic signup form. Validation, for example, won't be included since it will come later in this series. Let's first see the difference between the HTML strucutre in design mode and rendered code. We can say that design mode represent a code that is accessible on the server and that will be rendered on the client (if anyone knows better definition, please share). <form id="form1" runat="server">     <h1>Sample ASP.NET signup form</h1>     <asp:Literal ID="litMessage" runat="server"></asp:Literal>     <fieldset title="Please enter all data" id="signupForm">         <label for="txtFirstName">             <asp:Literal ID="litFirstName" runat="server" Text="Firstname">             </asp:Literal>         </label>         <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>         <label for="txtLastName">             <asp:Literal ID="litLastName" runat="server" Text="Lastname">             </asp:Literal>         </label>         <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>         <label for="txtEmail">             <asp:Literal ID="litEmail" runat="server" Text="Email address">             </asp:Literal>         </label>         <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>         <label for="txtPassword">             <asp:Literal ID="litPassword" runat="server" Text="Password">             </asp:Literal>         </label>         <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>         <asp:Button ID="btnSignup" runat="server" Text="Sign up!"             onclick="btnSignup_Click" />     </fieldset> </form> And the CSS code looks like this: body { font-family:Arial, Sans-Serif; font-size:0.75em; line-height:130%;} fieldset label input[type="text"], input[type="password"] { display:block; margin: 0 0 10px 0;} .message { color:#f00; font-size:1.5em;} We have a fieldset with four fields: Firstname, Lastname, Email and Password. Each field has an input element (TextBox) and corresponding Label with Literal control inside. If you take a look at the table above you will notice that Literal is just a placeholder, so each  Literal will render its content of Text property. Also, each TextBox has its own HTML equivalent. It is not that hard to conclude that HTML structure would be very clear without clutter. <h1>Sample ASP.NET signup form</h1> <fieldset title="Please enter all data" id="signupForm">      <label for="txtFirstName">Firstname</label>      <input name="txtFirstName" type="text" id="txtFirstName" />      <label for="txtLastName">Lastname</label>      <input name="txtLastName" type="text" id="txtLastName" />      <label for="txtEmail">Email address</label>      <input name="txtEmail" type="text" id="txtEmail" />      <label for="txtPassword">Password</label>      <input name="txtPassword" type="password" id="txtPassword" />      <input type="submit" name="btnSignup" value="Sign up!" id="btnSignup" /> </fieldset> The code above can be seen by looking at the source in your browser once you run your small website (just to make it clear, one of the ways to do that is by pressing F5 key). Now let's see some (fake) action. When I click on Signup button, I want to generate a message on the server and show it on the client. Take a look at the "design" mode code. btnSignup has btnSignup_Click method assigned to onclick event. This is the method that is defined on the server and it looks like this: protected void btnSignup_Click(object sender, EventArgs e) {     // This is where some reall proccess would occur     litMessage.Text = "<p class=\"message\">You successfuly faked signup proccess :)</p>"; } When user clicks on button postback occurs. New HTML code is generated and sent back to the client. The code fills Literal control with HTML code (paragraph that has "message" class and some text inside it). If you take a look at CSS code, you'll notice there is a class "message". This is how the message will look like. When returned to client, the code will be almost the same as before postback. It will contain just one more paragraph: <h1>Sample ASP.NET signup form</h1> <p class="message">You successfuly faked signup proccess :)</p> <fieldset title="Please enter all data" id="signupForm">      <label for="txtFirstName">Firstname</label>      <input name="txtFirstName" type="text" id="txtFirstName" />      <label for="txtLastName">Lastname</label>      <input name="txtLastName" type="text" id="txtLastName" />      <label for="txtEmail">Email address</label>      <input name="txtEmail" type="text" id="txtEmail" />      <label for="txtPassword">Password</label>      <input name="txtPassword" type="password" id="txtPassword" />      <input type="submit" name="btnSignup" value="Sign up!" id="btnSignup" /> </fieldset> Download the example This example shows that designing ASP.NET websites and web applications doesn't have to be a problem as many people see it. If things set right from the beginning it can be easy as designing for any other framework/technology. Conclusion For better understanding what is happening "under the hood", I recommend you to read more about ASP.NET page lifecycle, state management and viewstate. In next part of the series we'll take a look at the tricky ASP.NET data controls. Additional resources To get more information about ASP.NET you can visit: Official ASP.NET website ASP.NET development center ASP.NET on Wikipedia ASP.NET onW3Schools .NET Framework QuickStart tutorials

input type label quot server code html literal controls table textbox runat visual file form text signup page studio fieldset

I am happy to publish a free eBook "Selected tutorials from the first year of JankoAtWarpSpeed" that contains the most interesting tutorials (by your opinion) published in the first year of my blog. The eBook is free, so you can print it, share it with your friends, but you're not allowed to republish it in any form. Since JankoAtWarpSpeed is environment friendly blog I suggest that you NOT to print this eBook - read it online! Also, please do not use direct link for download, but rather link back to this article. Thanks! Download eBook (PDF) Enjoy!

ebook tutorials free print select year link publish blog happy form republish allow you download rather friends contains ndownload quot

No doubt that Ajax can affect user experience to a large extent. We expect from Ajax applications to render parts of pages quickly and smoothly. However, excessive use of Ajax can make things go really bad. A few days ago I wanted to filter out some content (let's say list of books) on one particular website. Site has a live filter for filtering content. By ticking checkboxes with categories you narrow your choice. So the story goes like this: initially, a paged list of books was displayed. I wanted to see only books from these categories: user experience, web development, ASP.NET, jQuery, and usability. Every time I checked a checkbox, new AJAX request was initialized and list was narrowed. The problem was that each Ajax request lasted between 3 and 4 seconds. It's not difficult to calculate that it took me between 15 and 20 seconds to finish my filtering, which is very much indeed. Every time I clicked on the checkbox I was looking at Ajax progress indicator and knew that I will have to do it a few more times until I get the desired result. Doesn't sound good, isn't it? What would be a solution? Simply add a button that would make just one Ajax request and filter data. Yes, this is one more click, but the whole operation would took only 3 or 4 seconds. As I said earlier, Ajax is excellent thing which purpose is to improve the user experience in overall. If it is not the case, it is certain that you have failed somewhere. So, one click more or 15 seconds more?

ajax list experience seconds filter user click books want nrequest checkbox content filtering narrow between category nusability improve doesn simply

I have recently spoken to a friend of mine about the working processes and at one point he said to me: "We let creative guys do the design work" "What do you mean by that?" - I asked. "Well, you know, web designers and other.. creative people" "You think the only creative people in your company are designers? Don't you think that developers can also be creative?" "Well, yes for the first question and no for the second one" "Uh, you're so wrong, man" Creativity NOT equals art According to Wikipedia, "Creativity is a mental and social process involving the generation of new ideas or concepts, or new associations of the creative mind between existing ideas or concepts. Creativity is fueled by the process of either conscious or unconscious insight. An alternative conception of creativeness is that it is simply the act of making something new." So, creativity is not reserved for web designers (and artists, or art, in general). Anyone can be creative. It can be seen outside the design or art. Take cooking for example. Can cook be creative? Could food be prepared or arranged on a plate in a creative way? Yes, I think! Anyone can be creative I would rather say that creativity is a state of mind, or simply - a mood. That means that anyone can feel creative sometimes and do something creative. Some of us could be more often in such a mood and some ocould be just a few times. Noone is creative all the time.  So, back to my conversation with a friend - anyone can be creative: designers, managers, cooks, developers, you name it. Can code be written in a creative way? Just because there are rules, patterns and syntaxes that doesn't means that problem can't be resolved in a creative way. So yes, developers also can be creative!!!  What about you? Although I told you my opinion, I'm more than interested in yours. How would you describe creativity? Do you think anyone can be creative and have you ever felt creative?

creative nquot creativity designers anyone process quot developers mind simply you means ideas well design mood friend managers conscious doesn

Some videos on YouTube have a cool feature called "Turn the lights down". Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect. View live demo Download source code The problem Our example is simple - it consists of header, the video, "turn off the lights" link and sidebar with some information about the video. At the code below you can se the "command" div that contains lightSwitcher link, "movie" div that contains the video and "description" div that acts as a sidebar:     <div id="container">         <div id="header">             <h1>Janko At Warp Speed</h1>             <h2>Turn off the lights - demo</h2>             <div id="command">                 <a class="lightSwitcher" href="#">Turn off the lights</a>             </div>         </div>         <div id="movie">             <object width="560" height="340">                 <param name="movie" value="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" />                 <param name="allowFullScreen" value="true" />                 <param name="allowscriptaccess" value="always" />                 <embed src="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999"                     type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340">                 </embed>             </object>         </div>         <div id="description">             <p>Some description ges here</p>         </div>     </div> CSS for this is simple: body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; } #container { width:960px; margin:0px auto; text-align:left; overflow:hidden;} #movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;} #description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} .lightSwitcher {background-image:url(light_bulb_off.png); background-repeat:no-repeat; background-position:left;                        padding: 0 0 0 20px; outline:none; text-decoration:none;} .lightSwitcher:hover Let there be... dark When link "Turn off the lights" is clicked, we need to darken the entire page. All except the movie. This can be achieved using a div that has to have the exact dimensions as the current document and semi-transparent black background. This div needs to be positioned absolutely inside its relatively positioned container (and that is BODY) and to stretch from the upper-left to the bottom-right corner. Let's add a div to the end of our markup: <div id="shadow"></div> Now let's style it: #shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;} Important thing here is z-index. In order to make it cover the entire page, it has to have the largest z-index. Embedded element will be seen, anyway. It's easy to position a div to the top-left corner and set the width to 100%. But what about the height? If we set the height of our shadow div to be 100% it will cover the entire page only if contains larger than a window, or - if we have scrollbars. Otherwise, it will cover just the content. Let's involve jQuery $(document).ready(function(){     $("#shadow").css("height", $(document).height()).hide(); }); Aaaaand.... Action! This code set the height of shadow div to the same value as document height and hides it. Of course, we want this div visible, only when we click on "lightSwitcher". Now we need to ad a click handler for lightSwitcher: $(".lightSwitcher").click(function(){     $("#shadow").toggle(); }); If you try to run this now you will see that it works. LightSwitcher will toggle shadow div visibility and that will simulate turning lights on and off. The only problem is that the link itself will be "in the dark", and you won'ta be ble to click on it again, once you turn the lights off. The solution is simple; LightSwitcher has to have z-index higher than shadow div. In order to do that, we have to position the link absolutely inside the relatively positioned container and set z-index to 101: #command { position:relative; height:25px; display:block;} .lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);                       background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;                       outline:none; text-decoration:none;} Now it will work. If you look at the demo you will notice that while you toggle the lights, link text and icon changes. In order to do that we have to extend our CSS and jQuery a little bit. When you turn off the lights, light bulb icon and text changes, and link color turn to yellow. We need to define a CSS class that will style the link and add some jQuery to change text and toggle this CSS class. .turnedOff {color:#ffff00; background-image:url(light_bulb.png);} We'll extend the click handler a little bit to get this result: $(".lightSwitcher").click(function(){     $("#shadow").toggle();         if ($("#shadow").is(":hidden"))             $(this).html("Turn off the lights").removeClass("turnedOff");         else             $(this).html("Turn on the lights").addClass("turnedOff"); }); Now we have fully functional light switcher functionality. In the end, the complete code will look like this: CSS body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;} #container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;} #movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;} #description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} #command { position:relative; height:25px; display:block; margin: 25px 0 0 0;} .lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);                       background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;                       outline:none; text-decoration:none;} .lightSwitcher:hover #shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;} .turnedOff {color:#ffff00; background-image:url(light_bulb.png);} jQuery $(document).ready(function(){     $("#shadow").css("height", $(document).height()).hide();     $(".lightSwitcher").click(function(){         $("#shadow").toggle();         if ($("#shadow").is(":hidden"))             $(this).html("Turn off the lights").removeClass("turnedOff");         else             $(this).html("Turn on the lights").addClass("turnedOff");     }); }); Update: Thanks to @Joranovski fix for Mac would be: "position:relative; and the z-index 101 or 102 for the Movie div". Do you like this effect? I think it's really funny!

quot position text background turn left width height lightswitcher index lights link click image light shadowquot margin document lightsquot shadow

In the first part of ASP.NET for web designers series you could have seen some basics of styling ASP.NET web applications. In this article we'll take a look at ASP.NET data controls and how they work. The series include: Introduction Data controls (this article) Navigation Working with Themes Working with Master pages Validation  Checklist Sample application When working with data, developers will use one of the controls shown in the image below. Server controls used to show tabular data are GridView, DataList, Repeater and ListView. GridView is a control that is easy to bind with the data, but gives you less control over the code. The basic GridView definition looks like this: <asp:GridView ID="GridView1" runat="server"></asp:GridView> However, it will automatically generate a table when bound to a data source. This control renders to <table> element but if you add a pager to GridView, for example, you will end up with nested tables: <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">      <tr>...</tr>      <tr>...</tr>      <tr>...</tr>      <tr>           <td colspan="2">                <table border="0">                     <tr>                          <td>                               <span>1</span>                          </td>                          <td>                               <a href="javascript: __doPostBack('GridView1','Page$2')">2</a>                          </td>                     </tr>                </table>           </td>      </tr> </table> So, if using this control you will style it as a normal HTML table element. Some developers prefer GridView over other data controls because they enable easier development and less coding, but they loose some control over their code and rendering. To have a better control over your code, DataList, Repeater and ListView controls are better choices. They are very similar in the terms of rendering. They do not render to any control by default (except DataList) they are rather just placeholders for HTML structure. Let's have a look at very simple example of creating unordered list with repeater. <asp:Repeater ID="rptSampleRepeater" runat="server">      <HeaderTemplate>          <ul class="someClassName">      </HeaderTemplate>      <ItemTemplate>          <li><%#Eval("Value") %></li>      </ItemTemplate>      <FooterTemplate>           </ul>      </FooterTemplate> </asp:Repeater> Repeater has five templates that are used to create a HTML structure. HeaderTemplate and FooterTemplate are used to render opening and closing parent tag and occurs before and after the ItemTemplate. In our small example it is <UL>. ItemTemplate is used to render data, once per data row. In the example above, it's <LI>. The code inside the list item will render the data pulled from the server. The result is unordered list as you would create it in HTML. This way both designers and developer can have a full control over their code. <ul>      <li>A</li>      <li>B</li>      <li>C</li>      <li>D</li> </ul> There is also AlternatingItemTemplate that can be used to style every second row differently. The last template is SepartorTemplate that renders its content between rows, i.e. between each ItemTemplate. ListView control behaves in similar way and have many more features (like associated pager control), but styling would be very similar to Repeater control. DataList control differs from Repeater and ListView. You also format HTML through use of different templates but the key difference is in RepeatColumns property. If set to a value greater than one, records will be repeated horizontally. This feature might be useful in some cases, for example on e-commerce sites. Conclusion Developers and designers have many choices to render the data. Which one will be used depends on specific cases, but the important thing is to know how each of this controls behave and how to style their outputs. There is one more important thing to keep in mind. Data controls have many properties (attributes) that will affect styling. Normally you wouldn't use any of them but rather define styles through CSS. You can use one property, though - CssClass. That is equivalent to HMTL class attribute. For more information on data controls please take a look at following articles: Data Repeater Controls in ASP.NET  The asp:ListView control (Part 1 - Building a Product Listing Page with Clean CSS UI) Understanding the Differences Among the DataGrid, DataList, and Repeater /a>

data controls repeater gridview table html code render itemtemplate style listview quot datalist working similar property styling border footertemplate list

Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC. Download the example View live demo The requirements This is how docking should behave: When user hovers an item on vertical menu, its submenu should slide in from left to right (points 1 and 2 in the image below) and overlay the content When user move the mouse pointer outside the panel it should slide back If user clicks on "Dock" link (point 3 in the image below), panel should fix in the current position while content moves to the right of the panel in order to be seen If users "undock" the panel it should slide back This way users can chose whether they want to perform an action and continue with work or they want to have available actions permanently visible. But that is not all. I wanted multiple panes to be able to dock in the same time. If one panel only is docked it should be 100% height. With each new panel docked, height should be recalculated so that all panels have the same height value (like in the image below). If there are docked panels and user wants to slide in another panel temporarily, it should overlay docked panels.   A "brief" explanation The idea was to have a navigation based on nested ULs. This is nothing new, but I wanted to create more than just CSS&UL based menus that can be used as toolboxes or action links as well. So the structure is very simple. The main UL with id="dock" will act as a vertical navigation bar that contains three links (in this example). Each link will have a nested UL that will represent a docking panel with some sample list items. Each first listitem will act as a header for docking panel, containing panel title and Dock/Undock exclusive links. <ul id="dock">     <li id="links">         <ul class="free">             <li class="header">                 <a href="#" class="dock">Dock</a>                 <a href="#" class="undock">Undock</a>Links             </li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>         </ul>     </li>     <li id="files">         <ul class="free">             <li class="header">                 <a href="#" class="dock">Dock</a>                 <a href="#" class="undock">Undock</a>Files             </li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>             <li><a href="#">This is one item</a></li>         </ul>     </li>     <!-- more submenus here --> </ul> <div id="content">     <!-- content here --> </div> Let's see how CSS can help use to style this lists. body{margin:0px; font-family:Arial, Sans-Serif; font-size:13px;} /* dock */ #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; z-index:100; background-color:#f0f0f0} #dock > li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#dcdcdc; background-repeat:no-repeat; background-position:left center;} #dock #links #dock #files #dock #tools #dock > li:hover {background-position:-40px 0px;} #content {margin: 10px 0 0 60px;} The main #dock UL has fixed position in the top left corner of the window in order to be visible after scrolling. Each listitem in #dock unordered list presents one vertical link which hovering causes its child list (or simply - docking panel) to slide-in. I used CSS sprites to show hover states for each LI. body{margin:0px; font-family:Arial, Sans-Serif; font-size:13px;} /* dock */ #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%;     z-index:100; background-color:#f0f0f0; left:0px;} #dock > li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#dcdcdc;     background-repeat:no-repeat; background-position:left center;} #dock #links #dock #files #dock #tools #dock > li:hover {background-position:-40px 0px;} Also, we need to style docking panels. First three lines in this CSS script define styles of listitems on docking panel in normal and hover state. Fourth line sets visibility of nested UL's while hovering its parent LI's. Next line defines the docking panel itself. Each panel is positioned absolutely, and initially will be hidden (left: -180). Also each one of them will have z-index:-1 in order to be shown above docked UL's that have z-index:-2. So far, so good. If wanted to create a simple CSS based navigation I could have done it with CSS only. But I want the panels to slide-in and slide-out on hover. $("#dock li ul").height($(window).height()); $("#dock li").hover(function(){     $(this).find("ul").animate(, 200); }, function(){     $(this).find("ul.free").animate(, 200); }); This jQuery scripts does exactly what I want. Te first line sets the height for each panel to be the same as window height. Now we have menus that work. Docking/undocking functionality Now when menu works, I can add docking functionality. The goal is to be able to dock as many panels as I want, and they all should be visible one below each other. To achieve this I need to count how many panels are docked and to recalculate their heights to fit inside the window. When panel is docked, its "free" CSS class will be replaced with "docked" class in order to have a clear distinction between docked and undocked items and to ease the manipulation. The code below then recalculates heights for each docked panel and hides "dock" link and shows "undock" link. It will also check for number of docked items in order to move content to the right if at least one panel is docked. $(document).ready(function(){     var docked = 0;          $("#dock li ul").height($(window).height());                  $("#dock .dock").click(function(){         $(this).parent().parent().addClass("docked").removeClass("free");                  docked += 1;         var dockH = ($(window).height()) / docked         var dockT = 0;                                 $("#dock li ul.docked").each(function(){             $(this).height(dockH).css("top", dockT + "px");             dockT += dockH;         });         $(this).parent().find(".undock").show();         $(this).hide();                  if (docked > 0)             $("#content").css("margin-left","250px");         else             $("#content").css("margin-left", "60px");     }); }); Undocking functionality is very similar. It actually do an opposite actions in comparing to docking functionality :)      $("#dock .undock").click(function(){         $(this).parent().parent().addClass("free").removeClass("docked")             .animate(, 200).height($(window).height()).css("top", "0px");                  docked = docked - 1;         var dockH = ($(window).height()) / docked         var dockT = 0;                               $("#dock li ul.docked").each(function(){             $(this).height(dockH).css("top", dockT + "px");             dockT += dockH;         });         $(this).parent().find(".dock").show();         $(this).hide();                 if (docked > 0)             $("#content").css("margin-left", "250px");         else             $("#content").css("margin-left", "60px");     });  It can be optimized and polished or even used to create a plugin, but that will have to wait for a while. I hope you will make some use of this.

quot dock height panel background href docking item margin class position image window links parent panels function slide dockh dockt

A few days ago I was searching for some freebies and found something I wanted to download. When I pressed "download" link I was unpleasantly surprised with the modal window which you can see in the image above. Why this was an unpleasant experience? No explanation First of all, I just wanted to download some freebies (graphics). I expected to be able to actually download the file when I pressed the download link. But I was prompted with this small webform and needed to think about it. What is the purpose of this form? Why I need to fill this information now? Not only they are disturbing me now, they also want to disturb me in the future? There was no explanation on why I need to fill this information. No option I wondered was there an option, on the previous screen, for choosing whether I want to be contacted by this website in the future. Maybe I missed something? I would understand the need for leaving my email address if this was a software. They could then send me some activation code or serial number to my email. But still, it would be nice to see at least one sentence on why my email is required. Phone number? On the top of everything, I saw that phone number is mandatory field. That was weird. Not only I needed to leave my email just for this one download, but I was also needed to leave my phone number? Why this particular information is important for the action I wanted to perform? Would they really call me with some promotional offers? There just wasn't any logical explanation. They break one of the most important rules of web usability: "Don't make me think". They made me think. And I left the site. Conclusion This was just one small example how poorly designed web form can force users to leave. I think this webform shouldn't be there. At least some kind of explanation would be needed as well as option to choose whether I want to be contacted or not. And, of course, phone number shouldn't be mandatory, if it should be there at all. How do you react in similar cases?

download email explanation leave need want information option phone link least force design press shouldn users whether important webform freeby

Embossing is very popular trend in web design (the actual term for this effect is "inset", although many people call it embossing). In the same time it is very simple to create. This short tutorial will show you how to create this effect usng pure CSS and using Artweaver. CSS version The easiest way to create the effect is by using CSS text-shadow property. Although there are tutorials that explain how to achieve this, there are a few things that need to be considered. First let’s see how to do the embossing, or to be more correct "inset" effect. By using text-shadow we can simulate light shadow on the bottom and dark shadow on the top of the text. .inset { text-shadow:#fff 0px 1px 0, #000 0 -1px 0;} span { line-height:3em; font-size:3em; font-weight:bold; color:#808080;}  This is how it looks like in Safari: In the example above, inset class defines two shadows. The first one is light shadow (white color, positioned 0px to the right of the text, and 1px below the text) and dark shadow (black color, positioned 0px to the right of the text, and 1px above the text). Third parameter defines shadow blur. In this example I set it to 0, but you can experiment with it in order to get different results. One important thing is that this effect can be seen only in browsers that support CSS3. For now, it will work in Firefox 3.1, Safari, Google Chrome 2 and Opera 9.5. This means that you should be careful when setting text color. People tend to set text color similar to the background color (A). This means that it will be very hard to see it in browsers that don't support CSS3 (B).   Advantage of this approach is that you can apply this effect to a dynamic content and avoid creation of images. Downside is that CSS3 is not supported by all browsers (yet). Artweaver version There are many tutorials that explain how to create this effect in Photoshop or other popular software, but I thought it will be fun to do it in Artweaver. Artweaver is a freeware photo-manipulation software (and even more than that). Although it hasn't capabilities of Photoshop, it is very good free alternative. So let's start by creating new document as shown in the image below: Next, set gray foreground color, select gradient tool (from the toolbar) and create a gradient (as seen in the images below). Using text tool (from the toolbar) and by choosing slightly darker gray color add some text. Set text opacity to 50% (image below).    Next two steps will be very simple. To create light shadow, duplicate the text layer (Layer  -> Duplicate layer) and move it behind the text layer. Set its color to white and move it one pixel below the text layer. You can do it by moving the layer with cursor keys. To create dark shadow, duplicate text layer once again and move it behind the light shadow layer. Set its color to black and move it one pixel above the text layer. You are now done and you should see something similar to the image below. Although the edges in this example look better and smoother than the ones in CSS example, you will have to create images instead of using pure text. How do you create this effect?

text shadow color create effect layer below move light embossing browsers simple images dark above support although duplicate artweaver image

As you might already noticed my site is often down for a couple of minutes and it repeats too often. Last time (two weeks ago) I contacted technical support and they told me they will fix the problem. They didn't contact me since then. And they didn't fix it, of course. I think is unacceptable and totally unprofessional that they didn't eliminate the problem for two weeks neither inform me about the progress on this one. Because of this (and many issues before) I am forced to change hosting provider. I hope this won't be painful, but it might happen that in next few days JankoAtWarpSpeed goes down here and there. Wait... that is already happening. Ok, so nothing will change, actually :) I apologize in advance if you experience any problems in next few days. Thank you for understanding.

didn contact next hosting days weeks already provider often technical nothing progress neither painful apologize actually experience unacceptable support happen

I rarely see drop down menus that behave like drop down lists, but I really like them. I noticed, however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS. View demo You are probably familiar with the menu structure; nested unordered lists are common way to create menus. Showing/hiding child menus is done with simple CSS: ul > li:hover ul. By using this selector we can define behavior of all child menus. When creating normal menus, besides display:block we set some other styles like background color and so on. The only difference between regular menus and "drop down list menus" is in the fact that we don't set styles for nested UL but rather for LI that is hovered (ul > li:hover). #header { height:120px; position:relative; background: transparent url(header_bkg.png) repeat-x scroll top center;} #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;} #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;} #nav > li:hover ul { display:block; } #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; } #nav li ul { margin:0px; padding:0px; display:none;} #nav li ul li { list-style-type:none; margin:10px 0 0 0;} #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;} #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;} #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; } This is how it can be done jus with CSS. I really can't figure out why would someone use JavaScript for this, except for adding animations or other effect. Please note that this code doesn't work in IE6 (this poor browser just doesn't know what ul > li means).

menus display hover margin block radius padding border none color background list drop styles type webkit child nest done style

10 UI Design Patterns You Should Be Paying Attention To is the article I wrote for SmashingMagazine. In this article, I described ten interesting patterns (such as Lazy Registration and Progressive Disclosure) that you might consider when designing web sites and web applications. There are over 15 examples with descriptions. You can read the article on SmashingMagazine.

article patterns design paying attention progressive designing wrote describ registration disclosure examples descriptions interesting post sites lazy nyou consider applications