#آموزشی #css #ریسپانسیو

📑 ریسپانسیو کردن قالب وردپرس با استفاده از تگ‌ مدیا ( مدیا کوئری )

📝 پیشگفتار : شاید دوستانی که در این زمینه ( طراحی قالب ) فعالیت میکنن این تگ را بشناسند و یا شنیده باشند اما برای سایر دوستان و ممکن است جالب باشد! به آموزش میپردازیم :

🖌در این آموزش شما میتوانید با استفاده از یک مدیاکوئری کلاس موردنظر را در سایز صفحه مورد نظر به شکل مجزا تغییر دهید! بعنوان مثال داریم :
.houniya-info-box{
width : 200px;
}

میخواهیم این المان که به ایدی کلاس .houniya-info-box به آن استایل داده ایم در صفحه نمایش های حداقل و حداکثر تا سایز 410px بصورت تمام عرض نمایش داده شود! پس مینویسیم :

@media screen and(max-width:410px){
.houniya-box-info{
width:100%
}
}
دراین صورت ، در صفحه نمایش های پایینتر از ۴۱۰ پیکسل تا ۴۱۰ پیکسل المان ما بصورت تمام عرض نمایش داده خواهد شد.

📍 برای استایل دهی به برخی المان ها لازم است ای دی کلاس را بصورت مسیر مشخص واردکنید بعنوان مثال :
.testid .subclass h2 {
css codes
}

با اموزش های بیشتر و تخصصی تر با ما همراه باشید 🌹

قلب‌وردپرس را به دوستان خود معرفی کنید 😉
@wpheart
@wpheart
@wpheart

#آموزشی #css #شخصی‌سازی

📑 استایل دهی مجزا به لینک هایی که در تب جدید باز میشوند

📝 پیشگفتار : شاید برای شما هم پیش آمده باشد که بخواهید کلیه لینک هایی که در صفحه جدید ( تب جدید ) باز میشوند را به شکل خاصی نمایش دهید! بعنوان مثال متنی را کنار ( قبل یا بعد ) آنها نمایش دهید یا رنگ و نوع نمایش آن را به نحوی تغییر دهید که کاربر قبل از کلیک بر روی آن لینک بداند که قرار است در تب جدیدی صفحه را مشاهده کند! خب این کار با استفاده از چندخط کد css قابل انجام است! در ادامه آموزش همراه ما باشید 😉
🖌 با استفاده از کد زیر در فایل استایل قالب ، به قالب سایت میفهمانیم که لینک هایی که در تب جدید قرار است باز شوند را به شکل دلخواهی نمایش دهند ، پس از کد موارد مهم را توضیح خواهم داد.
کدcss :

a[target="_blank"]:before,
a[target="new"]:before {
  outline: 1px solid #333;
  color: #333;
  background: #ff9;
  font: 14px;
  content: "این لینک در صفحه جدید باز میشود!";
}

📍 در خط اول کد ما به قالب میفهمانیم که کلیه لینک ها (تگهای a ) موجود در قالب که صفحه هدف آنها تب جدید درمرورگر است به شکلی که استایل دهی شده است نمایش داده شود!
📍با کلاس کاذب :before گفتیم که بعد از متن یک فضای خالی را ایجاد کند
📍 با استفاده از content گفتیم که یک محتوا را نمایش دهد (توجه کنید که این کلاس درصورتی نمایش داده خواهد شد که از یک کلاس کاذب در بین ویژگی ها استفاده شود )

با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart

#آموزشی #css #شخصی‌سازی

📑 استایل دهی به لینک ها بر اساس فایل هدف آنها

