Loading...
borislavml avatar borislavml 368 Точки

[Homework] Веб Фундаменталс - CSS Presentation

Взеха ми здравето тези градиенти! Задачата с "хавайците" се оказа най-трудна за мен, за разлика от тази със зведичката и 60-те нестнати дива. Изрових един много добър пост  тук  за градиентите (линейни и радиални), която ако човек прочете внимателно и помсили, разяснява нещата доста добре. Ето тук пък един много добър radial gradient generator, който уж трябва да поддържа и firefox, но за съжаление аз успях да го подкарам само на chrome. Ето и задачите:

  •  The Jaunty Text Field - WEB + HTML + CSS
  • SoftUni Hawaii Vcation - WEB + HTML + CSS - само с webkit (демек Chrome и Opera)
  • Styling An HTM Form - WEB + HTML + CSS
  • Nested Divs - WEB + HTML + CSS

За формата с радио бутоните за кредитни карти, си свалих free библиотека с credit card icons в png от тук , a за задачата с мачовете от сетовното от миналото домашно си дръпнах библиотека с всички флагове на държавите от тук. Изключително удобно, зашото всички са ти еднотипни и не се налага да търсиш като идиот в google images а после да ги ресайзваш. Ако се намерят и спрайтове ще е още по-добре (но тези неща ввече сигурно са с пари).

"Фигурата" с нестнатите дивове лично аз с 60 не можех да я направя,малко повече трябваше да набия.smile

Задачата с калкулатора нямам абослютно никакво намерение да я правя. НЯМАМ НЕРВИ, вероятно ше отнеме цял един ден laughing!

 

 

17
Web Fundamentals - HTML5 08/03/2015 14:26:14
zontak avatar zontak 457 Точки

Ето ти жокерче за първата задачка.. за да не се налага да слагаш нестнати дивове ;))


            box-shadow:
            0 0 0 2px #008000,
            0 0 0 3px #4343ff,
            0 0 0 5px #ffff00,
            0 0 0 7px #4343ff;

 

И малка забележка към 2-рата задачка.. Опитай се да използваш ID само когато пишеш джава скрипт.. Иначе начините са или наследяване или класове.. :))

6
borislavml avatar borislavml 368 Точки

По-добре би било с класове, прав си , и да ги достъпвам с nth-child ама... пуст мързел smile. А за наследяването какво имаш в предвит би ли разяснил, не мога да включа!?

0
kiko144 avatar kiko144 795 Точки

Еми 1-вата лекция има предвид колегата. Селекторите за first-child, nth-child, nth-of-type, last-child, last-of-type и т.н. както и другите за директен наследник ">" примерно

Мога да добавя само едно малко жокерче за нестнатите дивове. Ако ги направиш 60 с margin от едната страна 5% се получава точно! Иначе много добре си се справил с домашното поздравления !
0
arsoman avatar arsoman 419 Точки

Моето решение на втора задача е ТУК, правено е единствено и само с background-и! Има много интересен приоритет, като се ползват multuple backgrounds....

4
jabalka avatar jabalka 960 Точки

Колега, не си ползвал шрифта, който се изисква, за надписа на хавайското парти.

0
arsoman avatar arsoman 419 Точки
Благодаря много, колежке! Видях си грешката, при мен излиза правилно, защото съм инсталирал шрифта, но не съм го сложил в css-файла! Супер си, поздрави!
0
jabalka avatar jabalka 960 Точки

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

Хубав ден!

2
ZvetanIG avatar ZvetanIG 907 Точки

Добро решение на втора задача, но мисля, че идеята на задачата е да се използва Multiple Backgrounds. По-надолу съм качил моите решения. Може да погледнеш, какво имам предвид.

 

01.The-Jaunty-Text-Field -  Demo - HTML - CSS

02.SoftUni-Hawaii-Vacation.html - Demo - HTML - CSS

03.Styling-a-HTML-Form.html - Demo - HTML - CSS

04.Nested-DIV-Elements.html - Demo - HTML - CSS

 

13
borislavml avatar borislavml 368 Точки

Мерси колега сега виждам къде ми е грешката. Първоначално и аз се сетих, че явно идеята е за multiple bakgrounds и тръгнах да ги ръгам  като бекграунд диркетно в body-то(където са ми градиентите), но нещата не се получаваха защото "хавайците" оставаха горе в празния бял фон под png background file-а, и като тръгнеш да ги позиционираш те реално се скриват под него. Надявам се успях да обясня какво имам в педвит smile . И се чудих, чудих какво да правя и си викам , айд през просото ше ги бутам с в дивове и през тях ше ги позиционирам, а няма на кой да му дойде на акъла да сложи един див в бодито и да ръгне там png background file (както,явно е правилното решение, и виждам че май май всичк колеги така са го направили, самоа з съм се "изтарикатил". Но все още ми е трудно да осъзная момента с background png file-a....а именно, защо когато е в див може да разхождаш "хавайците" с отмествания по цялата му "повърхност", а когато е като background на цялоото body(моят свлучай) елементите се скриват зад хоризонта(плажа)!?!?!

0
ZvetanIG avatar ZvetanIG 907 Точки

Значи за да не ти се скриват хавайките, трябва да ръгнеш първо тях, а фона трябва да е последен. Принципа е следния: картинката, която е сложена последна е най-отдолу, а първата е най-отгоре.

1
georgi950 avatar georgi950 53 Точки

Идеята на 2 задача е да я направиш с много background-и, а не с дивове доколкото разбрах аз. Може да видиш как аз съм я направил - доста по-кратка и лесна е (за около 15-20 мин. работа най-много). Имам и калкулатора написан на 99% точно.

GitHub

3
borislavml avatar borislavml 368 Точки

Да колега,забелязах го този момент вече! Евала за ентусиазма за калкулатора, ако  някой го направи целия -плюс да е напълно функционелн, трябва  да му купим две каси бира laughing

2
georgi950 avatar georgi950 53 Точки

За 2 каси бира ще му драсна 1 функционалност laughing

2
arsoman avatar arsoman 419 Точки

ЕТО ТУК е решението на трета задача! Мисля, че трябва да е наистина като форма, тоест ограничено място, а не целия бекграунд да се заема от картинката. Научих и тънкост при използване само на част от картинката като бекграунд, и то точно определена част, явно това е в основите на спрайтовете...

Линк към Github
0
Ventsislav avatar Ventsislav 343 Точки

От тук също можете да намерите иконите за кредитните карти в 3та задача.

1
externo avatar externo 119 Точки

Не мога да разбера защо текста TEXT SHADOWS ARE COOL не може да стане черен, къде ли не пробвах да го променям и все си остава сив? 01.The-Jaunty-Text-Field моля, помогнете!

0
HPetrov avatar HPetrov 822 Точки

Никъде не виждам да задаваш цвят на който и да е фонт. Ако трябва сложи клас на клетката. А най-добре затрии всичко и го направи без таблици :) Просто забравете, че таблиците съществуват когато става дума за layout. Единственото изключение е display: table-cell; но пак се внимава с него.

2
Dominik avatar Dominik 82 Точки

Здравейте колеги,

 

Дайте някаква идея как да компресирам домашното да стане под 1мб .. защото ми излиза на 1.3мб (демек скрийшотите които са дадени да ползваме за фонове и т.н. ).

 

 

0
kiko144 avatar kiko144 795 Точки

Опитай да го архивираш към формат 7z той компресира в пъти повече от zip примерно :) 

0
Dominik avatar Dominik 82 Точки

Опитах, но не стана. 

0
arsoman avatar arsoman 419 Точки

Колега, в домашното пише само сорс-кода, аз качих всичко, но без бекраунда за хавайското парти, че е голям...

0
HPetrov avatar HPetrov 822 Точки

Аз да покажа и моя калкулатор, който правих преди няколко месеца -> 05.Calculator

Малко са по ниски бутоните, поне на Mozilla така ги прави, така и не разбрах къде съм омазал здраво а и не ми се занимаваше да го търся 2 часа сега :)

Ще споделя само и как се чуствам след такава задача:

 

5
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.