تمامی سفارشات 48 ساعت اخیر ارسال گردید …
مشاهده همه بسته های آموزشی

مزایای CSS آنلاین

برای اینکه به مزیت های CSS های آنلاین بپردازیم ابتدا اجازه دهید تا درباره CSS ها و الزام وجود آن ها توضیح دهیم. CSS مخفف عبارت Cascading Style Sheets می باشد. درواقع وظیفه آن بهینه کردن روش های نوشتاری و رنگ و جلوه سایت می باشد. CSS ها همراه با زبان طراحی سایت یعنی HTML ها می آیند. زبان CSS توسط کنسرسیوم جهانی وب برای غلبه بر مشکلات و رفع نقص از زبان HTML توصیه شده. طریقه استفاده ازین زبان به سه شکل زیر می باشد:

  • style sheet خارجی
  • style sheet داخلی
  • style درون خطی

style sheet خارجی:

برای اینکه ازین نوع زبان CSS استفاده کنیم. یک فایل با پسوند css. ذخیره کرده و در آن به طراحی قالب ازجمله نوع نوشته ها، اندازه نوشته ها، رنگ و باقی تغییرات که لازم داریم را درونش وارد میکنیم. سپس توسط کد فراخوان زیر که در قسمت head صفحه HTML، آنرا فراخوانی میکنیم.

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

در تگ بالا، آدرس فایل CSS رو داخل href می نویسیم.

style sheet داخلی:

در این حالت تمام کدها CSS درون همان فایل HTML در داخل دو تگ <style> و <style/> که خود این دو تگ در داخل قسمت head سایت هست، وارد می شوند.

style درون خطی:

ما میتونیم کد های CSS رو داخل هر تگ کد های HTML وارد کنیم. به عنوان مثال در کد زیر سر تیتر یک متن را از سمت چپ 30 پیکسل حاشیه دادیم و رنگ آن را آبی تعیین کردیم.

<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>

خب حالا با درنظر گرفتن توضیحات بالا که به صورت اجمالی بود به مسئله خودمان بر میگردیم.

مزایای CSS آنلاین:

طراحی سایت به نحوی که جلوه و رنگ و لعاب مد نظرمون که درعین حال اصول استاندارد را رعایت کرده باشد، کار راحتی نیست. پس درنتیجه این دشواری مارا به قالب های ابتدایی راضی می کند. ما می توانیم برای اینکه مشکل رو حل کرده باشیم از CSS های آنلاین که توسط وبسایت ها و توسعه دهنده گان طراحی شده اند استفاده کنیم. مزایای استفاده ازین امکان در زیر بررسی میکنیم:

  1. صرفه جویی در وقت
  2. صرفه جویی در هزینه های طراحی
  3. رعایت اصول استاندارد طراحی سایت
  4. دارا بودن امکان طراحی واکنشگرایی در قالب
  5. بالا رفتن سرعت بارگذاری سایت

تنها عیب آنها محدود بودن کتابخانه ها و کلاس های تعریف شده در آن است. که باید بازهم به صورت دستی خودمان کلاس ها را در زبان CSS پیاده سازی کنیم.

تاریخ ارسال
5 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
2 دیدگاه

Google Maps - قسمت سوم

در مقالات قبل Google Maps باهم بررسی کردیم که چطوری در صفحه وب خودمون یک نقشه قرار بدیم. در مقاله Google Maps – قسمت سوم باهم از امکان دیگری در Google Maps رو بهره ببریم.

نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Notepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

Google Maps – Overlays:

Overlays به معنی پوشش می باشد. Overlays اشیائی روی نفشه که ملزم به مختصات طول و عرض جغرافیایی هستند. Google Maps چندین نوع پوشش مختلف دارد:

  • Marker – مکان منحصربفرد روی نقشه. مارکرها میتونن یک آیکون سفارشی رو نمایش بدن.
  • (چند خطی)Polyline –  مجموعه ایی از خطوط مستقیم روی یک نقشه می باشد.
  • (چند ضلعی)Polygon – مجموعه ایی از خطوط مستقیم زوی یک نقشه که تشکیل یک شکل بسته رو میدن.
  • Circle و Rectangle – دایره و مستطیل
  • Info Windows – مجتوا و توضیحاتی در مورد یک نقطه داخل یک بالن بالای اون نقطه نمایش میده.
  • پوشش سفارشی

افزودن یک Marker:

