• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
گرادیانهای فوق العاده با css3 در یک ساعت
#1
گفتم آقای علیرضا خان اسکندرپور شوفری نیستن ما به جاش یه همچین چیزایی بذاریم .

http://www.1stwebdesigner.com/css/master...an-1-hour/

کد پی‌اچ‌پی:
#wd {
backgroundvendor-type-gradientstart position shape sizecolor 1color2 [position] [, other colors positions] );
/*** real example **/

background: -moz-linear-gradienttop leftred#c10000, #ae0000 );

background: -webkit-linear-gradienttop leftred#c10000, #ae0000 );

background: -o-linear-gradienttop leftred#c10000, #ae0000 );

background: -khtml-linear-gradienttop leftred#c10000, #ae0000 );

background: -ms-linear-gradienttop leftred#c10000, #ae0000 );

backgroundlinear-gradienttop leftred#c10000, #ae0000 ); 
[عکس: 1.jpg]



کد پی‌اچ‌پی:
#wd {

background: -moz-linear-gradienttop leftwhiteblack 25% );

background: -webkit-linear-gradienttop leftwhiteblack 25% );

background: -o-linear-gradienttop leftwhiteblack 25% );

background: -khtml-linear-gradienttop leftwhiteblack 25% );

background: -ms-linear-gradienttop leftwhiteblack 25% );

backgroundlinear-gradienttop leftwhiteblack 25% );

[عکس: 2.jpg]


کد پی‌اچ‌پی:
#wd {

background:

-
moz-linear-gradienttop leftwhitetransparent 25% ),

-
moz-linear-gradientbottom rightwhitetransparent 25% ),

-
moz-radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

-
moz-radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;

background:

-
webkit-linear-gradienttop leftwhitetransparent 25% ),

-
webkit-linear-gradientbottom rightwhitetransparent 25% ),

-
webkit-radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

-
webkit-radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;

background:

-
o-linear-gradienttop leftwhitetransparent 25% ),

-
o-linear-gradientbottom rightwhitetransparent 25% ),

-
o-radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

-
o-radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;

background:

-
khtml-linear-gradienttop leftwhitetransparent 25% ),

-
khtml-linear-gradientbottom rightwhitetransparent 25% ),

-
khtml-radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

-
khtml-radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;

background:

-
ms-linear-gradienttop leftwhitetransparent 25% ),

-
ms-linear-gradientbottom rightwhitetransparent 25% ),

-
ms-radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

-
ms-radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;

background:

linear-gradienttop leftwhitetransparent 25% ),

linear-gradientbottom rightwhitetransparent 25% ),

radial-gradient2550%, circlewhitewhite 20%, transparent 25% ),

radial-gradient7550%, containwhitewhite 20%, transparent 25% )

black;            } 
[عکس: 3.jpg]



کد پی‌اچ‌پی:
body {

background:

-
moz-radial-gradientcenter centercontain#757575, transparent ),

black;

background:

-
webkit-radial-gradientcenter centercontain#757575, transparent ),

black;

background:

-
o-radial-gradientcenter centercontain#757575, transparent ),

black;

background:

-
khtml-radial-gradientcenter centercontain#757575, transparent ),

black;

background:

-
ms-radial-gradientcenter centercontain#757575, transparent ),

black;

background:

radial-gradientcenter centercontain#757575, transparent ),

black;

[عکس: 5.jpg]


این یکی دیگه تهشه!
کد پی‌اچ‌پی:
#wd {

positionrelative;

width450px;

height400px;

margin20px auto;

background:

-
moz-radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
moz-radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
moz-radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

background:

-
webkit-radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
webkit-radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
webkit-radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

background:

-
o-radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
o-radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
o-radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

background:

-
khtml-radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
khtml-radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
khtml-radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

background:

-
ms-radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
ms-radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

-
ms-radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient2530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

radial-gradient7530%, containblackblack 4%, white 5%, white 24%, transparent 25% ),

radial-gradient5050%, contain#e19b92, #e19b92 9%, transparent 10% ),

radial-gradient5075%, containblackblack 24%, transparent 25% )

#f3c2bb;

border-radius50%;

}

#wd:after {

content"Are you using IE??";

positionabsolute;

top225px;

left315px;

padding5px 10px;

width150px;

font-family"comic Sans MS",arial,verdana/* I just couldn't help using comics! */

backgroundwhite;

border2px solid #E19B92;

border-radius4px 4px 4px 4px;


[عکس: 6.jpg]
وبلاگ rezaonline.net/blog
سفارش برنامه نویسی reza.biz
Php , mysql , postgresql , redis , Yii and ... Cool
  پاسخ
تشکر شده توسط : hamid_80386 Y.P.Y Goback masoudmanson undefined admin
#2
آره خبری از داداش علیرضا نیس Heart

برا گرادیانت ها اینجا هم خوبه Big Grin
http://www.colorzilla.com/gradient-editor/
تازه افزونشو هم میشه برا FF عزیز نصب کرد Tongue
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان