Атрактивно изглеждащите сайтове са, по свой начин, мини-шедьовър на епохата на интернет. Персонализирането може да бъде толкова лесно, колкото искате, колкото искате, варирайки от модифициране на темата на WordPress до разработването на външния вид на сайта от началото до края.

След това вероятно ще срещнете елементи, които ви харесват, и цветовете, които искате да използвате повторно във вашите собствени проекти. В тази статия ще ви покажем най-важното, за да получите уебсайтове, за да ви кажа всичко, което искате да знаете.

Какъв е цветът?

ColorZilla

Първоначално създаден за Firefox, ColorZilla се разпространява от Chrome и свързаните с него браузъри.

След инсталирането ще намерите допълнителен бутон в потребителския интерфейс и за двата браузъра. Този бутон ви дава възможност да разберете цвета на почти всичко онлайн. Вие бързо ще осъзнаете, че ColorZilla прави много повече от идентифициране на цветовете, тъй като включва и поддръжка на палитри.

Какъв е шрифтът?

WhatFont? (Chrome)

Строго погледнато, нямате нужда от WhatFont? разширение, за да разберете шрифта на уебсайт, но това е най-бързият начин да го направите. Алтернативата би била да се отвори стиловият лист и да се премине през него.

Инсталирайте WhatFont? и ще видите нова икона в потребителския интерфейс на браузъра си. Освен ако не рестартирате напълно браузъра, ще трябва да опресните страницата, в която искате да идентифицирате шрифтовете. След като направите това, кликнете върху бутона в браузъра си.

В горния десен ъгъл на уеб страницата трябва да се появи нов бутон, а когато натискате мишката върху текста, името на шрифта трябва да се показва. Щракването върху шрифта ще предостави допълнителна информация относно размера. Той също така ще идентифицира другите шрифтове в "стека", което е удобно, ако искате да видите какви алтернативи уеб разработчиците смятат за предназначения си шрифт.

Търсене на шрифтове (Firefox)

Едно изключително разширение на Firefox в същия дух като WhatFont на Chrome?

Инсталирайте разширението и ще имате нова опция в контекстното меню с десен бутон.

Когато намерите нещо, което искате да бъде идентифицирано, подчертайте го, а след това отваряйте опциите, които са на ваше разположение. "Анализ на селекцията" ще ви каже всичко, което някога сте искали да знаете.

Детайлите, които осигурява, не са нищо друго освен челюсти. Ако текстът е означен като "(стек)", той ще избере първия шрифт в стека, който сте инсталирали. Стъпките обикновено завършват с общ термин, като "sans-serif" в горния пример. В невероятното събитие, в което един от другите шрифтове в стека не е инсталиран, той ще се върне към стандартното sans-serif лице на вашата система.

Също така можете да персонализирате елементи чрез опцията "Регулиране елемент". След като разширението ви подкани да въведете семейство шрифтове, можете да отидете в дивата природа. В нашия пример сменихме почти всеки шрифт на Wikipedia с нещо различно, създавайки странното изображение, което се показва. Тези промени не са постоянни и изчезват, когато презаредите страницата.

"Замяна на шрифт (цели DOM)" ви позволява да променяте всяко копие на шрифт на страницата. Не е фен на Робото (който използваме като основен санс-сериф)? Маркирайте тази опция, кликнете върху "Roboto" от списъка с наличните шрифтове на страницата и въведете името на шрифта, който предпочитате да виждате. Отново, това не е постоянно, но ви позволява да играете с дизайна на любимите си уеб сайтове, дори и само временно.

Измерване на площадката

Ръководител на страница (Chrome)

- Един владетел? Наистина ли? Страницата владетел е екран владетел, който е малко по-различен от това как звучи. Всъщност напълно бихме разбрали и всеки първоначален скептицизъм.

Позициониране на проблемите в мрежата. Елементите на страницата трябва да бъдат разположени точно така, или не са толкова привлекателни, колкото биха могли да бъдат. Докато тази информация е особено езотерична, за да искаш да знаеш, Page Ruler го прави възможно.

Инсталирайте го като всяко друго разширение и ще имате още един бутон в потребителския интерфейс на браузъра си. Имайте предвид, че ще трябва да отворите уеб страница, за да опитате разширението - няма да можете да използвате една от вградените уеб страници на Chrome от съображения за сигурност.

Щом кликнете върху бутона, ще получите допълнителна ивица информация непосредствено под адресната лента и можете да използвате мишката, за да кликнете и изтеглете форма, чиито размери ще бъдат изчислени и показани по горепосочената лента, Освен това имате възможност да активирате или деактивирате мрежата, въпреки че тя може да ви помогне с точност.

Ако желаете, можете също да промените цвета на правоъгълника от синьото си по подразбиране. Независимо от избрания от вас цвят, той автоматично ще добави степен на прозрачност, така че да можете да видите съдържанието под него.

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

MeasureIt (Firefox и Chrome)

MeasureIt прави същата задача като Page Ruler и е достъпна както за Firefox, така и за Chrome.

След като инсталирате, щракнете върху бутона и ще можете да кликнете и плъзнете, за да създадете правоъгълник. Наред с правоъгълника ще има брой пиксели, което означава, че можете да получите точни измервания за позициониране.

Ако се притеснявате за правилното измерване само с мишка, можете да регулирате размера на маркираната зона с помощта на клавишите със стрелки, правейки точността много по-лесно, отколкото звучи. Предлагаме да проверите опцията "Площ" в настройките; това не променя начина, по който работи софтуерът и просто ви дава представа за района, който правоъгълникът, който сте изготвили, заема.

Обзалагаме се, че ще бъдете изненадани, когато видите колко пиксела се показват на екрана и района, който те съставят, когато са маркирани. Ако не друго, то определено трябва да постави термина "екран недвижими имоти" в перспектива.

заключение

Отнема известно време, за да получите най-доброто от тези разширения, но те дават известна информация в рамките на лесен достъп. Ще се сблъскате бързо с тях, но ако за вас е трудно да замените шрифтовете, не забравяйте, че имената трябва да са точни. "Comic Sans" няма да работи, докато "Comic Sans MS" (както се появява в Office) ще бъде.

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