توسط یک سازنده Marker یک مارکر ایجاد میکنیم. توجه داشته باشین که ویژگی موقعیت مارکر باید برای اون تنظیم بشه. متدی که یک مارکر ایجاد میکنه در زیر اومده:

var marker=newgoogle.maps.Marker({
  position:myCenter,
  });
marker.setMap(map);

متحرک کردن Marker:

کد مثال زیر نشون دهنده اینه که چطوری یک مارکر رو متحرک کنیم.

var marker=newgoogle.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });
marker.setMap(map);

استفاده آیکون بجای Marker:

همچنین مثال زیر استفاده از تصویر ایکون بجای مارکر پیشفرض رو توضیح میده:

var marker=newgoogle.maps.Marker({
  position:myCenter,
  icon:’pinkball.png’
  });

marker.setMap(map);

Polyline در Google Maps:

یک Polyline یک خطی که از بین مجموعه مختصات در جمله دستور اومده، کشیده میشه. یک Polyline از ویژگی های زیر پیروی میکنه:

  • path – چندین مختصات طول و عرض برای خط مشخص میکنه
  • strokeColor – مشخص کننده رنگ هگزادسیمالی برای خط هست. مانند فرمت: FFFFFF#
  • strokeOpacity – غلظت رنگ خط رو مشخص میکنه. و ارزش اون بین 0.0 تا 1.0 قابل تغییره.
  • strokeWeight – عرض خط رو در واحد پیکسل مشخص میکنه.
  • editable – قابل تغییر بودن خط توسط کاربران رو تعیین میکنه.( true / false )

var myTrip = [stavanger,amsterdam,london];
var flightPath = newgoogle.maps.Polyline({
  path:myTrip,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2
});

Polygon در Google Maps:

یک Polygon شبیه به Polyline از مجموعه مختصاتی که در جمله دستور اومده، تشکیل شده با این تفاوت که از آن برای تعیین یک منطقه در یک حلقه بسته طراحی میشن. Polygon ها از چند خط مستقیم بسته که تشکیل یک شکل رو میدن ، ساخته شدند. یک Polygon از ویژگی های زیر پیروی می کنند:

  • path – چندین مختصات طول و عرض رو برای خط مشخص میکنه. مختصات ابتدا و انتها برابرند.
  • strokeColor – رنگ هگزادسیمالی رو برای خط مشخص میکنه. با فرمت: FFFFFF#
  • strokeOpacity – مشخص کننده اثر غلظت خط هست. با ارزشی متغیر بین 0.0 تا 1.0.
  • fillColor – رنگ هگزادسیمالی ناحیه ایی که دورش حصار شده رو مشخص میکنه.
  • fillOpacity – مشخص کننده غلظت رنگ هست. و ارزش اون متغیر بین 0.0 و 1.0 میباشد.
  • editable – قابلیت ویرایش خط بوسیله کاربران رو تعیین میکنه.

 var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = newgoogle.maps.Polygon({
  path:myTrip,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:”#0000FF”,
  fillOpacity:0.4
});

دایره در Google Maps:

یک دایره علاوه بر ویژگی هایی که Polygon و Polyline از اونها پیروی میکردند، خواص زیر رو هم براشون میشه بکار برد:

  • Center – مشخص کننده طول و عرض جغرافیایی مرکز دایره.
  • radius – مشخص کننده شعاع دایره به متر.

var myCity = newgoogle.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:”#0000FF”,
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:”#0000FF”,
  fillOpacity:0.4
});

InfoWindow در Google Maps:

مثال زیر یک InfoWindow به همراه محتوای یک متن رو برای یک مارکر نشون میده

var infowindow = newgoogle.maps.InfoWindow({
  content:”Hello World!”
  });

infowindow.open(map,marker);

شما میتونین متدها و اشیاء بالا رو در ظرفی که برای Google Maps در مقاله های قبلی درست کردیم رو قرار بدین و نتیجه رو ببینین. با تشکر از همراهیتون.

تاریخ ارسال
5 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

تصاویر SVG - قسمت چهارم

در تصاویر SVG – قسمت چهارم  به ترسیم مستطیل ها و خاصیت های موجود درآنها  میپردازیم. پس با ما همراه باشید.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

<SVG Rectangle – <rect:

از عنصر <rect> برای ایجاد انواع چهارضلعی ها مخصوصا مستظیل ها استفاده میشود. کد زیر را امتحان کنید تا متوجه منظوز ما بشین:

 <!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”110″><rect width=”300″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)”>
