Css3 - Html5 http://css3c.com Sat, 17 Sep 2011 22:37:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 How to Alternate Floated Images with CSS 3 http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/ http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/#comments Sat, 17 Sep 2011 22:33:04 +0000 admin http://css3c.com/?p=252 If you put up a lot of images on your web pages, you may want to alternate how they are displayed within the content. With CSS 2 and below, you have to set a different class on every image. Then you add the float:left or float:right to each class. If you add a new image to the page and you want it to alternate with the rest, you’ll need to add a class to it and then change the class of all the images below it.

CSS 3 makes this easy. With just two CSS styles you can set all the images on your page to float alternately left and right. You just need to use the nth-of-type CSS pseudo-class.
Write Your HTML

First write your HTML with the images in the content where you want them.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img src="http://css3c.com/wp-content/themes/blue-chronicles/images/logo.gif" alt="Css3c.com Floated Images" width="100" height="100" />
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<img src="http://css3c.com/wp-content/uploads/2011/06/css-button.gif" alt="Css3c.com Floated Images" width="100" height="100" />
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<img src="http://www.css3.info/wp-content/uploads/2011/05/stunningCSS3-paul-irish1.gif" alt="Css3c.com Floated Images" width="100" height="100" />
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" />
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" />
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
<p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p>
1
2
3
4
5
6
img:nth-of-type(odd) {
  float: left;
}
img:nth-of-type(even) {
  float: right;
}
]]> http://css3c.com/css3/how-to-alternate-floated-images-with-css-3/feed/ 0 How to Make a Zebra Striped Table with CSS 3 http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/ http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/#comments Sat, 17 Sep 2011 22:29:53 +0000 admin http://css3c.com/?p=250 One of the most common ways to style tables is to set the background color of every other row. This is often refered to as “zebra stripes”. This type of striping makes the table much easier to read. But it requires that you add a class to every other table row and then set styles for them.

This works fine, but every time you need to edit that table, you may have to edit every single row in the table to get the classes correct. For example, if you add a new row to your table, every other row below it needs to have the class changed.

But CSS 3 makes it easy to style tables with zebra stripes. You don’t need to add any extra HTML attributes or CSS classes, you just use the nth-of-type CSS pseudo-class.
Write Your HTML Table

First write your table as you would normally write it in HTML. Don’t add any special classes to the rows or columns.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table cellpadding="0" cellspacing="0">
  <tr>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
  </tr>
  <tr>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
  </tr>
  <tr>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
  </tr>
  <tr>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
  </tr>
  <tr>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
    <td>test test test</td>
  </tr>
</table>
1
2
3
tr:nth-of-type(odd) {
  background-color:#ccc;
}
]]> http://css3c.com/css3/how-to-make-a-zebra-striped-table-with-css-3/feed/ 0 Free CSS3 Video Tutorials from Think Vitamin (Again) http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/ http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/#comments Mon, 11 Jul 2011 04:17:22 +0000 admin http://css3c.com/?p=244 Back in March 2011 we reported that Think Vitamin were offering free access to their entire CSS3 Video Training Course for 24 hours only.

I’m pleased to announce that this week I received an email from Alan Johnson at Think Vitamin letting me know that once again they’ve decided to offer free access to the entire CSS3 Video Training Course, minus the Master Class project – which is only available to paid members. However, this time there is no 24 hour time limit, with the videos being available for ‘the foreseeable future’ – however long that may prove to be.

The collection includes over 50 videos, totalling over four hours of tutorials, ranging from CSS3 basics such as border-radius, box-shadow and CSS3 gradients, to more complex subjects including CSS3 selectors, transitions, animations and transforms.

So, if you missed them the first time around, or struggled to watch all 51 videos in 24 hours, here they are again.

The full series of videos on offer is as follows:

Borders

Gradients

Animation

Typography

Media Queries

Selectors

