Домашно 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.



Отговори



1
По този начин написано го има и в презентацията и за трите задачи... :( Ако може малко повече разяснения, моля! Ще е от полза за онлайн курситите. Дано като качите видеото има повече разяснения за тази задача, защото като погледна черните полета на psd файла, изобщо не ми става ясно къде какво да слагам... :( Надявам се някой и тук да обясни.

от A4oTo (0 точки)


0
Някой ще каже ли по-конкретно какво трябва да се прави на 2рата задача ?!

от Rumen (0 точки)

0
Да това е ясно,но какви трябва да са картинките .png или .jpg не става ясно дали фона е бял по принцип, или да го направим с .png и сянката да излиза на всякакъв фон.Защото все пак тези картинки са image и би могло да се направят в .jpg формат.Ще се радвам ако някой разясни :-)

от borislav (0 точки)


0

 От PSD файла трябва да вземете само сянката и да структурирате html-а  и css-а така, че каквито и размери да са снимките, сянката винаги да ги следва.

Тая задача ще ме побърка crying


от milendimitrov (0 точки)


3

от Velidar (1099 точки)


1
Тая задача, признавам ме запъна. Отначало тръгнах със sprite да я правя, обаче стигнах до там дето трябва да се repeat-x долната сянка и нещата взеха да загрубяват :). Някой ако каже точно как да приложа repeat-x на сянката със sprite, при положение, че ми са разположени хоризонтално картинките върху спрайта, евала му правя. Иначе тая задача с таблици да се направи е песен просто, ама няма как не трябва да е с таблици.

от Viktor_Ivanov (2505 точки)


0
И аз съм си задавал принципно същия въпрос като "как да приложа repeat-x на сянката със sprite, при положение, че ми са разположени хоризонтално картинките върху спрайта".
Незнам, струва ми се, че е невъзможно, но ако откриеш някакво решение пиши, интересно е да се знае.

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

0
от това което прочетох, а и логично стигнах за заключението, че ако ще ползвам sprite за повтарящ се фон трябва да имам един за хоризонтално и един за вертикално повтаряне. Иначе няма шанс просто или трябва някакви магии да се правят.

от Viktor_Ivanov (2505 точки)


0
Някой ще даде ли малко жокери по задачата? Линкове, обяснения?

от A4oTo (0 точки)


0
Виж post-а на @Velidar

от lubomirivanov (0 точки)

0
Видял съм го, но очаквам някой от лекторите да се изкаже по въпроса ;) пък и други мнения на знаещи ще са от полза.

от A4oTo (0 точки)



0

enlightened

yes ура налучках го

 


от milendimitrov (0 точки)


1
Я да попитам, под IE 6 e ясно, че е мазохистично да се подкара, но как сте под IE 7?

от Viktor_Ivanov (2505 точки)


0
Ми при мен си работи екстра. Изглежда точно както при другите браузъри.

от Velidar (1099 точки)


3

Най-накрая, тръгна и под IE7, но голям зор беше. Прочетете малко повече в интернет за IE7 width 100% bug и ще разберете защо :). Моята реализация вече се различава от метода на @Velidar. В неговия вариант, трябва да има бели полета в долния десен ълъл, тук не е така. Какъвто и фон да е зад него, излиза излиза нормално. За да постигна това написах средната html структура 

 

<div id="img_wrap">
<div class="img_hold">
<img src="http://placehold.it/300x250" width="300" height="250" title="img" class="img_float" />
<div class="right_top_back"></div>
<div class="right_repeat_back"></div>
</div>
<div class="bottom_cont">
<div class="bottom_left_back"></div>
<div class="bottom_repeat"></div>
<div class="bottom_right_back"></div>
</div>
</div>
 
