CSS3 Transitions with rotation

برای مشاهده مثال های بیشتر:

http://robertnyman.com/css3/

PSD to HTML Tutorial: Code a Photoshop File to a Working Website

معرفی سایت معروف w3School برای اموزش مقدماتی

معرفی سایت معروف w3School برای اموزش مقدماتی :

HTML

CSS

Js

Jquery

PHP

SQL

http://www.w3schools.com

Styling Forms with CSS

When you don’t quite get it, styling forms with CSS can be a real pain. But once you get your head around it you will see that there’s nothing really too difficult about it.

In this tutorial you will see how to create this contact form and style it so that it looks like this. In the future I am going to make some further guides on how to take the information entered and send it to yourself using PHP or ASP, but that’s for another day.

Right, so first of all we’re going to need our form. I am going to use this one. Your free to use this code if you don’t have a form of your own. Here’s the code for the form:

<form action=”” method=”post”>

    <label for="user_name">Your Namelabel>

    <input type="text" name="user_name" class="inputbox"/>

    <label for="user_email">Your Emaillabel>

    <input type="text" name="user_email" class="inputbox"/>

    <label for="user_message">Your Messagelabel>

    <textarea name="user_message">textarea>

    <input type="submit" value="submit" name="submit" class="submit"/>

form>

Now as you can see the form is very simple and doesn’t look very good at all just yet. We’re going to fix that though.

First of all, we’re going to give the form a css class so that we can style it and all the elements within it. To do this we simply change:

<form action=”” method=”post”>

To:

<form action=”” method=”post" class="webform">

You will notice I added a class to our form rather than an id. This is simply because you might want to use more than one form on your page and using a class will keep the page valid whether you have one form or ten.

Simple, eh? Now lets start styling.

In our CSS document, we’re going to add a style for our form. So we add:

1	.webform{}

All of our styling will go between the { and the }. Now, I dont want my form to be too wide so I’ll add a width to my CSS.

1 2	.webform{     width:400px;}

Next, we’ll add a font, a font colour and a background colour.

1 2 3 4 5

.webform{     width:400px;     font:11px Arial, Helvetica, sans-serif;     color:#777;     background-color:#fff;}

Now that the basic styling for our form is done, we can add some styling to the labels and inputs. First of all we will tackle the labels with the following CSS.

1 2 3 4

.webform label{     display:block;     width:300px;     font-weight:bold;}

All the CSS above is pretty simple, we used the “display:block;” so that all the labels will start on a new line. This means we dont have to add any breaks (
tags) after every line. After we added the styling to our labels you can see that the form is starting to look a lot better. Now for the inputs.

1 2 3 4 5 6

.webform .inputbox{     height:18px;     width:250px;     padding:4px 3px 2px 3px;     margin:2px 0 10px 3px;     border:1px solid #ccc;}

Again, I haven’t used anything to difficult to style the input boxes but they look a lot better! You might have noticed the submit button is a bit screwed up, dont worry, we’ll be fixing that later. But first we will make the textarea look better with the following CSS.

1 2 3 4 5 6

.webform textarea{     height:80px;     width:250px;     padding:4px 3px 2px 3px;     margin:2px 0 10px 3px;     border:1px solid #ccc;}

So now the form is looking fine and dandy, apart from that pesky submit button. Lets add a class to it.

Change:

1	<input type="submit" value="submit" name="submit"/>

To:

1	<input type="submit" value="submit" name="submit" class="submit"/>

Now our submit button has a class of submit. Now for the CSS.

1 2 3 4 5 6 7 8 9

.submit{     margin:2px 0 0 3px;     background-color:#eee;     height:30px;     width:80px;     padding:0;     border:1px solid #ccc;     display:block;     color:#666;}

Again, we have used the “display:block;” style to put the button on a new line without using a break. I have also added a background colour, padding, a border and margin. All of these are pretty simple CSS styles. If you need help with the different CSS styles check out the beginners guide to CSS tutorial.

منبع: http://jamesowers.co.uk

Horizontal CSS List Menu

This tutorial will show you how to make a horizontal CSS list menu. No images, no javascript. Just a simple, cross browser compatible CSS list menu! If you want to see the finished product or you just want the code, look here.

First of all we’ll need the HTML for our list menu, this is just a normal unordered list.

1 2 3 4 5 6 7 8 9 10

<div class="menu"> <ul> <li><a href="#">Homea>li> <li><a href="#">Linka>li> <li><a href="#">Linka>li> <li><a href="#">Linka>li> <li><a href="#">Linka>li> ul> <br style="clear:left"/> div>

It’s just a simple html page with an unordered list menu on. You might notice I’ve added a div called menu around the list, I like to do this as it helps me remember what part of the code does what if I ever have to go back to it.

Next we’re going to add the CSS code for the div called menu that surrounds the list.

1 2 3

.menu{     width: 100%;     background-color: #333; }

Again this is nice and simple. The menu div will be the full width of the div it’s inside and will have a dark grey background.

Next we add the syling for the list and the list items.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.menu ul{     margin: 0; padding: 0;     float: left;}   .menu ul li{     display: inline;}   .menu ul li a{     float: left; text-decoration: none;     color: white;     padding: 10.5px 11px;     background-color: #333; }   .menu ul li a:visited{     color: white;}   .menu ul li a:hover, .menu ul li .current{     color: #fff;     background-color:#0b75b2;}

Again it’s all pretty simple, you should be able to understand the code with a little bit of CSS knowledge. Have a tinker with the code if you’re unsure about something.

منبع: http://jamesowers.co.uk

CSS gradients – quick tutorial

CSS gradients – quick tutorial

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now.

However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers.

With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

ادامه نوشته

2 Column CSS Layout: Fixed Width And Centered

ادامه نوشته

ایجاد navbar به کمک css بدون استفاده از table

Simple Navigation Bar With CSS And (x)HTML:

Today I thought I’d use the same technique to create a simple navigation bar. Once again we’ll structure things with a list of links and use some CSS to turn that list into a navigation bar.

ادامه نوشته

HTML, XHTML, CSS چیست؟

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

منبع: http://www.w3.org

استفاده از border-radius برای table

The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to. In this case not only must the border radii of adjacent corners not intersect, but the horizontal and vertical radii of a single corner may not extend past the boundaries of the cell at that corner (i.e. the cell's other corners must not be affected by this corner's border-radius). If the computed values of the border radii would cause this effect, then the used values of all the border radii of the table must be reduced by the same factor so that the radii neither intersect nor extend past the boundaries of their respective corner cells.

The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.

This example draws ovals of 15em wide and 10em high:

DIV.standout {
    width: 13em;
    height: 8em;
    border: solid black 1em;
    border-radius: 7.5em 5em }

منبع: www.w3.org

معرفی کتاب CSS,HTML

با سلام. چند تا کتاب هست که تو کلاس به شما می دهم. فرمت آنها pdf یا chm هست. یکی از آنها را در اینجا معرفی می کنم.

CSS: The Missing Manual CSS: The Missing Manual

by David Sawyer McFarland (O'Reilly Media)

 

Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site's appearance. You can tap into the real power of this tool with CSS: The Missing Manual. This second edition combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers. Witty and entertaining, this second edition gives you up-to-the-minute pro techniques. You'll learn

برای مشاهده لیست کامل اینجا را ببینید.

CSS Message Box collection

Message boxes are useful elements to display status messages after or during a specific user request.

Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).

I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements.

ادامه نوشته