Backgrounds

]]> http://css3c.com/css3/free-css3-video-tutorials-from-think-vitamin-again/feed/ 0 Css button style http://css3c.com/css2/css-button-style/ http://css3c.com/css2/css-button-style/#comments Tue, 14 Jun 2011 23:44:42 +0000 admin http://css3c.com/?p=239

With the button is to use background image, css writing for them, with possible repeat backgorund case is very simple. However, with a button on the style as how they can be scaled according to the text ..

With people writing each button css normally would cut into an image. It is not necessary, we can write the following:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a.button {
background: transparent url(button-right.png) no-repeat scroll top right;
display: block;
float: left;
height: 24px;
margin:5px 6px 0 0;
padding-right: 25px;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}
a.button span {
background: transparent url(button-left.png) no-repeat;
display: block;
line-height: 22px;
padding: 0 0 5px 12px;
text-shadow: 0 -1px 0 #333;
}
a.button:hover span{
text-decoration:none;
}

Html:

1
2
3
4
5
6
7
<div style="width:200px; margin:0 auto;">
    <a class="button" href="#"><span>View demo</span></a>
    <a class="button" href="#"><span>CSS3</span></a>
    <a class="button" href="#"><span>Css3 News</span></a>
    <a class="button" href="#"><span>Jquery & Javascript</span></a>
    <a class="button" href="#"><span>Css3 and html5</span></a>
</div>


View demo

]]> http://css3c.com/css2/css-button-style/feed/ 0 CSS3 Animations Support in Firefox 5 Beta http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/ http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/#comments Mon, 06 Jun 2011 15:48:08 +0000 admin http://css3c.com/?p=236 Released on Friday 20th May 2011, Firefox 5 beta brings long awaited support for the CSS3 Animations module, released as a W3C working draft in March 2009, to Mozilla’s popular web browser.

The following properties are supported, although you’ll have to use the ‘-moz-’ prefix for the time being:

  • animation-delay
  • animation-direction
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

CSS3 Animations have already been supported by Webkit based browsers (eg. Safari/Chrome) for over two years, since February 2009, although as with Firefox a prefix is required, in this case the ‘-webkit-’ prefix.

For a great demonstraion of what can be achieved using CSS3 Animations, check out Anthony Calzadilla, Andy Clarke and Geri Coady’s Madmanimation demo (works in both the Firefox beta and current versions of Safari/Chrome). There’s also some basic examples on the Mozilla Hacks Blog here and Paul Rouget has ‘hacked’ Anthony Cadzadilla’s famous CSS3 AT-AT demo to work in Firefox here.

You can find full details of CSS3 Animations support in Firefox 5 on the Mozilla Developer Network, and details of CSS3 Animations support in Webkit can be found on the Webkit blog. To date Webkit and Firefox are the only browsers to have implemented CSS3 Animations.

You can download Firefox 5 beta here and further details on the other improvements in Firefox 5, including improved standards support for HTML5, XHR, MathML, SMIL, and canvas, can be found in the release notes.

]]> http://css3c.com/css3/css3-animations-support-in-firefox-5-beta/feed/ 0 Angles in Gradients http://css3c.com/css3/angles-in-gradients/ http://css3c.com/css3/angles-in-gradients/#comments Wed, 25 May 2011 02:19:30 +0000 admin http://css3c.com/?p=230 Posting on behalf of Tab Atkins about an open spec issue:

I’ve been pretty adamant for some time that gradients should use the math-y interpretation of angles, where 0deg is East and 90deg is North. In addition to matching what you learn in school about polar coordinates, it matches what tools like Photoshop expose. Other members of the WG, though, have been equally adamant that we should more closely match existing language conventions, particularly that bigger angles mean clockwise rotation.

The strength of my conviction has eroded over time. It really is true that every other use of angles uses them to represent clockwise rotations. In SVG, angles are present in transforms and the ‘glyph-orientation’ properties, while in CSS they’re present in transforms, ‘image-orientation’, and the ‘azimuth’ and ‘elevation’ aural properties. In all of them (save ‘elevation’, which rotates in a different axis), the rotation is clockwise.

