در این بخش از آموزش های شرکت مهرسانا قصد داریم به معرفی بهترین ابزار ساخت گرادینت CSS برای طراحان سایت (بخش دوم) بپردازیم. Ultimate CSS Gradient Generator Ultimate CSS Gradient Generator تا حدی مشابه CSSmatic بوده و امکانات روی صفحه نمایش مشابه هستند ولی قابلیت های دیگری نیز دارد. این ابزار شامل یک چارت سازش پذیر […]
صدای مشتری ┆ ۲۵۵ ۲۵ ۲۵ ۳ (۰۲۶)
در این بخش از آموزش های شرکت مهرسانا قصد داریم به معرفی بهترین ابزار ساخت گرادینت CSS برای طراحان سایت (بخش اول) بپردازیم. کد دادن دستی یک گرادینت کار ساده ای نیست خصوصا اگر یک گرادینت دو رنگ داشته باشید. در این مقاله به معرفی ده عدد از بهترین ابزار تولید کننده گرادینت CSS برای ساخت […]
شمارنده های CSS شمارنده های CSS متغیرهایی هستند که توسط CSS نگهداری می شوند که می توان ارزش ها را با قوانین CSS افزایش داد (برای ردیابی تعداد دفعات استفاده از آنها). شمارنده ها اجازه می دهد ظاهر محتوا را براساس قرار گرفتن آنها در سند تنظیم کنید. شماره گیری خودکار با شمارنده شمارنده […]
ترکیبیات در css انتخابگر CSS می تواند شامل بیش از یک انتخابگر ساده باشد. بین انتخابگرهای ساده می توان ترکیبات را در نظر گرفت. چهار ترکیب مختلف در CSS وجود دارد: انتخابگر descendant انتخابگر child (>) انتخابگر adjacent sibling (+) انتخابگر general sibling (~) انتخابگر descendant انتخاب کننده نسل (انتخابگر descendant) با تمام عناصری که در نسل یک عنصر مشخص […]
سورس کد ایجاد گالری تصاویر در css گالری تصویر زیر با CSS ایجاد می شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="gallery"> <a target="_blank" href="fjords.jpg"> <img src="5terre.jpg" alt="Cinque Terre" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="mountains.jpg"> <img src="mountains.jpg" alt="Mountains" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html> |
نوینئه مطلب : حدیثه غفاری – شرکت مهرسانا | طراحی سایت در کرج
مدل جعبه ای در css تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت. در CSS، اصطلاح “مدل جعبه ای” هنگام صحبت در مورد طراحی و طرح استفاده می شود. مدل جعبه CSS اساسا جعبه ای است که در اطراف هر عنصر HTML قرار می گیرد. که شامل: حاشیه ها، مرزها، بالشتک ها و […]
تنظیمات ارتفاع و عرض در css خواص height و width برای تعیین ارتفاع و عرض یک عنصر استفاده می شود. ارتفاع و عرض را می توان به طور خودکار تنظیم کرد (پیش فرض است؛ به این معنی که مرورگر ارتفاع و عرض را محاسبه می کند).
|
1 2 3 4 5 |
div { height: 200px; width: 50%; background-color: powderblue; } |
|
1 2 3 4 5 |
div { height: 100px; width: 500px; background-color: powderblue; } |
تنظیم حداکثر عرض ویژگی max-width […]
رنگ متن خصوصیت رنگ برای تنظیم رنگ متن استفاده می شود. رنگ ها توسط موارد زیر مقدار دهی می شوند: نام رنگ : مانند “red” یک مقدار HEX مانند ” #ff0000 “ یک مقدار RGB مانند “(rgb (255،0،0” برای مشاهده لیست کامل مقادیر رنگ به CSS Color مراجعه کنید. رنگ متن پیش فرض برای یک صفحه در […]
واحد های CSS CSS دارای چند واحد مختلف برای بیان طول است. بسیاری از خواص CSS مقادیر “طول” مانند عرض، حاشیه، پد، اندازه قلم، عرض مرز و غیره را می گیرند. طول یک عدد است که از واحد طول پیروی میکند، مانند 10px، 2em، و غیره. برای برخی از خواص CSS، طول منفی نیز مجاز است. دو نوع […]
چگونه آیکون اضافه کنیم؟ ساده ترین راه برای اضافه کردن آیکون ها به صفحه HTML شما، ، با یک کتابخانه آیکون، مانند Font Awesome است. نام کلاس مشخص شده را به هر عنصر HTML درون خطی (مانند <i> یا <span>) اضافه کنید. تمام آیکونهای موجود در کتابخانه های آیکون در زیر، بردارهای مقیاس پذیر هستند که […]
- 1
- 2
اعتماد شما ، افتخار ماست …