Ще направя малко разяснения около класовете. Има един държач на картинката в който ще са едновременно и картинката и сенките. Навътре отиваме в img_hold в който ще са ми картинката и дясната горна и дясната повтаряща се картинка. Самата картинка съм я флоутнал вляво, за да ми се наместят нещата, има и padding-right;. Дивовете с картинките вдясно са с позиция absolute и малко right отместване. Отдолу вече за долната сянка съм направил един див с клас bottom_cont, който да държи още 3 дива за картинките на долните сенки. Те отново са с абсолютна позиция и отмествания. Общо взето това е структурата, оставям на вас да помислите какво е записано в класовете :)

 


от Viktor_Ivanov (2505 точки)


0
Имам чувството, че си докарал нещо изключително завъртяно. :D Успях да докарам само дясната част. И наистина, виждам, че този път с малко отрицателен margin-top се скрива ненужното от десния тайл. : ) Явно си постигнал заветната цел. :D Поздравления.
Но какво точно правиш с .bottom_cont, че забатачването е брутално и нищо не излиза...

от Velidar (1099 точки)

0
хаха да, общо взето точно така си беше, все едно да наблъскаш топка в шише, ама накрая влезе. Не знам какво си въртял отдясно, но при мен повтарящата ми дясна е с top: 11px;, не съм ползвал маргини, ти си хванал друг път, но супер, ще се радвам на още варианти на решаване на тази задача. А за .bottom_cont ок ще подскажа, той е със width: 100% и отрицателен bottom :) Успех!

от Viktor_Ivanov (2505 точки)



6

Е, и аз "реших" задачата като елиминирах проблема с долния десен ъгъл. Та, при моята структура имам един допълнителен контейнер, вътре в главния, който държи всичко. Работих директно по структурата на Виктор. Измених я и ето го резултата:

 

    <div class="img-wrap">
        <div class="img-hold">
            <img src="http://placehold.it/300x250" width="300" height="250" title="img"/>
            <div class="right-top-back"></div>
            <div class="right-repeat-back"></div>
            <div class="bottom-left-back"></div>
            <div class="bottom-right-back"></div>
            <div class="bottom-repeat-back"></div>
        </div>
    </div>

 

Та, каква е цялата идея. Заобикаляне на width: 100% и height: 100% от разпъване извън нужните граници (двата тайла). Това било всичко. И това го постигнах чрез задаване на самото изображение чрез .img-hold img (примерно)   margin-bottom: -13px ; margin-left: -8px;. Просто някакви отрицателни мар джини, които да, буквално, СКЪСЯТ ония 100% width и height при разпъването на двата тайла. Тоя контейнер сам .img-hold има само едно css правило и то е position: absolute; като на най-външния .img-wrap съм дал position: relative, което всъщност май не променя нищо. Така нещата си идват на мястото. И пак на този най-външен контейнер давам някакви компенсации за марджините на img-a, които съм дал за да скъся разтеглянията.

Оттам нататък е тривиално. Доста позиции и донамествания на останалите ъгълчета и въобще елементи.

Цялото нещо работи еднакво под всички известни браузъри + IE 7. Но ако трябва да бъда честен, бих си използвал онзи далеч по-чист метод, който най-първоначално бях описал подробно. : )

EDIT

Да си добавя. Сложил съм и един ей такъв ред:

.img-hold div {
    positionabsolute;
}
Щото всичко е с абсолютни позиции.

 


от Velidar (1099 точки)


0
супер, браво колега. Ето пръкна се още един интересен начин, това с маргините е добро, не бях се сетил. Да видим, дали ще има някой с друг вариант.

от Viktor_Ivanov (2505 точки)

0
А как сте направили сянката от ляво която е доста бледа и е точно 1px и приключва на 3 пиксела от горният ляв край на снимката. Мене ми е трудно да я отрежа пък остава да я позиционирам.

от REPLAY (252 точки)



3
Целта на задачата е да се пробвате по старомодния начин да изрежете така сенките че да могат след това да бъдат приложени на коя да е снимка без да се ползва css3 а само допълнителни елементи, с които да се постигне ефекта за сянка. Тествайте решението си с различни размери картинки

от paveld3 (17458 точки)