Web 2.0 Style Form Generator
0Before we have presented lot of Web 2.0 online generators such as stripe generator, tabs generator, ribbons generator, tartan marker, button generator and logo generator, today Form Style Generator allows you create and design Web 2.0 style form online simply in 3 steps with a real time preview.You can customize background color or gradient style, the borders of form, font and text, the label font and text and the hover and focus style. Once you specify the style options, the tool will generate a CSS code file and the png format gradient images and then you can download and easily apply to your current websites. Form Style Generator is a new Web 2.0 generator and still in beta version, be the first to try the tool now.
One Background Image, Many Applications
0Almost every single CSS property supports the background property. This property alone gives CSS incredible aesthetic control over web layouts. But keep in mind that images are the biggest culprits in increasing page weight and slowing down load times. To help keep your pages trim, remember that you can use the same background image for as many elements on the page as you wish, your server will only have to serve up that image once.Gradients are a popular choice for background images and they help out page weight in another significant way: they are repeatable. Take a look at the gradient below. To the left you can see how the gradient looks. To the right you can see that you can squish it down to only a single pixel in width and it will repeat horizontally just the same.
The image is 200 pixels tall, to accomodate for the growth More >
Create Web 2.0 Ribbons with Quick Ribbon
0Website ribbon is a good way for you to attract your visitors attention. We have already introduced a website ribbon online generator – Website Ribbon before, here Quick Ribbon is also a new simple Web 2.0 tool for create custom stylish website ribbons within a few minutes. You can specify the custom ribbon text, font and font color from a complete color palette. And then pick up a ribbon style from 4 pre-defined sets, specify the URL and choose the link options as well for open in the same window or in a new window. After you finish the setting, you can preview the ribbon instantly at right hand site corner. Once you are happy with the creation, simply copy and paste the Javascript code before the tag at your website’s html code. It’s really a quick tool for you to stand out your currently boring style.
Good-Looking Tooltips
0Good-Looking Tooltips is a small JavaScript library that you can include to spice up the look of your tooltips in your web page. Move your mouse pointer over any of the headings in the main column here to see it in effect.
The implementation is easy!1. Download the Javascript file and upload to your site directory.2. Include the code at herder section of your web page.
< script src=â€js/glt.js†type=â€text/javascriptâ€>
3. Place the CSS code at your stylesheet.
.glt-elm{position: absolute;left: 0;top: 0;width: 150px;color: #fff;opacity: 0.9;visibility: hidden;}
.glt-elm p{background: #666;margin: 0;padding: 0.5em;}
.glt-elm img{display: block;}
4. Upload the two images to your directory.
Please visit the website for more information and customizing
Rounded Corner Boxes the CSS3 Way
0If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.
Thankfully this looks set to change with the addition of multiple background images into the CSS3 specification. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all More >
Creating Custom Corners & Borders
0Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I’ll look at the pros and cons of some common techniques and introduce a new technique that utilises both CSS and JavaScript.
Before we dive in to the CSS, let’s remind ourselves of the old fashioned approach to this problem, which uses layout tables:
Â
Content goes here
Â
A few years ago this would have been an acceptable solution. Today, it’s an ugly hack: that’s an awful lot of redundant markup for a relatively unimportant visual decoration. In fact, the above code won’t even function as intended in documents served using a strict doctype — small gaps will appear beneath the corner images, caused More >
CSS TUTORIAL
0Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variery of other effects and styles explained here.The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called “the cascadeâ€, and it’s from the cascade that CSS takes its name.
CSS QUOTES
0This property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.Values of the ‘content’ property are used to specify where the open/close quotation marks should or should not occur – the “open-quoteâ€, “close-quoteâ€, “no-open-quoteâ€, and “no-close-quote†values. “Open-quote†refers to the left (first) of a given pair of specified quotes, while “close-quote†refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the “no-close-quote†and “no-open-quote†value. In the event that the quote character nesting depth is not covered in the ‘quotes’ property specification, the last valid quotation pair set should be used.
Example blockquote[lang-=fr] { quotes: “\201C†“\201D†}blockquote[lang-=en] { quotes: “\00AB†More >