I also know that, as an author, there have been several places where SVG has annoyed me because it does two similar things in an inconsistent way (unfortunately, I don’t remember exactly what things annoyed me). I suspect these things were designed to be consistent with other tools that SVG wanted to align with. I, having never used these tools, don’t understand this and just see the self-inconsistency. I’d prefer to avoid a similar situation with CSS, where users that don’t remember their polar coordinates and never used gradients in Photoshop look at CSS gradients and just see that the angles are defined in a way that’s inconsistent with how they’re defined elsewhere. Plus, an argument can be made that actually respecting polar coordinates would involve clockwise rotation, as the angles should progress from the X-axis toward the Y-axis, which points downward on the screen.

So, we have three choices:

  • A) Keep the angles as they are, with 0deg=East and 90deg=North (counter-clockwise)
  • B) Switch to screen-coord polar, with 0deg=East and 90deg=South (clockwise)
  • C) Switch to bearing angles (compass directions), with 0deg=North and 90deg=East (clockwise)

Except for ‘azimuth’ [which uses '0deg' to indicate straight ahead], current properties are consistent with either B or C, as they just use the angles for rotation, not direction.

What do you think?

]]> http://css3c.com/css3/angles-in-gradients/feed/ 0 Book Review: Stunning CSS3 by Zoe Gillenwater http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/ http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/#comments Wed, 25 May 2011 02:11:15 +0000 admin http://css3c.com/?p=224 Stunning CSS3 by Zoe Gillenwater is a project-based book offering a solid guide to what’s possible and what’s coming around the corner with CSS.

Published by PeachPit, Stunning CSS3 is set in the same easy-going, information-packed writing style that carried out in her previous book, Fluid Web Layout.

Over the course of seven chapters, Gillenwater goes through CSS3 advances as follows:

While Gillenwater’s book covers some of the more popular CSS3 effects like ‘border-radius’, ‘@font-face’, and ‘text-shadow’, she also reviews some of the less known like HSLA, ‘word-wrap’ and ‘background-clip’, just to name a few.

However, it’s the last two chapters where the book really shines. A continuation of sorts from her previous book, Flexible Web Design, Gillenwater tackles media queries and multi-column layouts in a language that is accessible for CSS beginners while never alienating the CSS professional.

A sample portion of the chapter “Different Screen Size, Different Design” is available online.

Paul Irish, developer on Modernizr among the many other things he does, praised Gillenwater’s Stunning CSS3 on Twitter:

@zomigi reading your css3 book. really enjoying it so far; excellent detail and very informed advice. A+++

Stunning CSS3 can be bought as a printed book or an ebook from PeachPit, or wherever fine tech books are sold.

The author’s web site for the book can be found at StunningCSS3.com.

]]> http://css3c.com/css3/book-review-stunning-css3-by-zoe-gillenwater/feed/ 0 More Module Updates from the W3C http://css3c.com/css3/more-module-updates-from-the-w3c/ http://css3c.com/css3/more-module-updates-from-the-w3c/#comments Mon, 25 Apr 2011 01:31:41 +0000 admin http://css3c.com/?p=212 The W3C CSS Working Group have introduced a new module to CSS3, the CSS3 Grid Layout module, as well as released two further updated specifications, for the CSS3 Multi-column Layout and CSS3 Text modules.

Let’s take a closer look at what’s new.

CSS3 Grid Layout

Initially proposed by Microsoft, and first released as a W3C working draft on 7th April 2011, the CSS3 Grid Layout module introduces a new layout method to CSS3.

According to the specification:

Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn’t have content structure, and thus enables a wide variety of layouts not possible with tables. For example, the children of the Grid can position themselves with Grid Lines such that they overlap and layer similar to positioned elements.

In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid and source order independent lay out techniques. By combining media queries with the CSS properties that control layout of the Grid and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, without needing to alter the semantic nature of their content.

You can find the latest version of the specification here.

At present, Microsoft’s Internet Explorer 10 platform preview is the only browser to have implemented the Grid Layout module, a demonstration can be found here.