📝 پیش گفتار : لازم است بدانید که زیبایی سایت و طرح دلنشین و همه چیز تمام سایت و البته مهم تر از بقیه در دسترس بودن محتوای سایت کمک زیادی به جذب کاربر میکنه! از این رو با استفاده از برخی ترفند ها شما میتونید سایتتون رو به سادگی زیبا سازی کنید😉 در ادامه قطعه کد css به شما معرفی خواهم کرد که با استفاده از آن میتوانید به لینک های موجود در سایت خود با توجه به فایل های هدف ( zip,pdf,mp3,mp4,dox,&...) استایل بدید و برای هر یک آیکن خاصی در نظر بگیرید! پس همراه من باشید با این آموزش 😉
🖌 قطعه کدی که ازش حرف میزنیم به شکل زیر نوشته میشه که توضیحات مربوطه رو در ادامه خواهم گفت :

a[href$='.zip'] {
  padding: 0 20px 0 0;
  background: transparent url(/images/zip.png) no-repeat center right;
}

📍 در مثال بالا ما به قالب فهماندیم که اگر لینکی که در تگ a قرار گرفته است، هدفش یک فایل با پسوند zip بود، ایکن مربوطه رو در سمت چپ اون لینک نمایش بده !
📍 منظور از لینک هدف درواقع لینک مستقیمی است که در قالب لینک قرار داده شده است. بعنوان مثال برای کد بالا لینکی صدق میکند که به شکل زیر باشد
http://houniya.ir/files/test/learn.zip

📌 شما میتوانید با کپی کردن این کد پسوند های دیگر را شخصی سازی کنید


با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart

#آموزشی #css #فیلتر‌ها

📑 معرفی فیلتر ها در css

1⃣ blur()
📍 از این فیلتر برای مات یا محو کردن عنصر استفاده میشود

2⃣ brightness()
📍 این فیلتر برای روشنایی عنصر استفاده میشود

3⃣ contrast()
📍 از این فیلتر برای تضاد بین عناصر استفاده میشود.

4⃣ grayscale()
📍 این فیلتر رنگ تصویر را از بین میبرد و آن را خاکستری و بی رنگ میکند.

5⃣ hue-rotate()
📍 تغییر رنگ تصویر با توجه به مقداری که به صورت درجه وارد میشود ، رنگ تصویر را در درجه رنگی تغییر میدهد.

6⃣ invert()
📍 این فیلتر امکان معکوس کردن رنگ ها را به ما میدهد.

7⃣ opacity()
📍 تغییر حالت تصویر به حالت شیشه ای ( کمرنگ کردن و قابل دیده شدن پس زمینه )

8⃣ saturate()
📍 از این فیلتر برای افزودن جان به رنگ تصاویر استفاده میشود.

9⃣ sepia()
📍 این فیلتر به تصویر یک رنگ قهوه ای اضافه میکند ( مانند تصاویر قدیمی ).

