Group items tagged

There are web-based generators for almost everything; stripes, buttons, forms, loader icons, etc. CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows. This CSS trick is great for using in tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.

The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv's tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples. In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes. The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon. To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

helps you find unused CSS selectors on any site.

Amaya is intended to be a comprehensive client environment for testing and evaluating new proposals for Web standards and formats. A large part of the intended features of Amaya are implemented in this release, but some of them are not complete yet.

Can create some basic buttons for free. A monthly subscription will get you many more. Good for prototypes etc.

Keeping track of Mozilla development is never easy, especially the minute details related to new or improved web technology development and support. The Mozilla development community has set up a new weblog to fix this, the Web Tech weblog. Here the devs will be posting about and discussing topics of interest to web developers.

nice menu building technique

Dynamic, sliding JS based on JQuery menu with sliding images (used by wp.pl, itc.com, etc.)

XRAY is a free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.

With this little CSS technique a user can identify a link by its icon.

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out - it's free!