[CSS] Домашно CSS Presentation - 2 задача - сезон 2012/2013


7
Здравейте! За пръв път пускам решението си във форума, надявам се да съм спазил всички правила. Не видях никаде тема за тази задача.
Мисля че ми се получи едно към едно. Има коментари в кода навсякъде, кадето са правени нужните промени.
https://www.dropbox.com/sh/d9cggcah1011x84/2OsIfuC19G



Отговори



0

Добре ти се е получило, но не мисля, че е нужен gradient  в input box-овете или не виждам добре цветовете от качествения дисплей на лаптопа :D. Според мен задачата беше да упражним gradient-ите. Виждам, че си дал решение с .img, който го repeatvash по x. Аз се опитах да го докарам със чист CSS. Не го докарах 1 към 1 ама след 30 мин целене на цветове и преливания се спрях на този вариант:Dropbox / JSFiddle

Eто и вариант с  gradient img repeat-нат по x: Dropbox
Критики и коментари са добре дошли ! :)


от Georgi Georgiev 1 (0 точки)


0
Колега забравил си да заоблиш nav-a и article-ите, също така бутночето регистър има бордър ефект който трудно се забелязва ;).

от fifipaldi (899 точки)

0
Благодаря, веднага ще коригирам.

от Georgi Georgiev 1 (0 точки)



7

Моето решение с плътен цвят на бекграунда в body и градиент само в header.
Според мен по този начин се получава желания ефект за преливане на определеното място. Използвал съм съответните градиенти за различните браузъри, включително и за IE, чиито филтър за градиент намерих от тук: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
 Тествал съм на Chrome, Mozilla, IE.

Код на html и css:
http://jsfiddle.net/uUPeP/

Резултат, full screen (без картинките за логото и list items):
http://jsfiddle.net/uUPeP/embedded/result/


от i.d.rachev (412 точки)


0
Колеги, вие спазвате ли точно определените големини за шрифта на текста? Извинявам се, ако въпросът ми ви се стори глупав, но ако го направя 1:1 текста е много малък на 15.6'' екран... Та, се питах дали някой не е задавал този въпрос на трейнърите?

от vlad_karamfilov (4595 точки)


0
Ами, честно да ти не ги спазвам , защото зависи от много неща големината на текста: резолюция, настройки на браузъра и монитора. Големината на шрифта е най-малкият проблем, но все пак би било хубаво да зададем този въпрос на трейнърите.

от Georgi Georgiev 1 (0 точки)

0
За да знаеш с точност какъв размер е шрифтът, ти трябва дизайнерското psd на сайта (да видиш от там пикселите), а ние го нямаме - имаме само картинка. Така че на око действаме, според мен в случая няма нужда да се бутат размерите на шрифта.

от dpeeva (1139 точки)


3

Аз пък за background-a ползвах най-простичкото

background: linear-gradient(to bottom right, #9215F2, #9117F1);    

и ми се получи абсолютно същото, а и работи едновременно за новите браузъри.

Пускам един полезен линк за градиенти:

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients :)


от DianaK (95 точки)


0
Как работи с IE?

от corectnia (31 точки)

0
При мен не работи. Виж по-горния коментар линка и кода (filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000'); )

от DianaK (95 точки)



1

Колеги, молбата ми към всички, които постват решения за CSS, да използват  http://jsfiddle.net/ tool (или подобен). Гарантирано ще ви е полезен и занапред.

Поздрави,
Дони


от doni.todorova (1245 точки)


4

Според мен фонът е:

html {
    background: #9215f2;
    background: -webkit-linear-gradient(#D593FF 0, #8F19EF 165px, #9215f2 100%) fixed;
    background: -moz-linear-gradient(#D593FF 0, #8F19EF 165px, #9215f2 100%) fixed;
    background: -o-linear-gradient(#D593FF 0, #8F19EF 165px, #9215f2 100%) fixed;
    background: linear-gradient(#D593FF 0, #8F19EF 165px, #9215f2 100%) fixed;
}

Има fixed накрая за да се разпъне на 100%.


от jasssonpet (6814 точки)


0
Много си прав за това fixed накрая, така преливката си седи на мястото винаги, дори и да се разпува или смалява прозореца.
А за самата преливка аз си отрязах едно парче от картинката която имаме и на http://www.colorzilla.com/gradient-editor/ използвах "import from image" така става абсолютно същата.

от evlogi.hristov (2645 точки)

0
Мерси много за коментара за fixed!




0
Хора, има ли видео към тази лекция? или е само презентазия??



0
Все още няма качено - следи youtube канала. Ако бързаш виж пак в youtube за лекции от миналата година.

от Georgi Georgiev 1 (0 точки)

0
Значи от презентацията сте го направили?




0
Здрвеите , относно това домашно имам следния въпрос :
Нужно ли е да пренастройваме CSS-то , така че да работи сайта и на IE, понеже IE явно има проблем с селекторите използвани в CSS файла към домашното и не може да ги разбира много много : ) Та на този браузър визията няма нищо общо с останалите, нужно ли е пренаписвам CSS-то специално за по - старите версии на IE.
Благодаря Предварително !

от Arislan (37 точки)


0
Сложи си 10-та версия,там нещата са доста по-добре.

от gibson58 (0 точки)


0
Мисля, че има и градиент на background на button или може би издребнявам много



0
Ако говориш за бутона register, според мен няма background, а само border-style: outset; което е написано

от son4etyyy (416 точки)

0
Според мен няма градиент... играх си да сравнявам цветовете и на бутона и на input-те и ми дава един и същи цвят... :)

от mariq88 (232 точки)



1
Здравейте, ето и моето решение, ще се радвам на коментари: http://jsfiddle.net/konstantin_petkow/AJnLS/
https://www.dropbox.com/s/h3rpyziq2sbpkok/CSS%20Presentation-Ex.%202.rar