CSS-көлеңке: қалай жасауға

қараңғылық жоқ көлеңке жоқ түрінде жоқ ешқандай жарық бар. деп аталатын әйелдерге арналған Тіпті негізгі макияж құралы «көлеңкелі». Егер сіз беттеріне сұлулықты алып келсе, сіз дұрыс екпін керек - бұл қажет, онда CSS-көлеңке қосыңыз.

Төменде келтірілген материалдық сіз көлеңке орнату үшін немесе CSS-кодты пайдаланып суреттерді бұғаттау әдісін үйрену көмектеседі.

CSS-көлеңке. синтаксис

Шын мәнінде қорап-көлеңке, қорап, онда - блок және көлеңкелі - бұл көлеңкелі өзі болып табылады.

мәнерлеп жақшасыз жазылған код:

{Қорап-көлеңке: 11px 22px 33px 44px # 333333;}.

Line құрылғы көлеңкелі пиксель радиусы Стандарттың орнатылғанына бізге айтады. төмендегідей деректер мағынасы:

• 11px - көлеңкелі Х осі (оң мән (20px) блок қатысты ауысатын оң көлеңкесінде, теріс (-37px) көшу болады - сол жақта);
• 22px - блок ((-17px) төмен теріс көлеңкеде ығысу оң мәні (5px) қорғасын - дейін) Y-осіне қатысты көлеңкелі ығысу;
• 33px - бұл Blur параметр, әсері саны, күшті жоғары;
• 44px - теней радиусы, және тікелей пропорционалды;
• # 333333 - көлеңкеде боялған түсі.

соңғы үш параметрлер қосымша болып табылады және жай, яғни {қорап-көлеңке: 10px 13px;, жолдың өткізіп жіберілуі мүмкін } - .. Мұндай желісі дұрыс емес (көлеңкелі түсті блогында мәтіннің түсі бірдей).

Осылайша, сіздің сайттың беттерінде көлеңкелер құру қиындық емес, бірақ сіз жасай аласыз, көптеген жақсы көрінетін әсерлер! жобалау, әрбір бөлшекті әрбір деталь маңызды, өйткені, қайталанбас, бірегей Сіздің бала жеткізіңіз. Мұнда, ол арнайы ештеңе, меніңше, бірақ ол әлдеқайда қызықты және тартымды болып табылады.

ол кодтау сәйкес көлеңкелі CSS-блогында ұқсайды, кейбір мысалдар қарастырайық:

1. {Box-көлеңке: 25px 25px;} - CSS-көлеңкелі осьтерінің 25 пиксель жылжуы.
2. {Box-көлеңке: 25px 25px 10px;} - CSS-көлеңкелі осьтерінің 25 пиксель және бұлыңғырлық жиектерін 10 пиксел офсет.
3. {Box-көлеңке: 25px 25px 10px 5px;} - CSS-көлеңкелі осьтерінің 25 пиксел офсеттік, Blur 10 пиксель және 5 пиксель алдын ала анықталған радиусы жиектер
4. {Box-көлеңке: 25px 25px 10px 5px # 9e9e9e;} - CSS-көлеңкелі осьтерінің 25 пиксел офсеттік, Blur 5 пиксель және түсті радиусы көрсетіңіз, 10 пиксель шетінен.

көлеңке

неғұрлым әдемі, кербез және бастапқы реңктері құру үшін әр түрлі әсері бар. Сіз ішкі көлеңке жасауға болады. Ол параметрлерін одан әрі сипаттамасы ретінде кәдімгі барады «, кірістіру» параметрлерін көрсету үшін жеткілікті код:

{Box-көлеңке: кірістіру 4px 2px 6px # 9e9e9e;}.

Бұл блоктың астында үтірлермен бөлінген, олар (көлеңкелер) ресми тізімінде тұрған, Кодексте мүлдем басқа параметрлерімен бірнеше көлеңкелерді қоюға болады:

{Box-көлеңке: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

көлеңкелі суреттер

бірлік қосымша сайтында әрине суреттер болады, фотосуреттер, фоны - бұл барлық элементтері, сондай-ақ көлеңкеден әлдеқайда қызықты көрінеді. Сіз алдын-ала сурет редакторлар сурет суреттер және көлеңкеден бар қазірдің өзінде бетінде оларды қоюға болады. Бірақ, біріншіден, ол, екіншіден, кескіннің кез келген айла-шарғы жасау оған қосылады, себебі графикамен жұмыс дағдыларын жетіспеушілігі, соның ішінде түрлі себептермен әрқашан мүмкін емес «салмағы», және осындай сурет-ақ Жүктер баяулатуы мүмкін. Бұл жағдайда, сіз CSS-көлеңкелі суреттерді жасауға болады.

Бұл мәселені ең қарапайым және синтаксистік дұрыс шешім - блок құру, сіздің суретте фон Kotormo болады. Келесі, Сіз бірлік үшін қажетті көлеңке жасау және олар фондық-суретте көрсетіледі:

• .block1 {қорап-көлеңке: кірістіру 0 0 11px 9px # 9e9e9e; ені: 480px; биіктігі: 360px; фон: URL (суреттер / charlize_theron_2.jpg) 0 0 жоқ-қайталап;}

Бұл мысалда біз осьтерінің офсет жоқ бар ішкі көлеңке жасау, Blur радиусы, анықталған түсті, биіктігі және ені блоктың, және фондық (фондық) kuartinku тағайындалды. Нәтижесінде, біз ішкі көлеңке бейнесін алуға.

әлі қызықты, ол өте қарапайым, және ең бастысы - - CSS-кодты пайдаланып көлеңкелерді жасау келісесіз пайдалы жаттығу.