CSS3 Multicolumn Layout

The CSS3 Multicolumn Layout module was released as a candidate recommendation on 12 April 2011.

According to the specification, the main updates from the previous working draft are as follows:

The specification was updated in April 2011 to correct a contradiction between the text and the pseudo-algorithm in section 3.4. The pseudo-algorithm was corrected and also made easier to read. The wording of a few other sections was improved in places, without changes to the functionality.

You can find the latest version of the specification here.

CSS3 Text

An updated working draft of the CSS3 Text module was released on 12 April 2011.

According to the specification there are several major changes, including:

  • Rename ‘large-kana’ to ‘fullsize-kana’.
  • Merged ‘ hyphenate-limit-before ‘ and ‘ hyphenate-limit-after ‘ into ‘ hyphenate-limit-chars ‘ and added a word-length limit as well.
  • Renamed ‘ white-space-collapsing ‘ to ‘ bikeshedding ‘.
  • Added ‘ tab-size ‘ property.
  • Removed ‘ keep-words ‘ value of ‘ word-break ‘.
  • Removed optional second hyphenation character.
  • Added ‘ hyphenate-zone ‘ property.
  • Removed ‘ unrestricted ‘ value of ‘ text-wrap ‘.
  • Added ‘ hyphenate ‘ value to ‘ word-wrap ‘.
  • Merged ‘ text-align-first ‘ into ‘ text-align ‘.
  • Removed ‘ last ‘ value of ‘ hanging-punctuation ‘.
  • Added cancel values to ‘ text-decoration-lines ‘/’ text-decoration ‘.
  • Removed ‘ all ‘ value of ‘ text-decoration-skip ‘.
  • Changed ‘ wave ‘ value of ‘ text-decoration-style ‘ to ‘ wavy ‘.
  • Changed syntax of ‘ text-emphasis-position ‘ to allow more combinations of position values.
  • Added an informative appendix on cultural correlations of various CSS3 Text features.
  • Added an appendix to categorize scripts according to the categories used to define, e.g. ‘ text-justify ‘ behavior.

The updated specification can be found here.

]]> http://css3c.com/css3/more-module-updates-from-the-w3c/feed/ 0 Internet Explorer 10 Debuts at Mix 2011 http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/ http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/#comments Fri, 15 Apr 2011 23:50:34 +0000 admin http://css3c.com/?p=210 With Internet Explorer 9 barely out of the labs, Microsoft yesterday caught many developers by surprise, with the launch of the first platform preview of the latest incarnation of their popular web browser, Internet Explorer 10, at this years Mix conference.

The latest version of Internet Explorer, currently only three weeks into the development cycle, already boasts an impressive array of improvements, particularly in terms of CSS3 support, addressing many of the areas missed by IE9. For this release, Microsoft has paid particular attention to the CSS3 layout modules, with the platform preview offering implementations of the CSS3 Multi-column Layout module, the Flexible Box Layout module, and the recently announced CSS3 Grid Layout module.

In addition to the improved support for the differing CSS3 layout techniques, the platform preview also offers support for CSS3 gradients, which should make many developers happy, having previously voiced disappointment that support for gradients was not included in Internet Explorer 9. Additional CSS3 support has already been promised for future IE10 preview releases including CSS3 Transitions and 3D Transforms.

The development process looks set to follow a similar timescale to IE9, which was announced at last years Mix conference, with regular platform previews scheduled for release every 8 – 12 weeks.

You can download the platform preview here and read more on the IEBlog here.

Several new demos, showing off some of the new functionality included in IE10, have been added to the IE Test Drive site.

]]> http://css3c.com/css3/internet-explorer-10-debuts-at-mix-2011/feed/ 1 W3C Release Series of Updated CSS3 Specifications http://css3c.com/css3/w3c-release-series-of-updated-css3-specifications/ http://css3c.com/css3/w3c-release-series-of-updated-css3-specifications/#comments Thu, 17 Mar 2011 03:10:16 +0000 admin http://css3c.com/?p=203 Over the course of the last two weeks, the W3C CSS Working Group have issued three updated CSS3 specifications. The first sees the CSS3 Backgrounds and Borders module return to candidate recommendation, with the second and third providing updated working drafts of the CSS3 Text and CSS3 Image Values and Replaced Content modules respectively.

