#CSS
#HTML
#style


HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.

اینسپکت کنید css و html هاشو ببینید !

http://diana-adrianne.com/purecss-francine/

لینک سورس تو گیت هاب

https://github.com/cyanharlow/purecss-francine

@ABlueDeveloper



@ABlueDeveloper

#Css #Shapes

یه مقاله خوب برای آموزش css‌اشکال و چگونگی درست کردن شکل های مختلف با css
📌 لینک :https://goo.gl/XwRzXX
@fullStackDevs

#FAQ
What is this ?

مجموعه ای کامل از سوالات مصاحبه ،‌ همراه با پاسخ و برخی از نکات کد که به شما کمک می کند تا برای مصاحبه های فنی آماده شوید . بسیاری از این سؤالات از مصاحبه های واقعی هستند و برای اکثرمفاهیم وب سوال وجود دارد

توجه داشته باشید که بسیاری از این سوالات باز هستند و می توانند منجر به بحث های جالبی شوند
مطالب مورد پوشش :‌
#JavaScript #React #VueJs #Angular #NodeJs #AngularJS #Bootstrap #CSS #HTML5 #Sass #Webpack #MongoDB #SQL #GraphQL #CSharp #Golang #Java #ASPNET #ASPNETMVC #NETFramework #Ruby #RubyOnRails #TypeScript #PHP #Android #RESTAPI #DataStructures #DesignPattern #Swift #Agile #Scrum



📌📌 لینک : https://goo.gl/KaMsmK
@fullStackDevs

#Css

Can CSS do this?

Fancy Border Radius Generator

To build organic shapes with CSS

Home Page

#css #tool

@fullstackDevs

#css

CSS Custom Properties

Learn CSS Variables in 5 minutes - A tutorial for beginners

read more

@fullStackDevs

#Bootstrap
#Version_5_alpha1
#CSS

🌀 بوت استرپ اکنون در نسخه 5 الفا موجود است.

بوت استرپ محبوب ترین و پرکاربردترین فریم ورک متن باز در جهان برای توسعه با HTML ، CSS و JS است. با راه اندازی ورژن 5 ، بسیاری از تغییرات اساسی در جدیدترین نسخه معرفی می شوند.

✅ تغییرات عمده در بوت استرپ 5

✔️ جی کوئری حذف شد
تیم بوت استرپ بزرگترین وابستگی های جانبی به سمت کلاینت را حذف کرده است.تیم بوت استرپ جی کوئری را به دلیل وابستگی به جاوا اسکریپت که در وب سایت رسمی خود اعلام کرده است ، منقضی کرده است. جی کوئری با vanilla Javascript جایگزین شده است.

✔️ پشتیبانی IE10 برداشته شد
بوت استرپ 5 دیگر با Internet Explorer 10 همراه نخواهد شد و پشتیبانی از مرورگر IE10 را در این نسخه حذف شده است.

✔️ واحد اندازه گیری عرض ها (width) تغییر کرده
از px به rem تبدیل شده.
سی اس اس روشهایی برای مشخص کردن اندازه یا طول عناصر با استفاده از واحدهای مختلف اندازه گیری مانند px ، em ، rem ،٪ vw و vh ارائه می دهد.

در حالی که px به طور گسترده ای شناخته شده اند و برای absolute units استفاده می شود و نسبت به DPI و وضوح viewing device تغییر نمی کند.

بوت استرپ مدت زمان طولانی از px برای عرض (width) خود استفاده می کرد که دیگر این مورد در Bootstrap 5 وجود ندارد و از rem استفاده می کند.

واحد Rem مخفف "root em" است که به معنای برابر با مقدار محاسبه شده اندازه فونت در عنصر ریشه (html) است. به عنوان مثال ، 1 rem برابر با اندازه قلم عنصر HTML است (بیشتر مرورگرها مقدار پیش فرض 16 پیکسل دارند).

✔️ بهبود bootstrap branch برای توسعه
طبق اعلام رسمی وب سایت،master به شاخه جدید v3 dev بوت استرپ v5 تبدیل می شود و برای توسعه v5 شاخه جدید master را از v4-dev برش می دهد

✔️ مهاجرت از jekyll به Hugo
معرفی Hugo : هوگو سریعترین تولید کننده سایت استاتیک در جهان است که بدون شک سایت های استاتیک را در میلی ثانیه تولید می کند و از زبان Golang استفاده می کند.

معرفی jekyll : جکیل قدیمی ترین تولید کننده سایت استاتیک است و در بوت استرپ 5 کنار گذاشته شده.

✔️ کتابخانه آیکو نهای SVG :
برای اولین بار ، Bootstrap کتابخانه آیکون منبع باز SVG خاص خود را دارد به گونه ای طراحی میکند که بتواند به بهترین شکل با components ها و اسناد ما کار کند.

✔️ ستون و ردیف در بوت استرپ 5
مفاهیم بوت استرپ که سیستم 12 ستونی ارائه می دهد در بوت استرپ 5 نیز موجود خواهد بود. طراح وبسایت می تواند از ستونهای Grid و layout در بوت استرپ 5 استفاده کند.

