Осъществяване чрез CSS сянка кутия за монтаж на капка сянка

Приветствам ви в моя блог. Днес аз ще ви покажа как се правят нещата в синтаксиса на CSS блок сянка подробно обяснявам свойства кутия сянка, и това, което ефекти можете да създадете с него. Към края на статията, аз ще ви покажа още един имот - падащо сянка. които в някои отношения дори по-стръмни

Сенки в CSS

Така че, нека първо се справим с имот бокс-сянка. Той има следния синтаксис:

Сега е време да разгледаме някои примери за сенките и какви ефекти можете да постигнете с него.

лесно триизмерността

Много често на сянка използва за направата на триизмерен единица. Всички операции се извършват в един празен HTML-документ, който е създаден само един блок Разделение. Това са стиловете съм го определят:

Благодарение на такива лесно изместен и леко размазани сенки изглежда малък блок на изпъкналост.

лесно сияние

Аз наистина харесвам в смисъл, че има впечатление, като че ли най-леките единици. Той осъзна, много просто:

Expose всички на 0, с изключение на размазването. Цветовете показват същото, както трябва. Съответно, по-неясни очертания, толкова по-очевидното, че ще светят. Например, когато 25 пиксела размазване:

множествена кадър

Обикновено, блоковете на рамката и се изчислява по свойства граница. но има няколко недостатъка - като кадър добавя размерите на блока, и не можете да задам няколко кадъра само един.

Каре-сянка ви позволява напълно да се симулира рамката. И аз ви напомня, че сенки могат да добавят неограничен брой, така че може да направи всеки брой на кадрите само чрез добавяне всяка нова сянка на запетая с голям участък. Ако е необходимо, те все още може да бъде малко замъглено.
Ето един код, за да добавите към елемента на тройната граница:

Имайте предвид, че на сянка е напълно съответства на елемента - ако тя е кръгла, а кръг сянката на себе си.

Вземете тук е такава, овална с сянка. Ако височината и ширината на блока са едни и същи, устройството ще бъде кръгла, като неговата сянка.

Drop-сянка

Всички те бяха много, много прости примери сенки за блокове. Какво ще кажете за да добавите сянка към PNG изображение? Както си спомняте, кутия сянка може да направи само една сянка квадрат блокове. Разбира се, елементи могат да бъдат трансформирани от квадратна или правоъгълна, но всички същите възможности за бокс-сянка са ограничени. И тук идва на помощ CSS филтър, наречен падащ сянка.

Намерих в мрежата изображението в PNG формат. Сега ще го постави на страницата с помощта на IMG таг.

За да се отличава на работа, е необходимо да се добави продавач версия префикс -webkit (ако работите в Google Chrome, или Yandex Browser). За други браузъри, необходими, съответно, други представки.

Така че тук е какво се е случило:

Сянката повтаря контура на изображението! Това не се постига с бокс-сянка. Бих искал да отбележа, че като капка сянка не поддържа разтягането, но замъгли опори.

Пример разширено използване на сенки

Сега часът разбор по-сложни например сенки. Аз ще ви покажа как можете да направите устройството повдигнати краища на чист CSS.

В HTML се създаде звено с ugolki клас и помощен клас мкг, чрез които сенките ще бъдат добавени към българския човешкото всичко беше ясно.

Имайте предвид, че цветовете, използвани формат на запис RGBA. която ви позволява да правите резки сенки, които като цяло са много добре се възприема от окото. Но досега сме повдигнат отново, но само един блок с малко блясък. Corners добавим използване псевдо.

Добавянето на всичко това опашката на кода в нашия CSS-файл. Сега всичко, което трябва да работи. Вие сте свободни да променя ориентацията на сенките и цвят.

Яйце чист CSS

Експериментирах тук и да гледате на яйцето се обърна Тук споделя с вас кода:

Следователно, налице е и регистриран доставчик версия представки за собственост, за да работят в най-популярните браузъри.

Тя изглежда като яйце, нали?

Но какво, ако не искате да напишете свой собствен код за сенките? Използвайте визуалната генератор! На един от тях съм писала тук.

Можете също така да се интересуват от

Днес статия за такъв дребен предмет, но може би някой от вас ще бъде от полза. в

Днес, аз предлагам да се направи красива форма за търсене на CSS. Съгласете се, стандартни формуляри за регистрация

Здравейте. Много дълго време не пиша мнения по темата за работа HTML / CSS. Напоследък просто започна

Всички добре дошли. Днес, аз ще напиша една много интересна статия за това как да се направи в CSS

Поздравявам ви. Изглежда, на страниците на блога си, не съм описано как да се направи