Tag Archives: CSS3

CSS3 Gradient Generator by: Damian Galarza

CSS3 Gradient Generator


50 Excellent CSS3 Techniques and Tutorials for Beautiful Design – DesignModo

CSS3 has got a huge potential to create very elaborate and complicated details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques. Many designers all over the world believe that CSS3 is a technique which has unbelievable potentiality which will be used to create wonderful designs in the years to come. At present, it is not being used variedly all over the world due to a number of limitations – obsolete browsers being one of them.

Many say that it would be the application of the future as it can improve the efficiency of the workflow by substituting waste workarounds as it was once used in the case of Internet Explorer 6. In the last few years we have seen many web developers who have talked about CSS (Cascading Style Sheet) and the possible designs it can create with the help of powerful animations. With the rise of other web technologies it will create desired results in the fields of designing or managing browsers.

The CSS3 Tutorials and techniques can be proficiently functioned using markup, HTML, and some improved properties of CSS3. It has many features which are not compatible with the old web browsers and hence it will require some present day internet browsers like Internet Explorer 7 & 8, Chrome, Safari and Firefox to use the CSS3. CSS3 Tutorials can be used in developing the following techniques:

  • It can be used to create multiple backgrounds
  • Developing and drawing border images
  • Handling of opacity
  • Used in text- shadowing and box sizing
  • Used for support of columns of many different web layouts.

Read more…

CSS3 Media Queries

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Read more…


iPad CSS Layout with landscape / portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. The layout can be downloaded for free at the bottom of this article or from my iPad demo page. Here is a basic diagram of how the two orientations look:

Read more…

RGBa Browser Support

by: Chris Coyier

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div {
 background: rgba(200, 54, 54, 0.5);

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.

Read more…

Sass CSS

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Learn Sass…

HTML5 Tutorials

1.HTML5: The Basics
2.HTML5 Apps: What, Why, and How
3.HTML 5 Visual Cheat Sheet by Woork
4.HTML5 canvas – the basics
5.Create a Grid Based Web Design in HTML5 & CSS3
6.Semantics in HTML 5
7.Building Web Pages With HTML 5
8.Create a Stylish Contact Form with HTML5 & CSS3
9.28 HTML5 Features, Tips, and Techniques you Must Know
10.Build your First Game with HTML5
11.How to Build Cross-Browser HTML5 Forms
12.Code a Vibrant Professional Web Design with HTML5/CSS3
13.Coding A HTML 5 Layout From Scratch
14.Simple Website Layout Tutorial Using HTML 5 and CSS 3
15.Coding a CSS3 & HTML5 One-Page Website Template
16.HTML5 and CSS3 Without Guilt
17.Get Ready for HTML 5
18.Making a Beautiful HTML5 Portfolio
19.Build a Neat HTML5 Powered Contact Form
20.Designing a blog with html5
21.Create a stylish HTML5 template from scratch
22.Making Forms Fabulous with HTML5
23.Native HTML5 Drag and Drop
24.Touch The Future: Create An Elegant Website With HTML 5 And CSS3
25.Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part I]
26.Cross-Browser HTML5 Placeholder Text
27.HTML5 Grayscale Image Hover
28.How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery
29.Structural Tags in HTML5
30.Blowing up HTML5 video and mapping it into 3D space
31.The video element
32.HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
33.Browser Storage for HTML5 Apps
34.Creating a HTML5 & CSS3 Single Page Web Layout
35.“Mobifying” Your HTML5 Site
36.How to create water Ripple effect using HTML5 canvas
37.How to create Animated 3D canvas object in HTML5
38.Create offline Web applications on mobile devices with HTML5
39.Create Vector Masks using the HTML5 Canvas
40.Understanding HTML5 Content Models
41.Build your own HTML5 3D engine
42.Create a page flip effect with HTML5 canvas
43.Working Off the Grid with HTML5 Offline
44.New HTML5 structural tags
45.Easy Percentage Grid System with HTML5
46.Design & Code a Cool iPhone App Website in HTML5
47.Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
48.How to create a Progress bar with HTML5 Canvas
49.How to Code a Clean Website Template in HTML5 & CSS3
50.Preparing for HTML5 with Semantic Class Names
51.How to Make an HTML5 iPhone App
52.How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6
53.Bold and Italic in HTML5
54.Bouncing a Ball Around with HTML5 and JavaScript
55.Understanding HTML5 Validation
56.Comprehensive video tutorial on HTML5
57.webOS HTML5 Database Storage Tutorial
58.The Official Guide to HTML5 Boilerplate
59.HTML5 & CSS3 Support
60.Auto-Resizing HTML5 Games
61.HTML5’s Microdata, Search, and the Collaboration of the Search Giants
62.How To Develop Using HTML5: Demo Part 1
63.How To Develop Using HTML5: Demo Part 2
64.Tutorial: Case Study with Html5 + CSS3
65.HTML5 for Web Developers