Осъществяване текст CSS - как да го украсят добре

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

За сладък е препоръчително да използвате персонализиран бял фон (или малко по-тъмен) и цвета на шрифта, малко по-леко, отколкото черно. Фактът, че рязък контраст - това е много лошо, защото това може да се реже на очите.

Цвят в CSS посочени чрез свойства на цвят. Стойностите могат да бъдат написани под формата на ключови думи (бяло, кафяво, оранжево), шестнадесетичен шестнадесетичен код (# 000, #fff, #ccc) и режим RGB (червено, зелено, синьо), който се определя от насищането на всеки цвят в числова стойност 0-255.

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

Осъществяване текст CSS - как да го украсят добре

HTML5 и CSS3 практика от нула до резултата!

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

Изберете шрифта имот с помощта на шрифт семейство, както и името или стойността действа семейство. За да се подсигурите, че можете да записвате няколко опции, разделени със запетая. Например, тъй като: шрифт семейство: «Lato», Грузия, Arial, безсерифен;

Тук сме записали най-много четири варианта. Ако браузърът намира шрифта Lato, той ще бъде да го използвате. Ако той не е намерен, следващата уеб браузър се опитва да използва Грузия, и ако не е, тогава Arial. Този шрифт е, на всеки компютър с операционна система Windows.

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

Осъществяване текст CSS - как да го украсят добре

размер на шрифта

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

Някои елементи на HTML размер на текста се определя първоначално. Например, ако се приложат на текст в тага h1, той автоматично ще покаже в смели главни букви. Всъщност, можете лесно да променяте настройките по подразбиране:

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

сянка на текста

Всеки текст фрагмент, можете да укажете сянка от правило текст сянка. Нека да погледнем на синтаксиса в следния пример:

Осъществяване текст CSS - как да го украсят добре

HTML5 и CSS3 практика от нула до резултата!

Всички текстови фрагменти затворени в маркер педя, ще има сянка. Тя изглежда така:

Първият числената стойност определя хоризонталата офсет, а вторият - на вертикалното отместване, третият - размиването на сенките, тя намалява остротата си и насищане. Последният параметър - цвят.

Ако някои от вас не се налага ценности, просто казано 0. Цвят задължително записват. опции сянка зависят преди всичко от големината на шрифта - колкото по-голяма е тя, толкова повече можете да се компенсира.

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

множество сенки

Да, в CSS могат да бъдат разделени със запетаи, за да се определят няколко текстови сенки. Ето това е само важно да се помни следното правило: сенките, които са поставени в кода първо, да се припокриват тези, разположени на, така че всичко, което трябва да попитам sledyuschim сенки компенсира повече, за да ги видите на страницата.

Осъществяване текст CSS - как да го украсят добре

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

Осъществяване текст CSS - как да го украсят добре

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

Всички имоти

Осъществяване навъртам

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

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

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

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

Осъществяване текст CSS - как да го украсят добре

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма

Осъществяване текст CSS - как да го украсят добре

HTML5 и CSS3 практика от нула до резултата!