این سوالی است که اغلب شنیده ام: آیا می توان به جای رنگ های ثابت از شیب ها سایه ایجاد کرد؟ هیچ ویژگی خاص CSS وجود ندارد که این کار را انجام دهد (باور کنید، من نگاه کردم) و هر پست وبلاگی که در مورد آن پیدا کنید، اساساً ترفندهای CSS زیادی برای تقریب یک گرادیان است. ما در واقع برخی از آنها را در حین حرکت پوشش خواهیم داد.
اما اول… دیگر مقاله در مورد سایه های گرادیان؟ واقعا؟
بله، این یک پست دیگر در مورد موضوع است، اما متفاوت است. با هم، محدودیتها را برای دستیابی به راهحلی فرا میگیریم که چیزی را پوشش میدهد که من در هیچ جای دیگری ندیدهام: شفافیت. اکثر ترفندها در صورتی کار می کنند که عنصر پس زمینه ای غیر شفاف داشته باشد اما اگر پس زمینه شفاف داشته باشیم چه؟ ما در اینجا این مورد را بررسی می کنیم!
قبل از شروع، اجازه دهید معرفی کنم مولد سایه های گرادیان من. تنها کاری که باید انجام دهید این است که پیکربندی را تنظیم کنید و کد را دریافت کنید. اما دنبال کنید زیرا من به شما کمک خواهم کرد تا تمام منطق پشت کد تولید شده را درک کنید.
فهرست مندرجات
راه حل غیر شفاف
بیایید با راه حلی شروع کنیم که در 80٪ موارد کارآمد است. معمولی ترین حالت: شما از یک عنصر با پس زمینه استفاده می کنید و باید یک سایه گرادیان به آن اضافه کنید. هیچ موضوع شفافیتی وجود ندارد که باید در آنجا در نظر گرفته شود.
راه حل این است که بر یک شبه عنصر تکیه کنیم که در آن گرادیان تعریف شده است. شما آن را در پشت عنصر واقعی قرار می دهید و یک فیلتر تاری روی آن اعمال کنید.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
به نظر می رسد که کد زیادی دارد، و دلیل آن این است. در اینجا نحوه انجام این کار با a box-shadow
در عوض اگر از یک رنگ ثابت به جای گرادیان استفاده می کردیم.
box-shadow: 10px 8px 10px 5px orange;
این باید به شما ایده خوبی از آنچه که مقادیر در قطعه اول انجام می دهند، بدهد. ما افست های X و Y، شعاع تاری و فاصله گسترش داریم. توجه داشته باشید که ما به یک مقدار منفی برای فاصله گسترش که از the می آید نیاز داریم inset
ویژگی.
در اینجا یک نسخه نمایشی است که سایه گرادیان را در کنار یک کلاسیک نشان می دهد box-shadow
:
اگر دقت کنید متوجه می شوید که هر دو سایه کمی متفاوت هستند، به خصوص قسمت تاری. این تعجب آور نیست زیرا من کاملاً مطمئن هستم filter
الگوریتم ویژگی متفاوت از الگوریتم برای کار می کند box-shadow
. این مسئله چندان مهمی نیست زیرا نتیجه در نهایت کاملاً مشابه است.
این راه حل خوب است، اما هنوز هم دارای چند اشکال در رابطه با z-index: -1
اعلام. بله وجود دارد "انباشتن زمینه" آنجا اتفاق می افتد!
من درخواست دادم transform
به عنصر اصلی، و رونق! سایه دیگر زیر عنصر نیست. این یک اشکال نیست، بلکه نتیجه منطقی یک زمینه انباشته است. نگران نباشید، من توضیح خسته کننده ای در مورد انباشتن زمینه شروع نمی کنم (من قبلاً این کار را در یک موضوع Stack Overflow انجام دادم)، اما من همچنان به شما نشان خواهم داد که چگونه روی آن کار کنید.
اولین راه حلی که من توصیه می کنم استفاده از سه بعدی است transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
بجای استفاده از z-index: -1
، از یک ترجمه منفی در امتداد محور Z استفاده خواهیم کرد. ما همه چیز را داخل خواهیم گذاشت translate3d()
. استفاده را فراموش نکنید transform-style: preserve-3d
در عنصر اصلی؛ در غیر این صورت، 3D transform
اعمال نخواهد شد
تا آنجا که من می دانم، هیچ عارضه جانبی برای این راه حل وجود ندارد ... اما شاید شما یکی را ببینید. اگر اینطور است، آن را در بخش نظرات به اشتراک بگذارید، و بیایید سعی کنیم راه حلی برای آن پیدا کنیم!
اگر به دلایلی نمی توانید از سه بعدی استفاده کنید transform
راه حل دیگر تکیه بر دو شبه عنصر است - ::before
و ::after
. یکی سایه گرادیان را ایجاد می کند و دیگری پس زمینه اصلی (و سبک های دیگری که ممکن است به آن نیاز داشته باشید) را بازتولید می کند. به این ترتیب، ما به راحتی می توانیم ترتیب انباشته شدن هر دو شبه عنصر را کنترل کنیم.
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
مهم است که توجه داشته باشیم که ما هستیم مجبور عنصر اصلی برای ایجاد یک زمینه انباشته با اعلان z-index: 0
، یا هر ملک دیگری که همین کار را انجام دهد، بر روی آن. همچنین فراموش نکنید که شبه المان ها جعبه padding عنصر اصلی را به عنوان مرجع در نظر می گیرند. بنابراین، اگر عنصر اصلی دارای حاشیه باشد، باید آن را در هنگام تعریف سبکهای شبه عنصر در نظر بگیرید. متوجه خواهید شد که من استفاده می کنم inset: -2px
on ::after
برای محاسبه مرز تعریف شده در عنصر اصلی.
همانطور که گفتم، این راه حل احتمالاً در اکثر مواردی که سایه گرادیان می خواهید، به اندازه کافی خوب است، تا زمانی که نیازی به پشتیبانی از شفافیت نداشته باشید. اما ما برای چالش و فشار دادن محدودیت ها اینجا هستیم، بنابراین حتی اگر به آنچه در آینده می آید نیاز ندارید، با من بمانید. احتمالا ترفندهای جدید CSS را یاد خواهید گرفت که می توانید در جاهای دیگر استفاده کنید.
راه حل شفاف
بیایید از جایی که سه بعدی را متوقف کردیم ادامه دهیم transform
و پس زمینه را از عنصر اصلی حذف کنید. من با سایهای شروع میکنم که هم افستها و هم فاصلهی گسترش برابر با 0
.
ایده این است که راهی برای بریدن یا پنهان کردن همه چیز در داخل منطقه عنصر (داخل مرز سبز) و در عین حال حفظ آنچه در خارج است پیدا کنید. قرار است استفاده کنیم clip-path
برای آن اما ممکن است تعجب کنید که چگونه clip-path
می تواند برش ایجاد کند داخل یک عنصر
در واقع، راهی برای انجام این کار وجود ندارد، اما میتوانیم آن را با استفاده از یک الگوی چندضلعی خاص شبیهسازی کنیم:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
تادا! ما یک سایه گرادیان داریم که از شفافیت پشتیبانی می کند. تنها کاری که ما انجام دادیم این است که a را اضافه کنیم clip-path
به کد قبلی در اینجا یک شکل برای نشان دادن قسمت چند ضلعی است.
ناحیه آبی قسمت قابل مشاهده پس از اعمال آن است clip-path
. من فقط از رنگ آبی برای نشان دادن مفهوم استفاده می کنم، اما در واقعیت، ما فقط سایه را در داخل آن ناحیه خواهیم دید. همانطور که می بینید، ما چهار نقطه با یک مقدار بزرگ تعریف شده داریم (B
). ارزش بزرگ من است 100vmax
، اما می تواند هر ارزش بزرگی که بخواهید باشد. ایده این است که مطمئن شویم فضای کافی برای سایه داریم. چهار نقطه هم داریم که گوشه های شبه عنصر هستند.
فلش ها مسیری را نشان می دهند که چند ضلعی را مشخص می کند. از شروع می کنیم (-B, -B)
تا برسیم (0,0)
. در کل به 10 امتیاز نیاز داریم. نه هشت امتیاز چون دو نقطه در مسیر دو بار تکرار می شود ((-B,-B)
و (0,0)
).
هنوز هست یک چیز دیگر برای ما باقی مانده است تا انجام دهیم، و این برای محاسبه فاصله گسترش و افست است. تنها دلیلی که نسخه ی نمایشی بالا کار می کند این است که یک مورد خاص است که در آن فاصله ها و فاصله ها برابر است 0
.
بیایید گسترش را تعریف کنیم و ببینیم چه اتفاقی می افتد. به یاد داشته باشید که ما استفاده می کنیم inset
با مقدار منفی برای انجام این کار:
شبه عنصر اکنون بزرگتر از عنصر اصلی است، بنابراین clip-path
بیش از آنچه ما به آن نیاز داریم کاهش می دهد. به یاد داشته باشید، ما همیشه باید قطعه را برش دهیم داخل عنصر اصلی (ناحیه داخل مرز سبز مثال). ما باید موقعیت چهار نقطه را در داخل تنظیم کنیم clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
ما یک متغیر CSS تعریف کرده ایم، --s
، برای فاصله گسترش و به روز رسانی نقاط چند ضلعی. من به نقاطی که از ارزش بزرگ استفاده می کنم دست نزدم. من فقط نقاطی را به روز می کنم که گوشه های شبه عنصر را مشخص می کنند. تمام مقادیر صفر را افزایش می دهم --s
و کاهش دهد 100%
مقادیر توسط --s
.
این همان منطق با افست است. وقتی شبه عنصر را ترجمه می کنیم، سایه از تراز خارج می شود و باید چند ضلعی را دوباره اصلاح کنیم و نقاط را در جهت مخالف حرکت دهیم.
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
دو متغیر دیگر برای افست وجود دارد: --x
و --y
. ما از آنها در داخل استفاده می کنیم transform
و همچنین به روز رسانی می کنیم clip-path
ارزش های. ما هنوز نقاط چند ضلعی را با مقادیر بزرگ لمس نمی کنیم، اما بقیه را جبران می کنیم - کاهش می دهیم --x
از مختصات X و --y
از مختصات Y
اکنون تنها کاری که باید انجام دهیم این است که چند متغیر را برای کنترل سایه گرادیان به روز کنیم. و در حالی که در آن هستیم، بیایید شعاع تاری را نیز یک متغیر کنیم:
آیا ما هنوز به 3D نیاز داریم؟
transform
فوت و فن؟
همه چیز به مرز بستگی دارد. فراموش نکنید که مرجع یک شبه عنصر جعبه padding است، بنابراین اگر یک حاشیه را به عنصر اصلی خود اعمال کنید، یک همپوشانی خواهید داشت. شما یا 3 بعدی را نگه دارید transform
فریب یا به روز رسانی inset
مقدار برای محاسبه مرز.
در اینجا نسخه ی نمایشی قبلی با به روز رسانی است inset
مقدار به جای 3D transform
:
من میتوانم بگویم این راه مناسبتری است، زیرا فاصله گسترش دقیقتر خواهد بود، زیرا از جعبه مرزی به جای padding-box شروع میشود. اما شما باید آن را تنظیم کنید inset
مقدار با توجه به مرز عنصر اصلی. گاهی اوقات مرز عنصر نامشخص است و باید از راه حل قبلی استفاده کنید.
با راه حل غیر شفاف قبلی، این امکان وجود دارد که با مشکل زمینه انباشتگی مواجه شوید. و با راه حل شفاف، ممکن است به جای آن با یک مشکل مرزی مواجه شوید. اکنون گزینه ها و راه هایی برای حل این مشکلات دارید. ترفند تبدیل سه بعدی راه حل مورد علاقه من است زیرا تمام مشکلات را برطرف می کند (ژنراتور آنلاین آن را نیز در نظر خواهد گرفت)
افزودن شعاع مرزی
اگر سعی می کنید اضافه کنید border-radius
برای عنصر هنگام استفاده از راه حل غیر شفافی که با آن شروع کردیم، این یک کار نسبتاً پیش پا افتاده است. تنها کاری که باید انجام دهید این است که همان مقدار را از عنصر اصلی به ارث ببرید و کار تمام است.
حتی اگر شعاع مرزی ندارید، بهتر است تعریف کنید border-radius: inherit
. که هر پتانسیلی را به حساب می آورد border-radius
ممکن است بخواهید بعداً یا یک شعاع مرزی که از جای دیگری می آید اضافه کنید.
هنگام برخورد با راه حل شفاف، داستان متفاوت است. متأسفانه به معنای یافتن راه حل دیگری است زیرا clip-path
نمی تواند با انحناها مقابله کند. این بدان معناست که ما نمی توانیم ناحیه داخل عنصر اصلی را برش دهیم.
را معرفی خواهیم کرد mask
خاصیت به مخلوط.
این بخش بسیار خسته کننده بود و من برای یافتن یک راه حل کلی که به آن اتکا نکند به سختی تلاش کردم اعداد جادویی. من به یک راه حل بسیار پیچیده رسیدم که فقط از یک شبه عنصر استفاده می کند، اما کد یک توده اسپاگتی بود که فقط چند مورد خاص را پوشش می دهد. فکر نمی کنم ارزش کاوش در آن مسیر را داشته باشد.
من تصمیم گرفتم یک عنصر اضافی را برای کد ساده تر وارد کنم. این نشانه گذاری است:
<div class="box"> <sh></sh>
</div>
من از یک عنصر سفارشی استفاده می کنم، <sh>
، برای جلوگیری از هرگونه درگیری احتمالی با CSS خارجی. من می توانستم از a استفاده کنم <div>
، اما از آنجایی که یک عنصر رایج است، می تواند به راحتی توسط یک قانون CSS دیگر که از جای دیگری می آید و می تواند کد ما را خراب کند، هدف قرار گیرد.
اولین گام این است که موقعیت <sh>
عنصر و عمدا یک سرریز ایجاد کنید:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
ممکن است کد کمی عجیب به نظر برسد، اما هرچه پیش برویم به منطق پشت آن خواهیم رسید. سپس، سایه گرادیان را با استفاده از یک شبه عنصر ایجاد می کنیم <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
همانطور که می بینید، شبه عنصر از همان کدهای نمونه های قبلی استفاده می کند. تنها تفاوت سه بعدی است transform
تعریف شده بر روی <sh>
عنصر به جای شبه عنصر. در حال حاضر، ما یک سایه گرادیان بدون ویژگی شفافیت داریم:
توجه داشته باشید که مساحت از <sh>
عنصر با طرح کلی سیاه تعریف می شود. چرا این کار را می کنم؟ زیرا به این ترتیب، من قادر به اعمال یک mask
روی آن تا قسمت داخل محوطه سبز پنهان شود و قسمت سرریز شده در جایی که باید سایه را ببینیم نگه داریم.
می دانم که کمی مشکل است، اما برعکس clip-path
از mask
ملک مساحت را محاسبه نمی کند خارج از عنصری برای نشان دادن و پنهان کردن چیزها. به همین دلیل است که من موظف شدم عنصر اضافی را معرفی کنم - شبیه سازی منطقه "بیرون".
همچنین توجه داشته باشید که من از ترکیبی از border
و inset
برای تعریف آن منطقه این به من اجازه می دهد تا جعبه padding آن عنصر اضافی را مانند عنصر اصلی نگه دارم تا شبه عنصر به محاسبات اضافی نیاز نداشته باشد.
چیز مفید دیگری که از استفاده از یک عنصر اضافی دریافت می کنیم این است که عنصر ثابت است و فقط شبه عنصر در حال حرکت است (با استفاده از translate
). این به من این امکان را می دهد که به راحتی ماسک را تعریف کنم که همان است آخر مرحله این ترفند
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
انجام شد! ما سایه gradient خود را داریم و آن را پشتیبانی می کند border-radius
! احتمالا انتظار یک مجتمع را داشتید mask
ارزش با مقدار زیادی گرادیان، اما نه! ما فقط به دو گرادیان ساده و a نیاز داریم mask-composite
برای تکمیل جادو
بیایید منزوی کنیم <sh>
عنصر برای درک آنچه در آنجا اتفاق می افتد:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
در اینجا چیزی است که ما دریافت می کنیم:
توجه داشته باشید که چگونه شعاع داخلی با عنصر اصلی مطابقت دارد border-radius
. من یک مرز بزرگ تعریف کرده ام (150px
) و یک border-radius
برابر با مرز بزرگ به علاوه شعاع عنصر اصلی در خارج، شعاع من برابر است 150px + R
. در داخل، من دارم 150px + R - 150px = R
.
ما باید قسمت داخلی (آبی) را پنهان کنیم و مطمئن شویم که قسمت حاشیه (قرمز) همچنان قابل مشاهده است. برای انجام این کار، من دو لایه ماسک تعریف کردهام - یکی که فقط ناحیه جعبه محتوا را پوشش میدهد و دیگری که ناحیه جعبه مرزی (مقدار پیشفرض) را پوشش میدهد. سپس یکی را از دیگری حذف کردم تا مرز را آشکار کنم.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
من از همین تکنیک استفاده کردم یک مرز ایجاد کنید که از گرادیان ها و border-radius
. آنا تودور نیز مقاله خوبی دارد در مورد کامپوزیت ماسکینگ که شما را به خواندن آن دعوت می کنم.
آیا این روش ایرادی دارد؟
بله، این قطعا کامل نیست. اولین مشکلی که ممکن است با آن مواجه شوید مربوط به استفاده از حاشیه در عنصر اصلی است. این ممکن است یک ناهماهنگی کوچک در شعاع ها ایجاد کند، اگر آن را در نظر نگیرید. ما این موضوع را در مثال خود داریم، اما شاید شما به سختی متوجه آن شوید.
رفع نسبتاً آسان است: عرض حاشیه را برای آن اضافه کنید <sh>
عناصر inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
نقطه ضعف دیگر مقدار زیادی است که ما برای حاشیه استفاده می کنیم (150px
در مثال). این مقدار باید به اندازهای بزرگ باشد که سایه را در خود جای دهد، اما نه آنقدر بزرگ باشد که از مشکلات سرریز و نوار اسکرول جلوگیری کند. خوشبختانه، ژنراتور آنلاین مقدار بهینه را با در نظر گرفتن تمام پارامترها محاسبه می کند.
آخرین ایرادی که من از آن آگاه هستم زمانی است که با یک مجتمع کار می کنید border-radius
. به عنوان مثال، اگر می خواهید شعاع متفاوتی به هر گوشه اعمال شود، باید برای هر طرف یک متغیر تعریف کنید. فکر میکنم واقعاً یک اشکال نیست، اما میتواند نگهداشتن کد شما را کمی سختتر کند.
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
ژنراتور آنلاین فقط یک شعاع یکنواخت را برای سادگی در نظر می گیرد، اما اکنون می دانید که اگر می خواهید یک پیکربندی شعاع پیچیده را در نظر بگیرید، چگونه کد را تغییر دهید.
پسگفتار
ما به پایان رسیدیم! جادوی پشت سایه های گرادیان دیگر یک راز نیست. من سعی کردم تمام احتمالات و مسائل احتمالی که ممکن است با آن روبرو شوید را پوشش دهم. اگر چیزی را از دست دادم یا مشکلی را کشف کردید، لطفاً آن را در بخش نظرات گزارش دهید و من آن را بررسی می کنم.
باز هم، با توجه به اینکه راه حل واقعی اکثر موارد استفاده شما را پوشش می دهد، احتمالاً بسیاری از این موارد بیش از حد است. با این وجود، خوب است که "چرا" و "چگونه" پشت این ترفند را بدانید و چگونه بر محدودیت های آن غلبه کنید. بعلاوه، ما تمرینات خوبی را با بریدن و پوشاندن CSS انجام دادیم.
و، البته، شما دارید ژنراتور آنلاین شما می توانید هر زمانی که می خواهید برای جلوگیری از بدون هیچ زحمتی دست به دست آورید.
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- قادر
- درباره ما
- در مورد IT
- بالاتر
- مطلق
- مطابق
- حساب
- حساب ها
- دقیق
- واقعا
- اضافی
- پس از
- الگوریتم
- معرفی
- اجازه می دهد تا
- قبلا
- همیشه
- آنا
- و
- دیگر
- هر جا
- اعمال می شود
- درخواست
- با استفاده از
- محدوده
- دور و بر
- مقاله
- زمینه
- اساسا
- زیرا
- قبل از
- پشت سر
- باور
- در زیر
- بزرگ
- بزرگتر
- بیت
- سیاه پوست
- بلاگ
- آبی
- تیرگی
- مرز
- خسته کننده
- جعبه
- شکستن
- اشکال
- محاسبه
- محاسبات
- نمی توان
- مورد
- موارد
- به چالش
- بررسی
- کلاسیک
- مسیر کلیپ
- نزدیک
- رمز
- رنگ
- ترکیب
- آینده
- توضیح
- مشترک
- کامل
- پیچیده
- مفهوم
- پیکر بندی
- تضاد
- در نظر بگیرید
- با توجه به
- در نظر می گیرد
- محتوا
- زمینه
- کنترل
- گوشه
- گوشه ها
- میتوانست
- دوره
- پوشش
- را پوشش می دهد
- ایجاد
- ایجاد
- CSS
- ترفندهای CSS
- سفارشی
- برش
- کاهش
- مقدار
- معامله
- مصمم
- کاهش
- به طور پیش فرض
- مشخص
- تعریف می کند
- تعریف کردن
- قطعا
- بستگی دارد
- DID
- تفاوت
- مختلف
- جهت
- كشف كردن
- فاصله
- نمی کند
- عمل
- آیا
- اشکالاتی
- هر
- پیش از آن
- به آسانی
- اثر
- هر دو
- در جای دیگر
- کافی
- اطمینان حاصل شود
- به خصوص
- حتی
- همه چیز
- مثال
- مثال ها
- محروم
- ورزش
- انتظار می رود
- توضیح
- اکتشاف
- بررسی
- خارجی
- اضافی
- چهره
- منصفانه
- محبوب
- ویژگی
- کمی از
- شکل
- فیلتر
- پیدا کردن
- پیدا کردن
- نام خانوادگی
- رفع
- ثابت
- به دنبال
- استحکام
- رایگان
- از جانب
- سوالات عمومی
- تولید
- دریافت کنید
- دادن
- Go
- رفتن
- خوب
- شیب ها
- سبز
- اتفاق می افتد
- کمک
- اینجا کلیک نمایید
- پنهان شدن
- چگونه
- چگونه
- HTML
- HTTPS
- من می خواهم
- اندیشه
- مهم
- in
- افزایش
- در عوض
- معرفی
- دعوت
- موضوع
- مسائل
- IT
- نگاه داشتن
- نگهداری
- دانستن
- نام
- لایه
- یاد گرفتن
- احتمالا
- محدودیت
- محدودیت
- کوچک
- منطقی
- طولانی
- دیگر
- نگاه کنيد
- نگاه
- مطالب
- خیلی
- شعبده بازي
- اصلی
- حفظ
- اکثریت
- ساخت
- ماسک
- به معنی
- روش
- قدرت
- تغییر
- لحظه
- بیش
- اکثر
- حرکت
- متحرک
- موزیلا
- راز
- نیاز
- منفی
- با این اوصاف
- جدید
- بعد
- چاپ افست
- ONE
- آنلاین
- مقابل
- بهینه
- گزینه
- نارنجی
- سفارش
- دیگر
- دیگران
- در غیر این صورت
- طرح کلی
- خارج از
- غلبه بر
- پارامترهای
- بخش
- ویژه
- مسیر
- الگو
- کامل
- شاید
- انتخاب کنید
- محل
- افلاطون
- هوش داده افلاطون
- PlatoData
- بازی
- لطفا
- به علاوه
- نقطه
- چند ضلعی
- موقعیت
- فرصت
- ممکن
- پست
- پتانسیل
- زیبا
- قبلی
- شاید
- ویژگی
- فشار
- قرار دادن
- سوال
- رسیدن به
- رسیده
- خواندن
- واقعیت
- دلیل
- توصیه
- قرمز
- كاهش دادن
- مربوط
- نسبتا
- به یاد داشته باشید
- برداشتن
- مکرر
- گزارش
- نتیجه
- فاش کردن
- مسیر
- قانون
- سعید
- دلیل
- همان
- بخش
- سایه
- اشتراک گذاری
- باید
- نشان
- طرف
- مشابه
- ساده
- سادگی
- پس از
- کوچک
- So
- جامد
- راه حل
- برخی از
- چیزی
- یک جایی
- فضا
- خاص
- گسترش
- پشته
- پشتهسازی
- شروع
- آغاز شده
- شروع می شود
- ماندن
- گام
- هنوز
- داستان
- مناسب
- پشتیبانی
- پشتیبانی از
- تعجب
- گرفتن
- هدف قرار
- کار
- La
- محوطه
- چیز
- اشیاء
- به
- با هم
- هم
- موضوع
- جمع
- لمس
- دگرگون کردن
- ترجمه کردن
- ترجمه
- شفافیت
- شفاف
- درست
- نوعی
- فهمیدن
- بروزرسانی
- به روز شده
- us
- استفاده کنید
- ارزش
- ارزشها
- قابل رویت
- راه
- چی
- چه شده است
- که
- در حین
- اراده
- بدون
- مهاجرت کاری
- کارگر
- با این نسخهها کار
- با ارزش
- X
- شما
- شما
- شاخص Z
- زفیرنت
- صفر