سطرها و ستون های بوت استرپ ، کارآمدترین راه حل برای موضوعات در اندازه های مختلف صفحه نمایش را ارائه می دهند. تمرکز اصلی تغییر در v5 هنوز واکنش گرا یا responsive است ، اگرچه در نسخه های اخیر بوت استرپ ، توسعه بیشتر روی بهبود عملکرد و کاهش زمان بارگذاری متمرکز شده است.

🔗 Download Bootstrap 5.0.0-alpha1

@FullStackDevs

#css
#trick
#flex

مثال جالب برای توضیح نمایش بصورت FlexBox و Grid
@fullStackDevs

#css
#frontEnd
#سی_اس_اس
🔰Css tricks

🔸با اینکه css آنقدرها پیچیده نیست، اما اگر تجربه ی زیادی هم در کار کردن با css داشته باشید باز هم چیزهای جدیدی هست که دانستن آن متعجب تون میکنه!
پراپرتی هایی که بسیار ازشون استفاده کردین بدون اینکه به جزئیاتش توجه خاصی کرده باشین، یا پراپرتی هایی که تاکنون ممکن است وجود آنها بی خبر بوده باشین.

🔹در این پست چندتا از این پراپرتی هارو میخوایم بررسی و معرفی کنیم.

❇️Color Property

🔹از این پراپرتی قائدتا بسیار استفاده کردین. (برای تغییر رنگ Text)
اما باید بدونید که این پراپرتی رنگ foreground المنت رو مشخص میکنه و فقط برای مشخص کردن رنگ text المنت نیست.


❇️visibility property
🔹از این پراپرتی هم حتما بسیار استفاده کرده اید و مقدار پیشفرض برای آن visible میباشد تفاوت آن با
display: none
این است که مرورگر در هنگام render المنتی که visibility آن hidden است فضای اشغال شده توسط المنت را در نظر میگیرد ولی المنت قابل رویت نمیباشد اما هنگامی که یک المنت display: none مرورگر در هنگام render صفحه هیچ فضایی برای المنت در نظر نمیگیرد.
پراپرتی visibility دارای مقداری دیگری برای set کردن به نام collapse میباشد. هنگامی که مقدار visibility المنتی را برابر با collapse قرار میدهید، مرورگر با آن المنت همانند حالت hidden عمل میکند، به استثنا در table rows و table row groups و table columns و table column groups در چنین مواقعی تنظیم کردن مقدار collapse برای یک المنت در table base المنت ها مانند display : none خواهد بود و المنت مربوطه فضایی اشغال نخواهد کرد.

🔸نکته قابل توجه این است که مرورگر های مختلف به روش های یکسانی در مواجه با visibility : collapse عمل نمی کنند.

❇️href=#top
🔹برای هدایت کاربر به بالای صفحه جاری میتوانید از مقدار
href=#top
استفاده کنید.

❇️Smooth scroll
🔹برای تنظیم اسکرول نرم برای کل سند html یا یک المنت بخصوص، میتوانید خاصیت scroll-behavior را برابر با
smooth
قرار دهید.

element {
  scroll-behavior: smooth;
} 

❇️all property
🔸برای اینکه مقدار تمام پراپرتی های یک المنت را به مقدار initial شده یا inherit شده آن ریست کنید از این پراپرتی استفاده کنید.
تمامی پراپرتی های به غیر از direction و unicode-bidi ریست خواهند شد.

div {
  background-color: yellow;
  color: red;
  all: initial;
}

❇️currentColor
🔸استفاده از مقدار currentColor به جای مشخص کردن دوباره نام رنگ مورد نظرتان برای پراپرتی هایی نظیر background و غیره باعث خواهد شده تا مرورگر از رنگ محاسبه شده پیشین برای آن المنت استفاده کند.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

@fullStackDevs

#CSS
#Transforms

The World of CSS Transforms

Like so many things in CSS, the transform property is surprisingly remarkable.


You can click on the link below to learn

https://www.joshwcomeau.com/css/transforms/

@fullStackDevs

#css

:𝐢𝐬() 𝐒𝐞𝐥𝐞𝐜𝐭𝐨𝐫 𝐈𝐧 𝐂𝐬𝐬


https://developer.mozilla.org/en-US/docs/Web/CSS/:is

https://css-tricks.com/almanac/selectors/i/is/

Browsers support of ":is"
https://caniuse.com/css-matches-pseudo

@fullStackDevs

#html #css #frontend

Stop using so many divs! 🛑

🔸 why should we use these tags ?
• Easier to read
• Better for SEO
• More accessible

let me know on comments if it was useful 🙏🏻🌺

@fullStackDevs

#frontend #css

Fancy Border Radius
an advanced css feature

upto 8 values for border-radius property
customize your fancy shapes in the link below :

🔗 https://9elements.github.io/fancy-border-radius/

@fullStackDevs