Web Design

Simple Round Corners in CSS

Tagged:  

If you have developed a web 2.0 application you have probably used some technique to create rounded corners. Well, over at Search-This.com they have put together a good post about techniques for creating rounded corners. The tutorial attempts to make the process of creating rounded corners simple.

Below is an excerpt from the post.

One Size Fits All

We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. The image is completely round but I'll only be showing one quadrant of it at a time and therefore we can supply all four corners with one simple image weighing in at only 300 bytes.

Figure 3

one-round-quadrant.png

The benefit of using a single image is that all corners get loaded immediately after the first corner is drawn so there is virtually no delay.

Cut It Out

You may think that you could simply place the image in the four corners of a rectangular box but things aren't as simple as that. Our box needs to have a background color and as we are using a white corner image we need a white background for our box. However, if we place a transparent corner in the corner of that box then in fact nothing really happens. The reason is that the transparent part of the image lets the white background show through and all we get is the square box we started with.

In order for the corners to work properly the corner of the box must be over the background color of the element outside our current box. We therefore need to drag the round corners outside the box to start with but that presents more problems. Here is a screenshot of what the corners will look like outside the box so you can understand what's going on

Figure 4

simple-screen3.jpg

As you can see we have a problem whatever we do! If the images are inside the rectangle then they become invisible. If they are outside the rectangle then it looks even worse as figure 4 above shows

What we really need is a rectangular box where the four corners are cut-out to give a cross-shaped effect. If we made sure that the cut-out matched the radius of our circle (10px) then we could pop our corners nicely into place.

We can achieve this by nesting an inner box inside our outer box and then dragging it outside of the parent using a negative top and bottom margin. If we also give side padding to the parent and top padding to the child we can get a cut out effect like this.

Figure 5

simple-screen2.jpg

The CSS mark up for this is as follows:

CSS:

  1. * {margin:0;padding:0}
  2. h1 {margin:.5em;}
  3. body {
  4. background:#e5e5e5;
  5. color:#000;
  6. }
  7. .box{
  8. float:left;
  9. background:#fff;
  10. padding:0 10px;
  11. margin:10px;
  12. display:inline;/* IE double margin bug*/
  13. }
  14. .one{width:40%}
  15. .inner{
  16. background:#fff;
  17. padding:10px 0;
  18. margin:-10px 0;
  19. position:relative;
  20. }

Followed by the simple HTML:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  4. </div>
  5. </div>

