CSS 3 Gradient without image
Jayakumar
4/20/2011
The CSS 3 gradient syntax is the only one that is different for different browsers. the one used by FireFox seems to be the easiest.
.box_gradient
{
/* FireFox 3.6 */
background-image: -moz-linear-gradient(top, #444444, #999999);
/* Safari4+, Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}
.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}
.box_gradient
{
/* FireFox 3.6 */
background-image: -moz-linear-gradient(top, #444444, #999999);
/* Safari4+, Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}
.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}
Null object Error Help Please ..........
Jayakumar
2/08/2011
package {
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.utils.setTimeout;
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.transitions.*;
import fl.transitions.easing.*;
public class gallery {
private var ref:Object;
private var lastObj:Object;
private var firstObj:Object;
private var numberOfImages:Number=9;
private var arr:Array=[];
private var Width:Number;
private var Height:Number;
private var imageCount:Number=1;
private var lastValue:Number;
private var timer:Timer;
private var firstObject:Object;
private var lastObject:Object;
public function gallery(obj:Object) {
ref=obj;
ref.image_mc.oldX=ref.image_mc.x;
ref.nxt_mc.addEventListener(MouseEvent.CLICK,moveNext);
ref.prev_mc.addEventListener(MouseEvent.CLICK,movePrev);
loadAllImage();
for (var i=1; i<=numberOfImages; i++) { attachClip(i,lastObj); arr.push(i); } firstObject=ref.image_mc.getChildAt(0); lastObject=ref.image_mc.getChildAt(ref.image_mc.numChildren-1); } private function movePrev(evnt:MouseEvent) { var currentX=ref.image_mc.oldX+(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeLast,200) } private function moveNext(evnt:MouseEvent) { var currentX=ref.image_mc.oldX-(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeFirst,200) } private function removeFirst() { try { if (lastObject==null) { lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages); } var firstId:Number=firstObject.name.split('_')[1]; var lastId:Number=lastObject.name.split('_')[1]; firstObject.x=(lastObject.x+lastObject.width)+Number(10); if ((firstId+1)>numberOfImages) {
firstId=0;
}
firstObject=ref.image_mc.getChildByName('thumNail_'+(firstId+1));
lastObject=ref.image_mc.getChildByName('thumNail_'+firstId);
} catch (Err:*) {
}
}
private function removeLast() {
try {
if (firstObject==null) {
firstObject=ref.image_mc.getChildByName('thumNail_'+1);
}
if (lastObject==null) {
lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages);
}
var firstId:Number=firstObject.name.split('_')[1];
var lastId:Number=lastObject.name.split('_')[1];
lastObject.x=(firstObject.x-firstObject.width)-Number(10);
if ((lastId-1)<0) {
lastId=numberOfImages
}
lastObject=ref.image_mc.getChildByName('thumNail_'+(lastId-1));
firstObject=ref.image_mc.getChildByName('thumNail_'+lastId);
} catch (Err:*) {
}
}
private function loadAllImage() {
try {
var url:String='images/image_'+imageCount+'.jpg';
imageCount++;
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadingCompleted);
} catch (Err:*) {
}
}
private function loadingCompleted(evnt:Event) {
loadAllImage();
}
private function attachClip(arg:Number,Obj:Object,num:Number=0) {
var thumNail:thumnail_mc=new thumnail_mc();
thumNail.name='thumNail_'+arg;
Width=thumNail.width;
Height=thumNail.height;
if (Obj) {
if (num!=0) {
thumNail.x=(Obj.x-Obj.width)-Number(10);
firstObj=thumNail;
} else {
thumNail.x=(Obj.x+Obj.width)+Number(10);
}
} else {
}
lastObj=thumNail;
thumNail._txt.text=String(arg);
ref.image_mc.addChild(thumNail);
loadThumNailImages(thumNail,arg);
}
private function loadThumNailImages(thumNail:Object,arg:Number) {
var url:String='images/image_'+arg+'.jpg';
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleted);
thumNail.image.addChild(loader);
}
private function imageLoadCompleted(evnt:Event) {
var target=(evnt.target.content);
target.parent.parent.width=Width;
target.parent.parent.height=Height/2;
}
}
}
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.utils.setTimeout;
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.transitions.*;
import fl.transitions.easing.*;
public class gallery {
private var ref:Object;
private var lastObj:Object;
private var firstObj:Object;
private var numberOfImages:Number=9;
private var arr:Array=[];
private var Width:Number;
private var Height:Number;
private var imageCount:Number=1;
private var lastValue:Number;
private var timer:Timer;
private var firstObject:Object;
private var lastObject:Object;
public function gallery(obj:Object) {
ref=obj;
ref.image_mc.oldX=ref.image_mc.x;
ref.nxt_mc.addEventListener(MouseEvent.CLICK,moveNext);
ref.prev_mc.addEventListener(MouseEvent.CLICK,movePrev);
loadAllImage();
for (var i=1; i<=numberOfImages; i++) { attachClip(i,lastObj); arr.push(i); } firstObject=ref.image_mc.getChildAt(0); lastObject=ref.image_mc.getChildAt(ref.image_mc.numChildren-1); } private function movePrev(evnt:MouseEvent) { var currentX=ref.image_mc.oldX+(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeLast,200) } private function moveNext(evnt:MouseEvent) { var currentX=ref.image_mc.oldX-(Width+Number(10)); var myTweenX = new Tween(ref.image_mc, "x", Strong.easeOut,ref.image_mc.x,currentX,0.5, true); var myTweenY = new Tween(ref.image_mc, "y", Strong.easeOut,ref.image_mc.y,ref.image_mc.y,0.5, true); ref.image_mc.oldX=currentX var id=setTimeout(removeFirst,200) } private function removeFirst() { try { if (lastObject==null) { lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages); } var firstId:Number=firstObject.name.split('_')[1]; var lastId:Number=lastObject.name.split('_')[1]; firstObject.x=(lastObject.x+lastObject.width)+Number(10); if ((firstId+1)>numberOfImages) {
firstId=0;
}
firstObject=ref.image_mc.getChildByName('thumNail_'+(firstId+1));
lastObject=ref.image_mc.getChildByName('thumNail_'+firstId);
} catch (Err:*) {
}
}
private function removeLast() {
try {
if (firstObject==null) {
firstObject=ref.image_mc.getChildByName('thumNail_'+1);
}
if (lastObject==null) {
lastObject=ref.image_mc.getChildByName('thumNail_'+numberOfImages);
}
var firstId:Number=firstObject.name.split('_')[1];
var lastId:Number=lastObject.name.split('_')[1];
lastObject.x=(firstObject.x-firstObject.width)-Number(10);
if ((lastId-1)<0) {
lastId=numberOfImages
}
lastObject=ref.image_mc.getChildByName('thumNail_'+(lastId-1));
firstObject=ref.image_mc.getChildByName('thumNail_'+lastId);
} catch (Err:*) {
}
}
private function loadAllImage() {
try {
var url:String='images/image_'+imageCount+'.jpg';
imageCount++;
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadingCompleted);
} catch (Err:*) {
}
}
private function loadingCompleted(evnt:Event) {
loadAllImage();
}
private function attachClip(arg:Number,Obj:Object,num:Number=0) {
var thumNail:thumnail_mc=new thumnail_mc();
thumNail.name='thumNail_'+arg;
Width=thumNail.width;
Height=thumNail.height;
if (Obj) {
if (num!=0) {
thumNail.x=(Obj.x-Obj.width)-Number(10);
firstObj=thumNail;
} else {
thumNail.x=(Obj.x+Obj.width)+Number(10);
}
} else {
}
lastObj=thumNail;
thumNail._txt.text=String(arg);
ref.image_mc.addChild(thumNail);
loadThumNailImages(thumNail,arg);
}
private function loadThumNailImages(thumNail:Object,arg:Number) {
var url:String='images/image_'+arg+'.jpg';
var req:URLRequest=new URLRequest(url);
var loader:Loader=new Loader();
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadCompleted);
thumNail.image.addChild(loader);
}
private function imageLoadCompleted(evnt:Event) {
var target=(evnt.target.content);
target.parent.parent.width=Width;
target.parent.parent.height=Height/2;
}
}
}
Comprehensive List of Browser-Specific CSS Hacks
Jayakumar
12/11/2010
Comprehensive List of Browser-Specific CSS Hacks
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Border-radius Shorthand Syntax
Jayakumar
11/09/2010
border-radius Shorthand Syntax :
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
IE browser Hacks
Jayakumar
7/22/2010
IE 6 and below
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
5 Tips of Defining Vertical Centering With CSS Tags:
Jayakumar
4/01/2010
5 Tips of Defining Vertical Centering With CSS Tags:
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements).
Content goes here
Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
Content Here
Method 3
In this method, we will insert a div above the content element. This will be set to
Content here
Method 4
This method uses a
Content here
Method 5
This method will only centre a single line of text. Simply set the
Content here
Content goes here
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
overflow:auto; to the content div, so if there is too much content to fit in, a scrollbar will appear, instead of the content continuing on outside the div!Content Here
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}Method 3
In this method, we will insert a div above the content element. This will be set to
height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.Content here
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}Method 4
This method uses a
position:absolute; div with a fixed width and height. The div is then told to stretch to top:0; bottom:0;. It can’t because of the fixed height, so margin:auto; will make it sit in the middle. This is similar to using the very common margin:0 auto; to horizontally centre block elements.Content here
#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}Method 5
This method will only centre a single line of text. Simply set the
line-height to the height of the object, and the text sits in the middleContent here
#content {height:100px; line-height:100px;}Mozilla implements @font-face
Jayakumar
3/25/2010
Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the
@font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.
Subscribe to:
Posts
(
Atom
)
