The Future Of CSS: Experimental CSS Properties – By Christian Krammer – ‘coding.smashingmagazine.com’

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius,box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we will look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Read more

2012
09/13
POSTED BY
CATEGORY
css3
Development
tips
Tutorial
TAGS





4 comments

Beautiful Footer Lights – Tutorial

Hey guys, here is the beautiful footer lights tutorial.

The basic idea behind this creation was to create something that looked something like the beautiful Aurora Borealis, well not really but it is something close to it.

The structure is simple concentric rectangles with the smaller at the centre and bigger ones wrapping around it. The glowing lights are actually box-shadow with with changing colour animation. The illusion of multiple colours is because of the overlapping colours that mix and create an illusion of multiple colours.

here is the code for the footer.

Read more

2012
08/29
POSTED BY
CATEGORY
css
css3
Development
Tutorial
Web Design
TAGS




3 comments

Beautiful Footer Lights

Hi Guys, this is my first article. Given below is a quick demonstration of “Beautiful Footer Lights”. This is one awesome style to create an awesome looking footer. Specially for websites with lightning effects or anything you can think of.

Will have a tutorial soon. but for now here is a quick Demonstration.

 

 

2012
08/28
POSTED BY
CATEGORY
css
css3
Tutorial
Web Design
TAGS




13 comments

CSS Hacks by – www.webdevout.net

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it’s best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

Conditional comments

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called “conditional comments”. Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE’s version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer’s Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn’t support conditional comments.

Read more

2012
08/26
POSTED BY
CATEGORY
css
hacks
tips
Tutorial
Web Design
TAGS





4 comments

10 ways to make Internet Explorer act like a modern browser

 

Like many other web developers, I definitely hate Internet Explorer, especially the version 6. At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it’s not surprising that IE can’t handle them correctly. Luckily, a few tricks can make your life easier.

 

Enable HTML5 on IE

Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web.
Most modern browser can already handle, at least partially, the new HTML5 recommendations. But as Internet Explorer isn’t well known for its sense of innovation, it will simply ignore the markup.

The html5.js is a very interesting project which aim to make Internet Explorer HTML5 compatible. The only thing you have to do is to embed the html5.js script in your html document header. You can hotlink the script, as shown in the example below:

Read more

2012
08/26
POSTED BY
CATEGORY
Tutorial
Web Design
TAGS




91 comments

Swatch Book with CSS3 and jQuery

Swatch Book with CSS3 and jQuery

Swatch Book with CSS3 and jQuery

Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript.

Read more

2012
08/26
POSTED BY
CATEGORY
Development
Tutorial
Web Design
TAGS



3 comments

LINE THAT UP: PROPER ALIGNMENT IN WEB DESIGN

Proper alignment techniques for text and other elements can add punch and readability to your website.

Proper alignment of elements and text on your website greatly impact the overall design.

Meticulous alignment of elements, such as images and text blocks, adds an extra level of professionalism to your site and is visually appealing and calming. Choosing the proper alignment for text within each block can also add a sense of order and contributes to readability and overall design.

Read more

2012
06/28
POSTED BY
CATEGORY
Web Design
TAGS

5 comments