The working group also introduced a new module, CSS3 Writing Modes, just over 2 weeks ago on the 1st February. This recent flurry of activity represents the first major updates to the CSS3 specifications since the CSS3 Color module was released as a proposed recommendation in October last year.

Let’s take a look at what’s new.

Backgrounds and Borders

The CSS3 Backgrounds and Borders specification first reached candidate recommendation in December 2009, however reverted to a last call working draft in June 2010 in order to introduce several changes:

It is worth noting that whilst the ‘ box-shadow ‘ property now appears to be safe, having seen a number of new implementations after being dropped from the last candidate recommendation issue, the ‘ box-decoration-break ‘ property is still at risk of being dropped if there are not enough implementations by end of the candidate recommendation period, given as 15 May 2011 at the earliest. At present Opera is the only browser to have implemented the property.

You can view the updated candidate recommendation, released on 15th February 2011, here.

Text

The updated working draft of the CSS3 Text module, also released on 15th February 2011, introduces many changes from the previous release, October 2010, including:

According to a post on the working group blog:

With the addition of the hyphenation properties pulled from CSS3 GCPM, this draft is now solidly in the refining stage. Feedback is welcomed, especially from the Southeast Asian, South Asian, and Arabic script communities, from whom feedback has been noticeably lacking thus far.

You can view the updated specification here.

Image Values and Replaced Content

With the release of this updated working draft, on 17th February 2011, the Images Value and Replaced Content specification has received a major overhaul along with a new name, the module was formerly called ‘Image Values’. The new name is a result of several replaced-element manipulating properties being pulled into the specification from the CSS3 Generated Content for Page Media and CSS3 Paged Media modules.

Aside from this, the most noticeable update is the inclusion of CSS3 gradients. CSS3 gradients were first introduced by Webkit back in 2008 and have been implemented by Webkit and Mozilla for some time, however this is their first inclusion in a CSS3 specification. The gradients syntax has been simplified, for ease of use, prior to inclusion in this specification, see this article on the Surfin’ Safari blog for more information.

Additional new features include:

According to a post on the working group blog:

This long-overdue update to the /TR page includes CSS gradients, and has also pulled in the various replaced-element manipulating properties from CSS3 GCPM and CSS3 Paged Media. Feedback is welcome on all aspects, but particularly on the gradients syntax.

Writing Modes

This month saw the addition of a new module to CSS3, CSS Writing Modes Module Level 3, originally due to be named ‘Text Layout’. In actual fact, the first working draft of the new module was published on 2nd December 2010, however no official announcement was made by the working group until the specification was updated on 1st February 2011.

The CSS3 Writing Modes module defines several new properties which, together, add support for various international writing modes, including left-to-right, right-to-left, bidirectional and vertical. The new properties are as follows:

The specification, still in the early stages of development, offers the following explanation of writing modes:

A writing mode in CSS is determined by the ‘writing-mode’, ‘direction’, and ‘text-orientation’ properties. It is defined primarily in terms of its inline base direction and block flow direction:

The inline base direction is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The ‘direction’ property specifies the inline base direction of an element and, together with the ‘unicode-bidi’ property and the inherent directionality of any text content, determines the ordering of inline-level content within a line.

The block flow direction is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The ‘writing-mode’ property determines the block flow direction.

A horizontal writing mode is one with horizontal lines of text, i.e. a downward or upward block flow. A vertical writing mode is one with vertical lines of text, i.e. a leftward or rightward block flow.

Further details, including an explanatory diagram of writing modes, can be found in the specification here.

]]> http://css3c.com/css3/w3c-release-series-of-updated-css3-specifications/feed/ 0