Shadow без CSS


10
Kaк се прави shadow на картинка или бутон без CSS? Поправете ме ако греша, но не мисля, че някой ни е обяснил до сега в лекциите как става това? За рязането е ясно, но свързването на всички части? А имаме да направим такива сенки в домашното. В лекцията за Photoshop Иван Жеков казва, че е лесно и ставало за 10 мин. Но като нямам никаква идея от къде да започна и за 20 дни няма да стане. Някой може ли да помогне с обяснения или примери?



Отговори



1
Ок, мисля че са имали предвид да направиш сянката с photoshop, като как става това:
1.Отваряш photoshop и в него отваряш и съответната картинка или бутон.
2.Селектираш и копираш картинката. Правиш нов проект (file>new), като в прозочето което ще се покаже избираш backgroung content>transparent. (Добре ще е да увеличиш ширината и височината също защото photoshop-a по defaut прави размера толкова колкото е голямо копираното изображение.)
3.Поставяш картинката в новия проект.
4.След това селектираш layer-а с изображението и отиваш и цъкаш на менюто: Layer>Layer Style>Drop Shadow
5.От следващото прозорче си настройваш сянката и си готов.
6.Като сейфаш новото изображение, за да имаш истински прозрачен background, го запази като PNG-24.

от V.Shterev (1151 точки)


1
Колега не е това идеята на задачата. Вътре в демото има файл на който е сложена сянката, която трябва да се нареже и да се направи така, че да се разпъва по ширина и височина на картинката, независимо от размера и. Аз поне я нарязах на 5 части и правя сглобката.

от Viktor_Ivanov (2505 точки)


18

Дойде сериозната част от курса. Поне според мен. Рязане и правилно позициониране на елементи. Гледайте също и видеото за Photoshop от миналата година. Там се споменават два начина за правене на сянката.

Та каква е идеята. Малко допълнителен HTML, за малко допълнителни елементи, които да имат background, та като са насложени правилно, да изглеждат като drop-shadow. laugh Тушеееей.

Ето моята методика поне. Имам един външен контейнер (дивче). В него ще са дадения img, заедно със елементите на сянката. Те може да са всякакви. Просто трябва да ги има, за да може да им се сложи бекграунд. Сложих ги спанчета. И при мен са 5. 3 ъгъла (долен ляв, горен десен, долен десен). И съответно самото разпъване на това между ъглите (долу и отстрани).

Та каква е идеята. На всеки елемент, спанчетата за сянката, даваме някви класове, за да може да работим с тях поотделно. Даваме им абсолютна позиция, за да можем да ги позиционираме както трябва. Пример:

на клас .corner-left даваме bottom: 0; left: 0. По тоя начин даденият ъгъл ще се лепне точно където ни трябва - залепен до долната част, отляво на главния div. Аналогично и за другите два ъгъла. Не забравяйте - абсолютна позиция. Също така, нещо много важно, първо трябва да сте си нарязали картинките с ъглите. Трябва да знаете техните размери. И да имат зададени width и height, защото всички знаем какво се получава с празни елементи, без зададени размери - няма да ги видите.

Относно двата тайла - те имат особености. И при двата ще трябва да дадете някакво отстояние за да не се застъпват с ъглите. Примерно, за този долу, който е между долния ляв и долния десен ъгъл, няма да му слагате за позиции директно 0,0 , a примерно left: 8px (самата широчина на ъгъла, колкото е тя), bottom: 0, за да не се застъпи с прилежно направения от нас ъгъл преди това!

Та как ги разпъваме тия два тайла долу и вдясно. Слагаме им съответно width: 100% и height: 100%. По този начин те ще стигат до края (че и ще излизат, но за това след малко) и ще се разпъват както за малки, така и за големи изборажения. : )

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

Тук се получава нещо, което е кофти. Първо: двата тайла си излизат от контейнера и второ: нещата изглеждат грозно и застъпено там, заедно с нашия ъгъл, защото всичко е png и е с прозрачности. Тук, аз лично друго решение не видях, освен да дам един overflow: hidden на целия контейнер (за да не излизат тайловете навън) и да сложа на този същия долен десен ъгъл background-color: цвят-който-седи-зад-сянката за да може да премахне видимото от грозното застъпване с тайловете. Предполагам е ясно, но да спомена: ъгъла трябва да е след тайловете в HTML-a, за да ги застъпи правилно.

В края на крайщата, вероятно ще ви се наложи да си поиграете и с още някви марджини и падинги (по-вероятно за самия img). Аз активно използвам firebug. Самия img... нищо по-специално около него. Готово. И не забравяйте, че външния div, държащ цялата работа, трябва да има position: relative, защото в противен случай нашите абсолютно позиционирани сенки ще бъдат спрямо целия браузър, а не спрямо нашия контейнер!!! Да не се чудите защо като сложите top: 0; right: 0 ви го лепва горе вдясно на целия прозорец. :D

 

Втория начин е далеч по-прост, но с не толкова задоволителен резултат. И при него няма да имате красиви ъгли горе и вляво. Едно огромно изображение (примерно 2000x2000 пиксела), което е сянката, само с един допълнителен елемент, на който му го слагате като background. Толкова.

EDIT

Май пропуснах едно нещо. Отново за целия контейнер. Или трябва да има float, или да има dipslay, различен от block. Иначе се разпъва по ширина, доколкото е възможно...


от Velidar (1099 точки)


0
чудесен пост, моята реализация е в подобен стил, с не големи разлики.

от Viktor_Ivanov (2505 точки)

0
Всичко ок. Но ако сложиш плътен фон на bottom-right ъгълчето, тогава няма да можеш да сменяш фона на документа. Тази задача наистина ще ме убие (headbang)

от milendimitrov (0 точки)



2
Не, естествено, че не става въпрос как да направим сянката с Фотошоп, а как да изрежем и позиционираме правилно сянката, вече направена с Фотошоп и дадена ни от дизайнера.
Velidar, благодаря, че си дал твоето решение. Обаче се питам защо отново трябва да правим задачи за домашно, за които изобщо не ни е обяснено как се правят...

от A4oTo (0 точки)


1

 

Аз успях да го направя без плътен фон и без застъпване. Незнам обаче до колко ще мога да го обесня точно. 
Ако нарисуваш див и му поставиш паддинг 7px от ляво и дясно. тогава наследникът див ще се разпъне на 100% - 7px.

от milendimitrov (0 точки)


0
Мерси на milendimitrov и Velidar. Аз установих следното, че ако наследникът е с position: absolute; взима за width:width+padding на родителя, а при position: static наследникът взима за width:width на родителя.

от Ivaka (85 точки)

0
А с 2 картинки: 1. shadow.png и 2. img.jpg(или друг непрозрачен формат) с position:fixed, започващи от една и съща точка,но размерите на картинката да са по-малки от тези на shadow.png по дължина и ширина, колкото е размера на самата сянка ( например 5px). Вариант 2 (с повече CSS): background-image:url(img.jpg),url(shadow.png); Останалото е аналогично както горе. Готиното е че тук можем да имаме 1 файл shadow.png с много сенки с различни размери за цялата уеб страница и да напаснем само картинките. А ако картинките се обединят в един общ файл с прозрачен background по принцип би трябвало да може да се направи изцяло само с 2 файла 1. shadow.png и 2. img.png. А position:fixed може да се замени с margin на контейнера и пак се получава. А контейнера може да е nav, article, div, content, span и какво ли още не, в зависимост от целта на страницата. Така че вариантите са безброй.



1

Изнамерих много готина статия подобна на решенията на колегите само че с табличка:

http://www.permadi.com/tutorial/cssImageDropShadow/index2.html


от Kristin (484 точки)


0
Аз имах идея да сложа две картинки една в/у друга със съвпадащи top-left ъгли и първата (тази отдолу) да е винаги 7px по-голяма от top картинката, но не можах да го направя само с CSS. В крайна сметка имам решение, подобно на колегите с един куп дивове и backgrouds :)

от Charity (95 точки)