The next step is to provide four elements and place our corners into position with static positioning. We will be leaving a 10px padding around our box so that we have room to position the corners nicely without affecting the inner content. (Don't be tempted to use absolute positioning because IE is always 1px out when the distance traveled is an odd pixel number. This happens on right and bottom absolutely placed elements and can destroy a layout like this.)

I am going to use a div with nested span to provide elements for the corners but if you wanted to reduce mark up you could use a nested "b" element as suggested by Eric Meyer (although its use for background images is not likely to be very semantic). Using a nested b element would also negate the need for a class as you are unlikely to have any other elements like this on your page. Anyway I am sticking with the div and nested span as it is easier to follow.

The HTML we need for this is as follows:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <div class="top"><span></span></div>
  4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  5. <div class="base"><span></span></div>
  6. </div>
  7. </div>

The extra div and span has been placed inside the .inner element which means we must drag the top corners upwards into the padding area and then outwards into free space so that the transparent corners can show. The reverse process is needed for the bottom corners. There are a couple of "haslayout" bugs to squash on the way and IE6 also needs position relative applied to make the corners show.

The revised CSS and HTML for the whole section is shown below.

CSS:

  1. * {margin:0;padding:0}
  2. h1 {margin:.5em;}
  3. body {
  4. background:#e5e5e5;
  5. color:#000;
  6. }
  7. .box{
  8. float:left;
  9. background:#fff;
  10. padding:0 10px;
  11. margin:10px;
  12. display:inline;/* IE double margin bug*/
  13. }
  14. .one{width:40%}
  15. .inner{
  16. background:#fff;
  17. padding:10px 0;
  18. margin:-10px 0;
  19. min-height:0;/* ie7 haslayout issues fix*/
  20. position:relative;
  21. }
  22. * html .inner{height:1px}/* ie6 haslayout issues fix*/
  23. .top,.base{
  24. margin:-10px -10px 0;
  25. background:url(images/one-round-test2.png) no-repeat left top;
  26. height:10px;
  27. position:relative;
  28. font-size:10px;
  29. }
  30. .base{
  31. background-position:left bottom;
  32. margin:0 -10px -10px;
  33. }
  34. .top span,.base span{
  35. background:url(images/one-round-test2.png) no-repeat right top;
  36. display:block;
  37. height:10px;
  38. font-size:10px;
  39. }
  40. .base span{background-position:right bottom;}

I have also added a content div in the middle just to tidy things up and the revised HTML is as follows:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <div class="top"><span></span></div>
  4. <div class="content">
  5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  6. </div>
  7. <div class="base"><span></span></div>
  8. </div>
  9. </div>

The font-size:10px in the CSS is there to restrict IE's height to 10px; otherwise it would increase the element to the full current font-size and spoil the effect. The result of the above code can be seen in these live examples:

Example 1

Example 2

Example 3

For ease of use the CSS has been left in the head so that you can view source and inspect it easily.

You can read the full tutorial by clicking here.

So go out there and make those non-stylish rectangular boxes into boxes with rounded corners!

CSS Gradient Text Effect

Tagged:  

Over at Web Designer Wall they have posted a good tutorial on creating a gradient header using CSS. The technique is based on an empty span tag a PNG and the position:absolute CSS property (the technique is 100% CSS, no JavaScript or Flash). Compatible tested browsers include Firefox, Opera, Safari and Internet Explorer.

Below is an excerpt from the tutorial:

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

screenshot

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

You can view the demo here or download it here. To read the full tutorial click here.

If you make any cool headers using this technique I would love to hear about them. You can either leave them in the comments or blog about them at this blog once you create a free account.

OpenID: Do you Yahoo!?

Yahoo! has just announced that it would begin supporting OpenID 2.0 technology for both yahoo.com and flikr.com by the end of the month.

Yahoo!’s initial OpenID service, which will be available in public beta on January 30, enables a seamless and transparent web experience by allowing users to use their custom OpenID identifier on me.yahoo.com or to simply type in “www.yahoo.com” or “www.flickr.com” on any site that supports OpenID 2.0.

Full Press Release

With the addition of 248 million Yahoo! users, the OpenID user community essentially triples in size (going from an estimated 120 million users to 368 million).

More information regarding Yahoo!'s OpenID support can be found here.

Snipplr - a public source code repository

Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day and It lets you share your code snippets with other coders and designers.

Snipplr was designed by Sitening, a Nashville Web Design company originally to store their code snippets in one place. They currently have around 3605 snippets in the following categories:
* ActionScript
* ActionScript 3
* Apache
* AppleScript
* ASP
* Assembler
* Bash
* C#
* C++
* Cold Fusion
* CSS
* Diff
* Emacs Lisp
* eZ Publish
* Forth
* Fortran
* Groovy
* HTML
* Java
* JavaScript
* Lisp
* Lua
* MatLab
* NewtonScript
* Objective C
* Open Firmware
* Other
* Pascal
* Perl
* PHP
* PicBasic
* Python
* Rails
* Regular Expression
* Ruby
* SmallTalk
* Smarty
* SML
* SQL
* SVN
* TCL
* TYPO3
* VB.NET
* VHDL
* Visual Basic
* W-Language
* XML

Click here to visit to the Snipplr code repository and let us know what you think.

Fix your IE6 Transparent PNG Issue and More with IE7.js

Dean Edwards has published an IE7 JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Usage

IE7.js
Upgrade MSIE5-6 to be compatible with MSIE7.
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js
Upgrade MSIE5-7 with advanced CSS features missing from MSIE7.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script>
<![endif]-->

Note: You do not need to include IE7.js if you are using IE8.js

PNG Note: The script only fixes images named: *-trans.png

Download
http://ie7-js.googlecode.com/svn/version/

Demo
http://ie7-js.googlecode.com/svn/test/index.html

Choosing a Development Framework

Over at Smashing Magazine they have put together a good round up of Development Frameworks. The post goes over the most popular frameworks for each language. The post also gives tips on what framework is best for you and has a brief over view of the Model View Controller (MVC) design pattern.

Below is an excerpt from the JavaScript frameworks.

JavaScript

  • Prototype is a JavaScript framework that serves as a foundation for other JavaScript frameworks. Don’t be fooled however, as Prototype can stand on its own.

  • script.aculo.us is built on the Prototype framework and has found its way into many high-profile sites including Digg, Apple, and Basecamp. The documentation is clear, and has an easy learning curve. However, compared to other JavaScript frameworks it is larger in size.

    Script.aculo.us

  • Mootools is a compact, modular, object-oriented JavaScript framework with impressive effects and Ajax handling. The framework is for advanced users as the learning curve is rather steep.

  • jQuery continues to rise in popularity due to its extensive API and active development. jQuery is a great balance of complexity and functionality.

  • For ASP.NET developers you can’t beat the ASP.NET AJAX framework which is built into the .NET Framework as of 3.5, but you can also download it for previous versions. The amount of documentation, examples, and community continues to increase. There are controls that you can simply drag-and-drop an update panel on an ASPX page and process Ajax!

    ASP.NET

Further JavaScript Frameworks

  • The Yahoo! User Interface Library - Yahoo! released its impressed JavaScript library with incredible amounts of documentation.
  • Ext JS - Originally built as an add-on to the YUI it can now extend Prototype and jQuery. Includes an impress interface.
  • Dojo is a small library focused on interpreter independence and small core size.
  • MochiKit - A framework that has focus on scripting language standards including ECMAScript and the W3C DOM.

Click here to read the full post on the frameworks.

Forcing a File Download in PHP

Tagged:  

I found an interesting tutorial on forcing a file to be downloaded instead of opened with the associated application.

Below is the PHP code that would be called to force the doe\wnload.

<?php
session_cache_limiter('none');
session_start();

function _Download($f_location, $f_name){
    str_replace('/', $f_name); 
    str_replace('/', $f_location); 
    header ("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Length: ' . filesize($f_location));    header('Content-Disposition: attachment; filename=' . basename($f_name));
    readfile($f_location);
}

$file = $_GET['file'];
$loc = $_GET['location'];

downloadFiles($loc, $file);

?>

To use this file, create a link to your download file, lets assume it is download.php. Just reference the link to download.php?file=filename.txt&location=filename.txt. Using the URL parameters the file is passed in and this then forces the download.

This is a great script to for forcing downloads of images, web pages or text files as these would otherwise be opened in the browser.

To view the full tutorial click here

Facebox 1.0 - A lightbox for images, divs, and entire remote pages

You might be asking yourself - "Do we really need another lightbox library out there?" Well if you've ever implemented a lightbox library then you know that most are limited to only displaying images. Facebox is a bit different because it allows you to lightbox divs in a page, remote pages, as well as images. A couple of the screenshots on the site show Facebox used as a alert window, part of an image gallery, or as a preview of a remote file - check out the demos and screenshots on FamSpam.

You'll notice that Facebox has taken its style from Facebook. But what you might not notice are the rounded corners on a Facebox. Some of you are tired of rounded corners and some of you aren't. If you aren't, then enjoy them. If you are, then just replace the corner images with sharp edges and you're all set.

Note that this library does require jQuery 1.2.1.

Visit the Facebox homepage to see some sample code and download the library

jQuery easyThumb - A PHP / jQuery Thumbnail Generator with Lightbox

The first version of jQuery easyThumb was released today. easyThumb is a plugin that uses both jQuery and PHP to generate thumbnails (to use in galleries etc.) on-the-fly. All you need to do is to make a unsorted list of images. No links or thumbnails are required, the library takes care of this - thumbnails are created automatically and are linked to the full size image. This integrates well with the Lightbox library as is shown in the online demo.

From the author:

jQuery easyThumb is a plugin for jQuery. It turns a list of full-scale images to a list of thumbnails on-the-fly. It uses a php-script to return a thumbnail for each image, and jQuery to generate the list.

Online Demo with Lightbox

Check out the original post to read more about easyThumb and to download the source code.

Ajax Testing Tools

Tagged:  

Over at the Ajax Blog (ajaxwith.com) they have put together a good list of Ajax testing tools.

Below is an except from the post with a list of tools.

Here are the three websites you can use for testing your Ajax based program:

1. Squish (froglogic.com) – Specifically called Squish for Web, this program effectively recognizes HTML if they are properly coded. But what is more important for an Ajax based program is its ability to handle DOM. This (DOM) element is very important for Ajax as they usually deal with http-like commands and requests. Squish has the ability to analyze popular web browsers and we’re not only talking about IE and Mozilla. Firefox and Safari could easily be handled by Squish. Konqueror KDEs on different OS could also be analyzed by Squish. Remember that this is a multiplatform so Squish can analyze mixed and matched softwares on different browsers and IDEs. There are three downsides on this product though: first, it’s highly technical as these are all numbers; second, price which could easily reach US$ 2,500; and Ajax stress test could not be tested in this tool. The last factor is important since millions are now geared to use Ajax but hopefully, the next update of Squish could have this.
2. WAPT (loadtestingtool.com) – If you don’t have a stress testing test because you purchased Squish, this is the additional tool for you. WAPT is a tool dedicated in testing Ajax based websites for stress. As of this writing, the latest version is at 5.0 which are really effective for websites. Although this tool is not optimized for Vista yet, it can get really effective once it has been established. You’ll be able to see graphics on how fast your website can handle multiple visitors. This tool will also tell you how many visitors can be serviced your website seamlessly. You don’t even have to limit yourself to http sites; WAPT 5.0 was also optimized for secured (https) websites.
3. Charles Web Debugging Tool (xk72.com/charles) – Available for determining IE, Mozilla and Safari browser functions, you’ll be able to get more than just simple Ajax applications tested. The website will actually be simulated by this tool and see how Ajax will run when applied in a secured website. After this tool is ran through Charles the results will be shown in a tree format. If you want to have a good and easily understandable presentation of your website after it’s debugged this is your tool. Ajax stress could be tested by changing the configuration of the simulation. You don’t need to run in beta version if you want to test if it can handle great stress.

Click here to read the full post.

If you use any of the tools leave them in the comments, I would love to hear about your experience.

Syndicate content