Box shadow генераторы құралын қалай қолдану керек
- 1
Бастапқы көлеңкені таңдаңыз
«Жұмсақ», «Көп қабатты» немесе «Биіктік 2» сияқты дайын үлгіні басыңыз немесе әдепкі қабатты өзгертіңіз.
- 2
Әр қабатты баптаңыз
Қабатты таңдап, оның X және Y бойынша ығысуын, бұлдырлауын, жайылуын, түсін, мөлдірсіздігін және «Ішкі» режимін орнатыңыз.
- 3
Өз бетіңізде тексеріңіз
Қорап өлшемін, бұрыш радиусын және түстерді стильдеп отырған элементке сәйкестендіріп өзгертіңіз.
- 4
CSS көшіріңіз
box-shadow декларациясын немесе Tailwind класын кодыңызға көшіріңіз.
Шектеулер және Pro
Тіркелусіз тегін: қабат саны шектеусіз, ығысу −100 және 100 px аралығында, бұлдырлау 200 px-ке дейін және 12 көлеңке үлгісі.
Pro жарнаманы өшіреді; көлеңке редакторы кез келген тарифте толық жұмыс істейді. Pro-ны қарау
Box shadow генераторы туралы
CSS box-shadow қасиеті қабаттар тізімін қабылдайды: әр қабатта көлденең және тік ығысу, бұлдырлау радиусы, жайылу қашықтығы, түс және қосымша inset кілт сөзі болады. Табиғи көрінетін тереңдікті алу үшін осы параметрлердің бәрін екі немесе одан көп қабатта теңестіру керек, ал стиль файлындағы сандарды қолмен өзгерту оны қиындатады. Бұл редактор жүгірткілерді жылжытқан кезде нәтижені тірі алдын ала қарау қорабында көрсетеді және декларацияны да, Tailwind shadow-[…] класын да сіз үшін жазады.
Қабатты қалағанша қосыңыз, салыстыру үшін біреуін уақытша жасырыңыз, жоғары немесе төмен жылжытыңыз — тізімдегі бірінші қабат ең үстіне салынады — немесе басылған түймелер мен енгізу өрістері үшін оны «Ішкі» режиміне ауыстырыңыз. Ығысу −100 және 100 пиксель аралығында, бұлдырлау 200 пикселге дейін, жайылу −100 мен 100 аралығында өзгереді, әр түстің өз мөлдірсіздігі бар. Теріс жайылу — заманауи жұмсақ көлеңкелердің құпиясы: ол көлеңкені элементтің астына тартады, сондықтан төменде тек нәзік жарық көрінеді.
Алдын ала қарау қорабының өлшемін өзгертіп, кез келген бұрыш радиусын, қорап түсін және фон түсін беруге болады. Осылайша көлеңкені дизайныңыздың нақты бетінде бағалайсыз, соның ішінде көлеңкеге көбірек мөлдірсіздік немесе түсті жарқыл керек қараңғы тақырыптарда.
Он екі бастапқы үлгі бар: Material Design-ның төрт биіктік деңгейі, жұмсақ бір қабатты көлеңке, бес қабатты тегіс көлеңке, қатаң необрутализм ығысуы, неоморфизм, ішкі көлеңке, түсті жарқыл, фокус стиліндегі контур сақинасы және қалқыма карточка. Градиенттер басқа қойындыда; мәтін көлеңкелері мен drop-shadow() сүзгісі қамтылмайды.
Құпиялылық
Көлеңке осы беттің өзінде жасалып, алдын ала қаралады, ал қабаттарыңыз бет қайта жүктелсе де сақталуы үшін тек осы браузердің жергілікті жадында тұрады. Ешқандай баптау немесе дизайн серверге жіберілмейді.