Sorry, your browser does not support inline SVG.
</svg>
</body>

</html>

توضیح کدبالا:

  • توسط صفت های width و height در عنصر <rect> اندازه های مستطیل رو تعیین میکنیم
  • با استفاده از عنصر style میتونیم ویژگی های CSS در مستطیل رو تعریف کنیم.
  • با کمک CSS fill میتونیم درون مستطیلمون رو رنگ کنیم.
  • ویژگی stroke-width در CSS عرض حاشیه مسطیل رو مشخص میکنه.
  •  ویژگی stroke رنگ حاشیه مستطیل رو معرفی میکنه.

در مثالی جدید صفت های جدید از عنصر <rect> رو باهم بررسی میکنیم

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ width=”150″ height=”150″ style=”fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9″>
Sorry, your browser does not support inline SVG. 
</svg>
</body>
</html>

توضیح کدبالا:

  • صفت x موقعیت از سمت چپ مستطیل رو تعیین میکنه. مثلا مستطیل 50 پیکسل از سمت چپ قرار میگیره.
  • صفت y موقعیت از بالای مستطیل تعیین میکنه. به عنوان مثال مستطیل 20 پیکسل از بالا قرار میگیره.
  • خاصیت fill-opacity  غلظت رنگ مستطیل رو تعیین میکنه و بین 0 تا 1 متغییر هست.
  • stroke-opacity غلظت خط حاشیه مستطیل رو تعیین میکنه و همچنین بین 0 تا 1 متغییر هست.

حالا میخوایم توسط یک عنصر غلظت کل مستطیل رو تغییر بدیم.

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ width=”150″ height=”150″ style=”fill:blue;stroke:pink;stroke-width:5;opacity:0.5″>
Sorry, your browser does not support inline SVG. 
</svg>
</body>
</html>

توضیح کدبالا:

  • با خاصیت opacity در CSS عنصر میتونیم غلظت کل عنصر رو مشخص کنیم. واین غلظت بین 0 تا 1 متغیر می باشد.

در آخرین مثال مستطیلی با گوشه های گرد ایجاد میکنیم.

<!DOCTYPE html>
<html>
<body>
<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توضیح کدبالا:

  • توسط صفت های rx و ry گوشه های مستطیل رو دور میدهیم.

با سپاس فراوان از همراهیتون.

تاریخ ارسال
2 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

Font Awesome - بخش دوم

در مقاله قبلی درباره آیکون ها به شما سایت کتابخانه ایی آیکون Font Awesome رو معرفی کردیم. در این قسمت گفته های خودمون رو در باره این کتابخانه و استفاده های اون، کامل میکنیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

آیکون های Bordered و Pulled:

از کلاسهای آیکونی fa-border و fa-pull-right و fa-pull-left برای آیکون های مقالات استفاده میشن. کد زیر رو امتحان کنید.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-quote-left fa-2x fa-pull-left fa-border”></i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</body>
</html>

آیکون های پویا:

توسط کلاس fa-spin هر آیکونی رو میشه چرخوند و توسط fa-pulse اینکارو در 8 گام انجام داد. توجه کنید که مرورگرهای IE8 و IE9 از پویانمایی های CSS3 پشتیبانی نمیکند.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-spinner fa-spin”></i>
<i class=”fa fa-circle-o-notch fa-spin”></i>
<i class=”fa fa-refresh fa-spin”></i>
<i class=”fa fa-cog fa-spin”></i>
<i class=”fa fa-spinner fa-pulse”></i>
</body>
</html>

چرخاندن و فلیپ دادن آیکون ها:

ما میتونیم با استفاده از دو کلاس fa-rotate و fa-flip  آیکون هارو چرخاند و اونهارو فلیپ داد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-ambulance”></i>

<i class=”fa fa-ambulance fa-rotate-90″></i>
<i class=”fa fa-ambulance fa-rotate-180″></i>
<i class=”fa fa-ambulance fa-rotate-270″></i>
<i class=”fa fa-ambulance fa-flip-horizontal”></i>
<i class=”fa fa-ambulance fa-flip-vertical”></i>
</body>
</html>

آیکون های انباشته:

