Loading...
Filkolev avatar Filkolev 4482 Точки

[Homework] Web Fundamentals (HTML + CSS) - CSS Presentation - септ.2014

Домашните по CSS се оказват доста пипкави и честно казано тия постоянни нагласяния на какво ли не хич не ми се нравят. Явно няма да съм фронтендър...

Дотук направих трите задължителни задачи. 4-та нямам намерение да я правя въобще. 5-та е в TODO.

На 2-ра задача мъчих градиента за фона, получи се частично. Но там е и много трудно да се разбере точно кои цветове са ползвани и точно на какви проценти са стоповете. Така че колкото и да я ръчкам не мисля, че ще я нагодя.

1-ва задача сега я проверих във Firefox и разбира се не излиза добре. Шрифта на текстовите полета ще го оправя някак, но не разбирам защо закръглените border-и не са dashed - такива са само в правите участъци...

Винаги зациклям след писане на домашни от тоя курс, така че чуждо мнение е добре дошло.

 

HTML + CSS - всички задачи

 

Problem 01 DEMO

Problem 02 DEMO - тук шрифтът не се зарежда в превюто

Problem 03 DEMO

Problem 04 - skip

Problem 05 - TODO

2
Web Fundamentals - HTML5 08/10/2014 17:20:15
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Погледнах само за секунда кода и видях, че не си задал font-size за цялото body и това е причината тескта да ти излиза с различна големина в chrome и firefox. Другите недостатъци на 1-ва задача при firefox не съм ги гледал. Сложи в body:

font-size: 12px;

Иначе попаднах на това

1
08/10/2014 18:51:25
Filkolev avatar Filkolev 4482 Точки

Не беше от това, а по-долу в селекторите, с които модифицирам шрифта на плейсхолдърите, явно тези за Мозила не разбират от em-ове. Пак има разлики, например цвета не е черен както в Хром.

А това с бордърите май си е от браузъра и не е ново: ЦЪК.

Между другото и text-shadow-a там е доста по-блед, както и в IE (аз го нагласях да изглежда добре в Хром). А в IE има и едни скролбарове, дето пробвах да ги махна, но не стана, ама кой пък ще се занимава с IE...

Отказвам с това да си изкарвам прехраната :D

0
08/10/2014 19:04:53
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Причината за разликата в големината на шрифта е това, че като не зададеш изрично в body-то font-size то различните browsers имат различен default size. Пробвах твоя код и след като сложих font size след това шрифта беше с еднаква големина.

1
Filkolev avatar Filkolev 4482 Точки

Ами зададох и аз големина на шрифта в body-то, но не сработи за placeholder-ите. Обработих ги отделно.

0
a.angelov avatar a.angelov 1316 Точки

И аз имам готовност засега със задължителните задачи:

Ето кодът: 05-CSS-Presentation-Homework

 

И preview-та:

01-TheJauntyTextField - DEMO

02-SoftUniHawaiiVacation - DEMO  /превюто не показва коректно шрифта/

03-StylingHTMLForm - DEMO

2
09/10/2014 16:56:32
Filkolev avatar Filkolev 4482 Точки

На 1-ва задача виждам, че и при теб във Firefox рамките не се получават, явно не може да се преборим с това. Също и сянката на текста е по-бледа, явно в това отношение Chrome има разлики с останалите браузъри. Ще се помъча да видя дали може да се зададат различни стойности за различните браузъри, за да изглежда що-годе еднакво.

На 2-ра според мен доста добре си се справил с небето. Цветовете как ги правиш? Аз пробвах с colorpicker, но е много трудно да се прецени откъде да се вземе цвета, повечето пискели са с различен цвят.

На 3-та може да сложиш фона на самата форма, да не е на цялото body. Тук може да поръчкаш малко нещата защото при преоразмеряване на textarea полето се получават доста неприятни работи. Аз мисля набутах всички input полета в div-ове за целта, а на textarea-та забраних да се преоразмерява хоризонтално. Не че нямам и аз неща за доизпипване.

1
a.angelov avatar a.angelov 1316 Точки

При firefox явно не работи като хората dash бордъра там където има бордър-радиус...

Цветовете с color picker ги вземам, няма как да ги гадая иначе :) Избрал съм най-наситените цветове от снимката. Пробвай с моите стопове на цветовете - 2%, 8%, 15% , 50%.

На трета задача си прав, че textarea-та ми се чупи, забелязах го още като го правих, ще го бутна :) Ще оправя бекграунда да е само на формата, а не на цялото боди. Сега видях, че и самия бекграунд има бордър-радиус и явно си е само за формата.

 

EDIT: Трета задача е коригирана.

2
09/10/2014 16:47:06
a.angelov avatar a.angelov 1316 Точки

Filkolev - по отношение на зареждането на шрифта на 2 задача - аз съм го декларирал в body-то и се визуализира правилно в превюто.

0
09/10/2014 13:37:37
Filkolev avatar Filkolev 4482 Точки

При мен не се показва в превюто ти. Ето скрийншот.

0
a.angelov avatar a.angelov 1316 Точки

Спя явно - прав си laughing не се зарежда шрифта в превюто..., сигурно съм гледал локалните файлове...

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

0
magdalena70 avatar magdalena70 96 Точки

Ето и от мен домашното: HomeworkCSSPresentation.

1.Jaunty Text Field - DEMO  HTML  CSS

2.SoftUni Hawaii Vacation - DEMO  HTML  CSS -на демото шрифта излиза грешно :(

3.Styling a HTML Form - DEMO  HTML  CSS

 

Ето и 4-та,но не е на 100% точна - разстоянието между лявата и дясната част при мен е по-голямо от показания пример.Освн това не съм използвала  http://emmet.io ,защото не се справих с инсталирането.  :( 

4.Nested <div> Elements - DEMO  HTML  CSS

 

Другите по-късно,че много време отнемат с това "100% accuracy is required". :)

 

 

2
15/10/2014 18:00:44
Filkolev avatar Filkolev 4482 Точки

Аз питах асистентите какво точно значи "100% accuracy", те казаха, че по-скоро означава да вземеш точните цветове, да докараш шрифта и позиционирането горе-долу. Не значи да е pixel-perfect. Т.е. ние за да направим 1:1 нещата трябва да знаем кой шрифт да ползваме, какъв да му е размера, да ни зададат ясно размерите на обектите и т.н. Така че това изречение е малко безсмислено, така или иначе се опитваме да нагодим максимално нещата. Една задача по тоя CSS ми отнема колкото времето, което имаме за изпита...

2
anton_mironov avatar anton_mironov 19 Точки

Здравейте!
Решенията са супер!
Само на първа задача си оправи border-top-style, защото не са точки, а квадратчета :)

0
nikola.m.nikolov avatar nikola.m.nikolov 830 Точки

Ето и от мен първите три задачи: 

1. The Jaunty Text Field - CODE , DEMO

2. SoftUni Hawaii Vacation - CODE , DEMO

3. Styling a HTML Form - CODE , DEMO

3
14/10/2014 08:03:06
velio84 avatar velio84 241 Точки

Някой може ли да ме светне радио бутоните на 3-та задача как се правят да може да се избере само 1? Щото в момента мога да нацъкам и трите карти? laughing

0
Filkolev avatar Filkolev 4482 Точки

Трябва да им зададеш еднакво име.

1
velio84 avatar velio84 241 Точки

Благодаря! smile

Ето ги и моите творения. Много се измъчих с полето, където се навират различните видове карти с радио бутоните. Реших да ги оставя за накрая, след като бях стилизирал всичко останало и се вкарах в излишни нерви, но нали трябва да ни е гадно все пак laughing

С 4 задача въобще няма да се занимавам, даже не мога да разбера какво се иска да се нарисува.

5-та.. ако случайно ми дойде музата. Ама надали smile

github

01 Demo (забравих да нулирам падингите и марджините в css, работи само на хром)

02 Demo (ествесвено, шрифта не се зарежда в демото)

03 Demo

На 3та е доста хамалски напасната частта с избора на кредитна карта, но след доста часове проба-грешка не можах да измисля по-елегантно решение. Да бях направил цялата задача наново, щеше да ми отнеме по-малко време най-вероятно.

 

Надписа Card type и долу картите са 2 отделни div-а, като картите са в таблица. двата div-a са:

горния: без долна рамка и без заобляне на долен ляв и долен десен ръб

долния: без горна рамка и без закръгляне на горен десен и горен ляв ръб

марджин между двете: 0пх; и ВОАЛА cool

 

1
12/10/2014 13:41:04
v1ppers0nn avatar v1ppers0nn 234 Точки

ТОВА са и моите решения. След като ги направих, се сетих и за по-добри варианти, но когато направя 4-5 ще ги напиша на ново.

2
Filkolev avatar Filkolev 4482 Точки

На 2-ра задача мисля, че идеята е всичко да е във фона (с изключение на текста). Т.е. всички картинки да са бекграунд, барбар с градиент за небето.

На 1-ва задача ми се струва по-лесно четворната рамка да се направи с box-shadow, отколкото да се правят 4 div-a с отделни рамки.

Иначе предполагам, че изглеждат добре нещата, но както установихме наскоро, добавката lang в head чупи превютата и не мога бързо да пусна превю да видя, не се зареждат CSS-ите.

0
v1ppers0nn avatar v1ppers0nn 234 Точки

Да, има по-бързи и лесни начини но се сетих след като ги направих... Това написах по-горе, като направя 4-5 ще ги напиша пак...

0
Petar_Belberov avatar Petar_Belberov 41 Точки

На 1-ва задача, как да направя горния жълт border с квадратчета. Няма такъв border-style...

0
a.angelov avatar a.angelov 1316 Точки

Това са просто големи точки :) 

Аз съм го направил така: border-top: 8px dotted #ffff00;

0
EBojilova avatar EBojilova 330 Точки

Имам въпрос за  Programmer Calculator.

Как да направя радио бутона, като е избран кръгчето да е 3д синьо, както е в заданието? Дифолтната стойност е плътна черна точка.

0
20/12/2015 13:24:53
idmitrov avatar idmitrov 55 Точки

Привет, надявам се това да ти помогне:

http://stackoverflow.com/questions/23167637/is-it-possible-to-change-the-color-of-selected-radio-buttons-center-circle

1
EBojilova avatar EBojilova 330 Точки

Стана :)

Благодаря за линка.

Имам още един въпрос- за да го направя кръгчето 3д използвам:

input[type='radio']:checked:before {
    background:blue;
    background: radial-gradient(circle at 3px 2px, white 1%,  blue 50%);
}

Но пак не е както  в заданието :)

Май там са използвали каринка?

0
idmitrov avatar idmitrov 55 Точки

Привет отново,

ами може да си поиграеш и с box-shadow на същият селектор.

Пример: 

box-shadow: 0 0 0.1rem 0.1rem #000;

Относно примера, по-скоро са снимали самият калкулатор как изглежда в Windows и са го качили като задание, идеята е да се концентрираш върху елементите на калкулатора, кой бутон как/къде да го позиционираш, навигацията горе и прочие :) честно казано това с радио бутона (цвят/визия)  най-вероятно не се е и изисква поне според мен..говоря само за радио естествено, останалите имат значение :)

Ако държиш на детайлите все пак, може да си поиграеш :) 

ето и аз се заиграх малко, но не чак толкова :P http://prntscr.com/9ghn9m

 

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