4 ترفند استایل نویسی css بر روی عکس و متون

progpars

progpars

progpars.com
همونطور که میدونید css 3 آخرین ورژن css هست و این آموزش ها در مروگر اکسپلورر عمل نخواهد کرد اما استفاده ازاین استایلها
به زیبایی سایت شما بسیار کمک میکند!

1)زاویه دادن به لبه های عکس!
2)چرخش تصاویر!
3)ساختن کادر برای عکس!
4)سایه دادن به متون!
---------------------------------------------------------------------
1) زاویه دادن به لبه های عکس!
کد زیر را در img استفاده کنید :
کد: 
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;


2)چرخش تصاویر!
کد زیر را در img استفاده کنید :
کد: 
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
توجه: میزان درجه هم میتونید تعیین کنید DEG


3)ساختن کادر برای عکس!
کد زیر را در img استفاده کنید :
کد: 
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
نحوه استفاده از کد های بالا!
کد: 
border-image: url(border.png) 27 27 27 27 round round;
یا
کد: 
border-image: url(border.png) 27 27 27 27 stretch stretch;



4)سایه دادن به متون!
میتونید برای لینکها یا متون استفاده کنید :
کد: 
text-shadow: 0px 0px 5px #777;
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
ارادتمندم دوست عزیز
لطفا یک مثال برای آموزش خود ضمیمه کنید
متشکرم
 
L

L-B

Well-Known Member
با اجازه ی استارتر .....

1)زاویه دادن به لبه های عکس!


این کد برای مرورگرهایی هستش که از webkit پشتیبانی میکنن > کروم , سافاری
کد: 
-webkit-border-radius: 8px;

این کد برای مرورگری هستش که خیلی خیلی بهتر از IE هست پشتیبانی میکنن > فایرفاکس
کد: 
-moz-border-radius: 8px;

و حالت استاندارد
کد: 
border-radius: 8px;


نمایش حالت ایجاد زاویه :

i144553_01.png


کد زیر بیان گر توانایی این کدهاست :

PHP: 
<html>
<head><title>MajidOnline Testing Corners Radius | By L-B :D</title>
<link rel="stylesheet" type="text/css" href="Radius.css" />
</head>

<body>
<div class="radius">Hi EveryOne This Is L-B</div>
</body>
</html>

البته خیلی از کد های css رو که نوشته میخواستم از کل صفحه اسکرین شات بگیرم و مرتب به نظر بیاد ولی به این عکس کوچیک بسنده کردم
CSS
PHP: 
.radius {
	background:#000;
	width:400px;
	height:200px;
	font-size:20px;
	color:#FFF;
	text-indent:90px;
	padding-top:80px;
	font-family:Tahoma, Geneva, sans-serif;
	border:none;
	margin-left:400px;
	margin-top:220px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;							   					
	border-radius:8px;	   		
}


در آخر هم این نکته رو بگم که اگر نمیخواین از این قابلیت برای 4 گوشه استفاده کنین میتونین از کدهای زیر استفاده کنین !!

  • برای مرورگرهای پشتیبانی کننده ی webkit
PHP: 
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;

  • برای فایرفاکس
PHP: 
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;


  • حالت استاندارد
PHP: 
border-top-right-radius:8px;	
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;	
border-bottom-left-radius:8px;
 
آخرین ویرایش:
.::reza.com::.

.::reza.com::.

Member
میشه یه راهنمایی کنید که اینا رو همه رو کجا بریزیم ؟ همون اولیها رو هم بقیه رو
همه رو توی استایل css ?
 
L

L-B

Well-Known Member
2)چرخش تصاویر!


این کد برای مرورگرهایی هستش که از webkit پشتیبانی میکنن > کروم , سافاری

کد: 
-webkit-transform: rotate(45deg);

این کد برای فایرفاکس

کد: 
-moz-transform: rotate(45deg);

و برای اپرا Opera
کد: 
-o-transform: rotate(45deg);


توضیح کلی :
کلمه rotate به معنی چرخش هست و مقداری که بین پرانتز قرار میگیره بر اساس درجه هستش .
مقدار + : از طرف چپ می چرخد !
مقدار - : از طرف راست می چرخد !

نکته : اگر برای مقدار مثبت علاکت + هم بزارید مشکلی پیش نمیاد !
*** کدی رو پیدا نکردم که برای IE کار کنه ! ( هر چند مهم نیست :دی ) - ( البته شاید باشه * )

نمایش این حالت برای مقدار + :

i146368_01.png

نمایش این حالت برای مقدار - :


i146369_02.png


و کد این کار :

HTML

PHP: 
<html>
<head><title>MajidOnline Testing Rounding | By L-B :D</title>
<link rel="stylesheet" type="text/css" href="Round.css" />
</head>

<body>
<div class="round">Hi EveryOne This Is L-B</div>
</body>
</html>


CSS
در زیر میتونید مقدار و منفی هم بکنید .
PHP: 
.round {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    background:#000;
    width:400px;
    height:200px;
    font-size:20px;
    color:#FFF;
    text-indent:90px;
    padding-top:80px;
    font-family:Tahoma, Geneva, sans-serif;
    border:none;
    margin-left:400px;
    margin-top:220px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;                                                   
    border-radius:8px;     
}


به جز این خاصیت در 2D , 4 خاصیت زیر هم استفاده میشن که میتونین با مراجعه به اینجا توضیحاتشو فرا بگیرید .
PHP: 
translate()
scale()
skew()
matrix()
 
.::reza.com::.

.::reza.com::.

Member
دستت درد نکنه ولی من نفهمیدم اینارو کجا بریزم
در ضمن چجوری مشه کاری کرد که موس بیاد روش بچرخه؟
کادر هم چجوری میشه انداخت پشتش
 
L

L-B

Well-Known Member
دستت درد نکنه ولی من نفهمیدم اینارو کجا بریزم
کلیک کنید تا باز شود...

خوب دوست عزیز شما باید مسایل ابتدایی HTML و CSS رو یاد داشته باشید ....

در ضمن چجوری مشه کاری کرد که موس بیاد روش بچرخه؟
کلیک کنید تا باز شود...

در صورتی که میخواین با اومدن موس روی عکس اون بچرخه باید خصوصیت چرخش رو برای img:hover بزارین !
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا