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
VenIT avatar VenIT 63 Точки

Здравейте, 
ето ги и моите задачи.

01.TheJauntyTextField
-> HTML
-> CSS
->DEMO

02.SoftUniHawaiiVacation
-> HTML
-> CSS
-> DEMO

03.StylingHtmlForm
-> HTML
-> CSS 
-> DEMO


04.NestedDivs
->HTML
->CSS
->DEMO

05.ProgrammerCalculator
->HTML
->CSS
->DEMO

3
dsmiteva avatar dsmiteva 13 Точки

Здравей, как си направил градиента на 2 задача?

0
VenIT avatar VenIT 63 Точки

здравей,


background
: -webkit-radial-gradient(170px 120px, circle,#F9F9F9 0%,#F9F7BB 8%,#F1F6FC 13%,#006EDB 60% );
170px е разтоянието по x(т.е от лево),а 120px разтоянието от горната страна. 
circle е за да е окръжност(може и ellipse). След това имаш ЦВЯТ + стоп позиция за него,която може да е в единици(px) или проценти като 0 е цънтъра на градиента а 100 краят на градиентния лъч.
Погледни   ТУК.

0
dsmiteva avatar dsmiteva 13 Точки

Благодаря :)

0
ivelina_popova avatar ivelina_popova 37 Точки

Здравейте, някой направил ли е на 3-тата задача (Problem3 Styling a HTML Form) Card-type-овете като списък? 

0
idmitrov avatar idmitrov 55 Точки

Не съм започнал задачата все още, но като гледам според мен това са 3 радио бутона съответно с 3 лейбъла

0
ivelina_popova avatar ivelina_popova 37 Точки

Ами, да, след като изгледах и следващата лекция разбрах какво е "радио" бутон и че е най-подходящо това да се използва, мерси :)

0
wenzdy avatar wenzdy 7 Точки

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

Много хубави калкулатори сте направили всички. Аз тръгнах малките бутони да ги правя с div-чета, но в крайна сметка ще се върна обратно към първоначалната ми идея да си е втора таблица. Та като го свърша и aз ще го пусна тук, че сега правя следващото домашно :) 

0
m.zh.ivanova avatar m.zh.ivanova 1 Точки

Браво, колеги... много добри решения на задачите, особено калкулаторите ми бяха много интересни докато ги разгледам :)

Може ли да ви помоля да ми обясните с по няколко думи работата на display и position и техните атрибути... много ми е трудно да го схвана... винаги ми отнема изключително много време, докато ги наглася тези неща... и колкото и да чета за тях, никога не ми се изяснява до край.. :) благодаря предварително :)

0
24/02/2015 22:40:39
kvasilev avatar kvasilev 9 Точки

Здрасти,

 

Това, което аз разбрах да display и position e:

display - опедерля как да се показват/подреждат елементите.

display: none; - елемента за който се прилага и цялото му съдържание няма да се покаже, а ще бъде скрито. Пример за използване е падащо меню.

display: block; - подрежда съдържанието на елемента за който се прилага на редове - всеки поделемент(детето) ще заеме целия ред (цялото пространство хоризонтално) от елемента за който се прилага(родителя);

display: flex; - подрежда съдържанието на елемента за който се прилага на колони - всеки поделемент(детето) ще заеме цялата колона (цялото пространство вертикално) от елемента за който се прилага(родителя);

Ако бъде inline-block или inline-flex, под елемента(детето) няма да заема целия ред съответно колона, а ще заеме място само колкото му е необходимо.

Мисля, че тук при display трябва да се спомене, че поделементите(децата) се позиционират вътре в парента с justify-content за хоризонтално и align-content за вертикално позициониране. Макар, че align нещо все се бъгва и аз използвам падинг и маргин.

 

position - позволява да определим къде да се покаже определен елемент.

position: relative; - елемента ще се покаже там къде ще се покаже по дефолт.  Доколто ми стана ясно, случай за употреба та на релатив е когато искаме да позиционираме поделементите(децата) спрямо родителя. Пример пак е падащо меню, заглавието е с position: relative;, което ни позволява да позиционираме падащата част спрямо заглавието...

position: absolute; - позволява ни да зададем точни координато къде да се покаже елемента съответно чрез top: XXPx; и left: XXPx; ... примерно ако падащата част на падащото меню е с абсолютна позиция с top: 100%; и left: 0; то, то ще се долепи точно под заглавието. 

 

Има и други пропъртита, но стана много дълъг пост, а и на мен не са на 100% ясни.

 

 

 

2
25/02/2015 03:13:49
m.zh.ivanova avatar m.zh.ivanova 1 Точки

Незнам как да ти се отблагодаря... Благодаря ти за бързата реакция и отделеното време :)

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