پیاده سازی این استایل با css

پیاده سازی این استایل با css

Drop Styleشاید تا حالا از این مدل طرح های توی وبسایت دریبل دیده باشید و براتون سوال شده باشه چطوری میشه این طرح رو پیاده کرد، قطعا با border-radius که نمیشه، پس راه حل چیه؟برای پیاده سازی این استایل ما میتونیم از سایه ها کمک بگیریم.خب آماده هستید که کد نویسی رو شروع کنیم؟یک فایل html به همراه یه فایل css ایجاد میکنیم و کدهای زیر رو هم توی فایل html می نویسیمخوب دوتا تگ توی کدهای html داریم wrapper همون باکس بزرگه سفیده است و drop همون قطره وسط که اصل کار ما هم با همون تگه.خوب بعد نوشتن کدهای html میرسیم به مهمترین بخش و نوشتن کدهای css، خوب کدهای زیر رو توی فایل css می نویسیماین کد رو برای body نوشتم فقط برای نمونه است و هیچ ارتباطی به کد اصلی نداره، فقط برای استایل دادن به صفحه استاین کد ها رو هم برای wrapper در نظر میگیریم، این کدها هم بستگی داره به طرح خودتون.داریم یواش یواش میرسیم به جاهی خوب داستاناینم کدهای drop، حتما حواستون باشه position تگ wrapper باید relative باشه و posittion drop absoluteو اینم اصل ماجرا، به کمک شبه کلاس before اومدیم و اون نیم دایره سمت راست drop رو ایجاد کردیم، و با کمک after نیم دایره سمت چپ.همچنین می تونید توی این gist هم کدها رو داشته باشید https://gist.github.com/adam1442/38dcdce1634fddffb6eb962a330ee79d

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *