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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Благодаря!

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

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

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

github

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

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

03 Demo

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

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

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

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

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

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

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

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

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

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

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

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

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

Стана :)

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

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

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

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

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

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

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

Пример: 

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

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

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

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