آیکون های انباشته شده معمولا از کلاس های fa-stack استفاده میکنند. از آن در کلاس والد به کار میبرند و باقی تغییرات رو بدین شکل میدن،مثلا؛ fa-stack-1x اندازه آیکون رو بزرگ و به همین ترتیب fa-stack-2x بزرگتر.

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-thin fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x”></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x fa-inverse”></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class=”fa-stack fa-lg”>
<i class=”fa fa-camera fa-stack-1x”></i>
<i class=”fa fa-ban fa-stack-2x text-danger” style=”color:red;”></i>
</span>
fa-ban on fa-camera

ثابت کردن عرض آیکون ها:

کلاس fa-fw برای ثابت کردن عرض آیکون ها استفاده میشه، این کلاس برای چیدمان های مختلف به کار میره تا نمایش اونها بهم نریزه. به ویژه کاربد این کلاس در بوت استرپ ها اهمیت زیادی دارد.

<div class=”list-group”>
  <a href=”#” class=”list-group-item”><i class=”fa fa-home fa-fw”></i> Home</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-book fa-fw”></i> Library</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-pencil fa-fw”></i> Applications</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-cog fa-fw”></i> Settings</a>
</div>

با تشکر از همراهی شما دراین مقاله.

تاریخ ارسال
30 اردیبهشت 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

معرفی Font Awesome

در مقاله آیکون در HTML از چند کتابخان آیکونی آنلاین صحبت و اونارو به شما معرفی گردیم. در این مقاله قصد داریم یکی از پرکاربردترینشون رو بهتون معرفی کنیم و نحوه استفاده ازون در جاها و شکل های مختلف رو براتون توضیح میدیم تا در طراحی قالب هاتون ازونها بهره ببرین. پس لطفا همراه ما باشین.

معرفی Font Awesome:

شما میتونین با  سایت Font Awesome که زیرمجموعه های Github محسوب میشه، از کتابخانه عظیم آیکونی این سایت بهره ببرین. برای استفاده از آیکونهای Font Awesome کافیه که خط پیرو زیر رو در قسمت <head> صفحه HTML تون  اضافه کنید.

<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>

سپس شما آیکون Font Awesome دلخواتون رو با پیشوند fa و اسم آیکون استفاده میکنین. به کدزیر توجه کنین:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-car”></i>

<i class=”fa fa-car” style=”font-size:48px;”></i>
<i class=”fa fa-car” style=”font-size:60px;color:red;”></i>
</body>
</html>

Font Awesome برای استفاده در عناصر درون خطی طراحی شده. عموما از عنصرهای <i> و <span> برای آیکون ها استفاده میشن. توجه داشته باشین که هر تغییری در اندازه فونت و رنگ در محتوای آیکون بدین، آیکون هم تغییر میکنه. تغییرات یکسان برای هرچیزی به کار میره مثلا سایه ها از CSS ارث میبره.

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

برای افزایش سایز آیکون از کلاس هایی استفاده میکنیم که سایز آیکون استفاده میشوند. مثلا fa-lg سایز آیکون رو 33% افزایش میده. به همین ترتیب fa-2x fa-3x fa-4x fa-5x موجب افزایش ساز ایکون میشن. مثال زیر رو در نظر بگیرین:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-car fa-lg”></i>
<i class=”fa fa-car fa-2x”></i>
<i class=”fa fa-car fa-3x”></i>
<i class=”fa fa-car fa-4x”></i>
<i class=”fa fa-car fa-5x”></i>
</body>
</html>

اگر ایکون های شما به هم ریخت و دریک خط قرار نگرفت line-height رو افزایش بدین.

آیکون های لیستی:

از دو کلاس fa-ul و fa-li برای جایگزین گلوله در لیست های نامرتب استفاده میکنند. همچنان برای اینکه متوجه بشین کد زیر رو امتحان بکنین.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<ul class=”fa-ul”>
<li><i class=”fa-li fa fa-check-square”></i>List icons</li>
<li><i class=”fa-li fa fa-spinner fa-spin”></i>List icons</li>
<li><i class=”fa-li fa fa-square”></i>List icons</li>
</ul>
</body>
</html>

در سری بعد مقاله Font Awesome بهتون امکانات بیشتری برای استفاده از آیکون هارو میدیم. درضمن توجه داشته باشین که تمام کد های گفته شده رو در یک ویرایشگر متن امتحان کنین. راحت ترین کار Nodepad رو باز کنین و فایل رو با فرمت html. ذخیره کنین و با مرورگرتون باز کنین تا تغییراتی که دادین رو مشاهده کنید.

ممنون از همراهیتون.

تاریخ ارسال
29 اردیبهشت 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه
صفحات
صفحه 1 از 2
1 2