🔟 drop-shadow()
📍 افزودن سایه به تصاویر درشکل تصویر ( بعنوان مثال اگر یک تصویر دایره مانند داشته باشید، با استفاده از box-shadow سایه اعمال شده به شکل مربع خواهد بود، اما با استفاده از تابع drop-shadow سایه به شکل اصلی تصویر نمایش داده خواهد شد.

#پایان‌اموزش

قلب وردپرس را به دوستان خود معرفی کنید 🌹
@wpheart
@wpheart
@wpheart

کانال و ربات کاریابی و ثبت پروژه
@proojects

#بدانیم #آموزشی
شاید شماهم نام پیشپردازنده ای همچون sass را برای روند سریعتر پیاده سازی فایل css شنیده باشید !

Sass (Syntactically Awesome Style Sheets)
توضیحات : یک پیش پردازنده است که طراح و توسعه دهنده را قادر میسازد تا در css نویسی از نوشتن متغیر ها ، تو در تو نویسی ، وارد کردن در خط و بسیاری موارد دیگر استفاده نماید!
با استفاده از این پیش پردازنده ، سرعت ایجاد استایل دهی شما در css چندین برابر خواهد شد😳 !

در رابطه با سازگاری این پیشپردازنده با نسخه های مختلف css باید خدمت شما عرض کنم که :
این پیش پردازنده با تمامی نسخه ها css سازگاری کاملی دارد!

📍نحوه استفاده از آن نیز آسان بوده و در سایت SASS LANG به آن پرداخته شده است. همچنین میتوانید برای مشاهده مستندات از لینک مستندات پیشپردازنده استفاده نمایید 😉
در ادامه ، آموزش تصویری از این پیشپردازنده از سایت 7Learn برای شما قرارداده خواهد شد و همینطور مطالب بیشتری نیز برای شما قرارخواهیم داد.
امید است ذره ای در مسیر پیشرفتتان یاریتان کرده باشیم.

برای نوشتن این مطلب زمان صرف شده است ، لطفا درصورت کپی برداری منبع آن را @wpheart درج نمایید.
🔴 فایل آموزشی در پست بعدی قابل دانلود میباشد .
#پایان
#SASS #CSS #CODE #Frameworks #HOUNIYA #حق‌کپی‌محفوظ


قلب وردپرس را حمایت کنید 🌹
@wpheart

#آموزشی #معرفی‌ویژگی #css
معرفی و نحوه استفاده از ویژگی clip-path در css
🖌 با استفاده از این ویژگی css میتوان بخشی از یک تصویر یا المان را در html برش زد و به‌نمایش در آورد.
به مثال زیر توجه کنید :

در مثال زیر ، ما در المان یا تصویر را به شکل مثلثی شکل برش زده ایم.
.wpheart{
clip-path: polygon(50% 0%,0% 100%,100% 100%);
}

در مثال فوق ما از ویژگی clip-path و از خاصیت polygon برای اشکال چند ضعلی استفاده کرده ایم.

در رابطه با این ویژگی میتوانید در مدرسه w3 توضیحات بیشتری را مشاهده نمایید:
مشاهده بیشتر

#لطفا درصورت کپی برداری از این مطلب، منبع آن را @wpheart درج نمایید.

قلب وردپرس را حمایت کنید 🌹
@wpheart

#پروژه #نمونه_کار
🔅طراحی صفحه اصلی قالب وبسایت شرکت آرینا

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

#html, #css, #js #wordpress_theme

📍لطفا نظرات خود را در رابطه با این طرح بیان کنید.

@wpheart

#آموزشی #css #شخصی‌سازی

📑 استایل دهی به لینک ها بر اساس فایل هدف آنها

📝 پیش گفتار : لازم است بدانید که زیبایی سایت و طرح دلنشین و همه چیز تمام سایت و البته مهم تر از بقیه در دسترس بودن محتوای سایت کمک زیادی به جذب کاربر میکنه! از این رو با استفاده از برخی ترفند ها شما میتونید سایتتون رو به سادگی زیبا سازی کنید😉 در ادامه قطعه کد css به شما معرفی خواهم کرد که با استفاده از آن میتوانید به لینک های موجود در سایت خود با توجه به فایل های هدف ( zip,pdf,mp3,mp4,dox,&...) استایل بدید و برای هر یک آیکن خاصی در نظر بگیرید! پس همراه من باشید با این آموزش 😉
🖌 قطعه کدی که ازش حرف میزنیم به شکل زیر نوشته میشه که توضیحات مربوطه رو در ادامه خواهم گفت :

a[href$='.zip'] {
  padding: 0 20px 0 0;
  background: transparent url(/images/zip.png) no-repeat center right;
}

📍 در مثال بالا ما به قالب فهماندیم که اگر لینکی که در تگ a قرار گرفته است، هدفش یک فایل با پسوند zip بود، ایکن مربوطه رو در سمت چپ اون لینک نمایش بده !
📍 منظور از لینک هدف درواقع لینک مستقیمی است که در قالب لینک قرار داده شده است. بعنوان مثال برای کد بالا لینکی صدق میکند که به شکل زیر باشد
http://houniya.ir/files/test/learn.zip

📌 شما میتوانید با کپی کردن این کد پسوند های دیگر را شخصی سازی کنید


با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart