Домашно Photoshop - 2 зад. Въпроси § Отговори


1

 

2.Given the file shadow.psd create a Web page (HTML + CSS + images) that displays few images (with different sizes) with a shadow.



Отговори



2

Ето го и моето решение на задачата. Не съм използвал абсолютно или релативно позициониране, както и не съм използвал и флоут. IE7 дава бъгове иначе на другите браузъри си е добре.
http://prikachi.com/images/625/4799625Y.jpg

от xpuc7o (159 точки)


0
За сянката 5 картинки ли използваш? Трябва ли да ти се променя CSS-a при различен размер на картинките?

от georgi.s.yankov (6219 точки)

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

от REPLAY (252 точки)



0
Има ли и друг начин освен нарязването на 5 части?
EDIT: когато сенките са прозрачни (с цел background-a да може да бъде различен от бял) почва да се вижда как се застъпват. Идеи? Аз продължавам да мисля...

от venelinpetrov (1221 точки)


0
ами така де, трябва са с прозрачност и да не се застъпват. По назад в темата има доста инфо как да го направиш. А в тази тема също има описани начини - http://forums.academy.telerik.com/7707/shadow-%D0%B1%D0%B5%D0%B7-css
отделно можеш да гледаш лекцията от миналата година, там също има показани начини.

от Viktor_Ivanov (2505 точки)


0
Тази задача беше като редене на рубик кубче-едно идва на място, друго се размества, а накрая последното квадратче идва най-тегаво...
HINT (за тези които още не са готови): По-лесно е да се направи първо рамката от сенки и след това да се намести снимката с подходящите марджини. Ползвал съм абсолютно позициониране.

от venelinpetrov (1221 точки)


2
Хинт относно сянката: вместо пет картинки, може да използвате три, като някои от тях ги завъртате с transform:rotate. Трите картинки, които са ви нужни, са една за долния ляв и горния десен ъгъл, като я въртите на 180 градуса, една за лявата и дясната сянка, като я въртите на 90 градуса и една за долния десен ъгъл, която не я въртите, защото ще е само на едно място.
Така спестяваме две заявки до сървъра, но губим backward compatibility.

от bakalov85 (604 точки)


0
+1 Интересно!

от georgi.s.yankov (6219 точки)

0
Сега обаче си мисля, че ако така и така се губи backward compatibility, то в такъв случай по-добре да се направи с box-shadow :).

от georgi.s.yankov (6219 точки)



0

Имам проблем.. очеваден.. какво ли не опитах, не ще и не ще да се оправя.. Repeat-натите div-ове са с width и height 100%, обаче се разтеглят повече от колкото трябва.. Маргини не отразява.. Разбирам защо е така, но не разбирам как да го оправя :/


от andzhelika (320 точки)


0
И аз имам същия проблем... цял ден опитвам какво ли не и нищо не става... сега се опитвам да го направя с абсолютно позициониране. Пробвах метода @xpuc7o, но ми се застъпват снимките една върху друга и като има прозрачност тя се наслагва... чудя се как на него му върви, та или аз нещо бъркам или той е изрязал снимките с белия фон и няма прозрачност. @xpuc7o HELP :)

от Valentin88 (0 точки)

0
Е, че то моето е с абсолютно позициониране всичко.. :/

от andzhelika (320 точки)



3

Aз го направих с onion skin,бързо,лесно,просто и гърми под ИЕ7 :)

Като нямам време да се ровя,дали има фиксове за почитаемия мегабраузер ИЕ...


от gibson58 (0 точки)


0

 Цял ден мъчих задачата и остана един проблем. Картинката най-долу вдясно се размазва. Не мога да си обясня защо. Размерите j са 8x8 px. Ако в CSS-а на съответния span дам един пиксел в повече(height или width), картината изглежда добре, но в края й се появява тъмно-сива ивица.

Някой знае ли защо се получава така?

 Това са HTML-а и CSS-a.

http://jsfiddle.net/vonko1988/58JMJ/


от ivan.mihov1 (4988 точки)