Урок 9: Додаємо новорічну аватару :)

Сьогодні цей блог трохи змінився — я поставила до нього святкову аватарку 🙂 А зараз навчу і вас, як це зробити 🙂

Спочатку йдемо за цим посиланням: http://novogodnee.com/

…і робимо собі новорічну аватарку.

Потім відкриваємо CSS свого блога, знаходимо такий селектор:

#BlogEntryPublishDate

Дописуємо до нього рядки коду:

background-image: url(Сюди треба вставити посилання, яке ви отримали після створення аватарки); background-repeat: no-repeat;

background-position: right;

height: 100px; — Якщо ви створювали аватарку з іншою висотою, аніж 100 пікселів, введіть потрібну цифру.

Поздоровляю з Новорічними Святами і бажаю успіхів не тільки в CSS, а й в усіх інших проявах вашого життя 🙂

 

P.S.: Дякую Славі за посилання на конструктор аватарок 🙂

CSS.Урок 8 — Шрифт I

Сьогодні ми поговоримо о різних властивостях шрифтів. Це достатньо велика тема, тому я розіб’ю її на два уроки.

Можливо, ви міркуєте змінити шрифти блогу на якісь незвичні, але такі, що дуже вам подобаються.  Для цього слід знайти такі рядки коду:

BODY {
FONT-SIZE: 14px; 

BACKGROUND: #620004;  
MARGIN: 0px; 
COLOR: #505050; 
FONT-FAMILY: Times New Roman CE, Times New Roman;
TEXT-ALIGN: center;
}

Як бачите, у тега  FONT-FAMILY:, що відповідає за шрифт, яким ви користуєтесь, цілих два значення. А може бути і до трьох. Це зроблено тому, що у іншого інтернет-користувача може не бути встановлено якого-небудь нестандартного шрифту. Якщо система не знайде першого прописаного шрифту, вона буде використовувати другий, не буде другого — тоді третій, який зазвичай встановлюється константою яку має кожний браузер. Ось таким чином, наприклад:

 

FONT-FAMILY: Comic Sans MS, Impact, serif;

Тож шукайте найулюбленіші шрифти і прописуйте їх у коді CSS блога 🙂

Встановлення наіменування шрифта здійснюється за допомогою однієї з двох властивостей:

 

font-family — встановлення найменування шрифта;

font — встановлення будь-якого параметра шрифта, у тому числі і його найменування (фактично повторює використання властивості  font-family, але при цьому дозволяє одночасно встановити і інші параметри).

Коли шрифт обрано, виникає питання про його розміри. Розмір ми можемо встановити за допомогою таких властивостей:

font-size

font

Значення розміру шрифта частіше за все вказується у пікселях або у пунктах:

font-size: 10px;

font-size: 30pt;

Іноді також додається процентне співвідношення:

font-size: 150%;

Відмінності написання коду між властивостями font та ін.:

 

1 варіант:

FONT-FAMILY: Comic Sans MS, Impact, serif;

font-size: 30pt;

 

2 варіант:

font: 30pt serif;

Бажаю вдалих експериментів!

 

 

CSS. Малюємо :)

За допомогою CSS виявляється, можна навіть малювати! Наприклад, Гомера Сімпсона:

 

 

 

Або ще когось з його сім’ї з таким самим успіхом. У моєму блозі ви бачите скріншот малюнку, а з оригіналом можна познайомитися за цим посиланням:

http://www.romancortes.com/blog/homer-css/

 

Бажаю усім гарного настрою! 🙂

 

CSS.Урок 7 — Фонове зображення

У попередніх уроках ми навчилися змінювати фон блогу та позиціонувати різноманітні об’єкти. Вважаю, прийшов час більш детально торкнутися теми фонових зображень і розміщення зображень дизайну  блога взагалі.

Як можна побачити з зображення цього шаблону, на тлі блогу було розміщено у лівому нижньому куту тільки одну картинку. Крім того, що фонове зображення може не помножуватися на усе тло, ми маємо змогу розміщувати його де побажаємо, та робити стільки копій, скільки побажаємо.

Отож, розказую по порядку.

У блоці BODY знаходимо такі властивості:

BACKGROUND-COLOR: white; — фоновий колір, оберіть той. який підходить для дизайну. Докладніше про колір можна дізнатися у попередніх уроках.

background-image: url(http://photostory.blox.ua/resource/fotostar1.gif); — адреса вашої фонової картинки

background-repeat: — додаємо, коли хочемо визначити, скільки разів буде повторюватися картинка на тлі блогу:

no-repeat; — ставимо, якщо не хочемо, щоб зображення повторювалося

repeat-x; — зображення буде повторюватись по горизонталі

repeat-y; — зображення буде повторюватися по вертикалі.

Якщо взагалі не вказувати властивості background-repeat, зображення розмножиться по усьому тлі блогу.

background-position: — позиціонування фонового зображення. Докладніше розібратися з розмірами та позиціонуванням допоможе мій попередній урок. Використовується разом з такими значеннями: left, center, right, top, bottom.

Властивості  background-position-х та background-position-у дозволяють окремо задати начальні позиції зображення по вертикалі та горизонталі.

Крім того, ви можете використовувати властивості стилів background-position разом з відносними значеннями у процентах. Наприклад:

background-position: 50%;

background-position: 0 30%;

background-position: 25 0%;

Або з абсолютними значеннями у пікселях:

background-position: 75px 50px;

 

Експериментуйте, і не забувайте ділитися своїми успіхами 🙂

CSS.Урок 6: Позиціонування

Позиціонування – один з найважливіших елементів CSS. За допомогою позиціонування ми вказуємо точне місцезнаходження кожного блоку або елементу у вікні браузера.

Прикладом для вправ знов буде шаблон Theme G. У четвертому уроці ми вже трохи займалися позиціонуванням, звужуючи блоки сторінки. 

Почну з невеликого теоретичного вступу, а саме з поняття якоря. У кожного слово «якір» асоціюється з морем, рибалкою, озером, але у першу чергу з човном, який завдяки цьому якорю не зносить течією з обраного для стоянки місця. Схожу функцію виконує якір і у CSS. За його допомогою встановлюється фіксована відстань між краєм елементу розмітки і краєм її батьківського елементу (вікном браузеру, наприклад). Якщо змінити розмір вікна браузера, автоматично зміниться і розмір заякореного елементу, але встановлена відстань залишиться тою ж самою.

Якір можна встановити як тільки для одної сторони елементу, так і для усіх чотирьох, у будь-якій комбінації.

Перша (стартова) позиція елементу задається комбінацією властивостей Left – ліво і Top – згори

Тобто, за допомогою верхнього лівого кута батьківського елементу, яким частіше за все виступає браузер. Якщо ніяких додаткових властивостей вказано не буде, блок або зображення будуть прив’язані (заякорені) тільки до верхнього лівого кута і автоматично наберуть своїх власних розмірів. Якщо додатково додати якір скажімо, на усі чотири кути блоку, його розмір буде змінено залежно від заданих нами координат.

Ось список властивостей, які ми можемо використовувати у роботі:

Top – встановлює відстань для заданого елементу у верхньому краю батьківської розмітки. Може використовуватися тільки спільно з властивістю рosition, та зазвичай разом з властивістю left. Відстані частіше за все вказуються у пікселях, але іноді можуть бути у пунктах.

Left – задає відстань між лівим краєм батьківського елементу (браузер) і елементом, з яким ми працюємо.

Right – задає відстань між правим краєм батьківського елементу (браузер) і елементом, з яким ми працюємо.

Bottom – задає відстань між нижнім краєм батьківського елементу (браузер) і елементом, з яким ми працюємо.

А тепер трохи практики:

1. Відкрийте CSS свого блогу і знайдіть властивості margin-left та PADDING-TOP для селектору BODY. У шаблоні Theme G вони мають такі значення:

margin-left: 0px;
PADDING-TOP: 0px;

Змініть відстань на 100 пікселів, і подивіться, як блог поїхав униз та вправо стосовно свого батьківського елементу – браузеру.

Відновіть вигляд блога.

2. Тепер давайте поекспериментуємо з іншим елементом шаблону, а тобто назвою блогу — #BlogTitleText, для якої батьківським елементом виступає шапка блогу. Змініть значення властивостей PADDING-LEFT і PADDING-BOTTOM для #BlogTitleText на 25 та 50 пікселів. За допомогою простих розрахунків ви тепер можете розташувати назву блога у будь-якому місці шапки  🙂

За допомогою цього нескладного прикладу я сподіваюся, ви зможете легко змінити розміри будь-якого блоку у своєму блозі, а також розташування текстів і лінків. Тепер ми готові до наступного уроку, у якому будемо розташовувати фонові зображення у різних місцях сторінки.

CSS.Урок 5.Фон блога

 

Сьогодні ми з вами поговоримо про те, як змінити колір фону свого блога. Придивіться до коду доступних шаблонів уважніше. У деяких з них окрім кольору фону також присутнє фонове зображення, яке ми можемо відредагувати, або замінити. Якщо одночасно у CSS коді задати і фонове зображення і колір, користувач побачить тільки фонове зображення. Звістно, якщо у налаштуваннях браузеру не увімкнено опцію, яка не дозволяє передивлятися картинки.

Встановити колір фону можна за допомогою таких властивостей:

Background-color — установка фонового кольору.

Background — установка будь-яких параметрів фону, у тому числі і кольору.

Вackground-image — установка малюнка до фону.

Значення кольору фону встановлюється у форматі RGB або за допомогою констант кольору, які складаються з 6 символів, якими можуть бути цифри або літери. Якщо встановлюється достатньо поширений колір — чорний чи жовтий наприклад, ми можемо зазначити його назву у коді англійською мовою. Визначити колір, який має пасувати до вашого блога, можна за цим посиланням:

http://www.colorschemer.com/online.html

Давайте спробуємо змінити колір фону у шаблоні Theme G. На початку коду CSS знайдіть рядок, який я виділила чорним:

BODY {

margin-left: 0px; margin-right: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; COLOR: lime; PADDING-TOP: 0px; FONT-FAMILY:»Courier New», Courier, monospace; BACKGROUND-COLOR: black; TEXT-ALIGN: left;     margin-top:0px !important;

}

Змініть колір у цьому рядку на будь-який інший за допомогою онлайн-таблиці, лінк на яку було надано вище. Подивіться на результат.


Тепер трохи ускладнимо нашу задачу, вставивши фонове зображення. Спочатку ви можете спробувати встановити у якості зображення мій малюнок. Для цього після строки BACKGROUND-COLOR: black; вставте такий код:

background-image: url(http://photostory.blox.ua/resource/img04.jpg);

У скобках може бути шлях до вашого власного малюнка, що було збережено у вкладинці «Файли» редагування блогу.

Тепер вам буде легко розробити власні бекграунди, якщо ви знайомі з основами комп’ютерної графіки, або знайти багато цікавих текстур для блогу у інтернеті. За цим посиланням, наприклад.

http://d3dworks.narod.ru/textures.htm

Мабуть ви запримітили, що після вставки фонове зображення копіюється і заповнює своїми копіями увесь фон сторінки. А що робити, якщо ми хочемо мати тільки одну або декілька копій, розташованих у спеціально обраних для цього місцях? Для таких моментів, та ще для багатьох інших елементів дизайну CSS нам потрібно вивчити основи позиціонування. Цим ми займемося на наступному уроці.

Опис основних селекторів Блокса

 

Викладаю позачергову замітку з основними селекторами, які використовуються у CSS блоксоблогів:

#BlogMainBox — відповідає за все «тіло» блога разом з його шапкою. Тут можна передбачити ширину блога.

#BlogTitleBox — відповідає за поле із назвою та описом блога

#BlogBodyBox — блок з нашими замітками, всередині нього знаходяться широка та вузька шпальти блога.

#Footer — нижній блок, що органічно завершує дизайн сторінки.

#BlogTitleText — відповідає за вигляд назви вашого блога.

#BlogTitleDescription — відповідає за вигляд опису блога, якщо увімкнена опція його відображення під назвою.

#BlogNarrowColumn — вузька колонка (зазвичай знаходиться з лівої або з правої сторони від ваших заміток), може вміщати архів, посилання і таке інше.

#BlogWideColumn — широка колонка з вашими замітками.

#BlogCategories — відповідає за вигляд категорій блога (такі закладинки над замітками).

#BlogRss — вигляд посилання на rss блога.

#BlogLinksBox — відповідає за розміщення та вигляд посилань у вузькій колонці.

#ShareCss — кнопочка, що дозволяє зтягувати CSS вашого блога.

#BlogCalendarBox — змінюємо вигляд календаря.

#BookmarksTitle — закладинки.

#ArchiveTitle — вигляд архіву.

#BlogAuthorsTitle — автор(и) блога.

#BlogTitleBoxLastEntries — вигляд блоку з вашими останніми замітками (всередині вузької шпальти).

#BlogSearchForm — форма пошуку.

 

BlogEntryContent — відповідає за вигляд заміток

 

Селектори, наведені нижче, відповідають за вигляд, коли ви з головної сторінки блога переходите на сторінку з будь-якою заміткою. Скопіюйте до них вже готовий зміст основних селекторів, щоб марно не повторювати введення одного й того ж самого коду. Наприклад, у вас вже є готовий цсс-код для вузької колонки (BlogNarrowColumn), копіюйте його до відкоментованої вузької колонки (CommentNarrowColumn):

#CommentBox -відкоментована широка шпальта блога

CommentNarrowColumn — відкоментована вузька шпальта

CommentedEntryTitle — відкоментована назва замітки

CommentedEntryContent — відкоментований зміст замітки

Деякі з цих селекторів ви можете не знайти у своєму шаблоні, бо шаблони сильно відрізняються один від одного. Або можуть бути і ще якісь, яких я не перерахувала.

Наступний урок буде присвячено зміні фонового зображення вашого блога та деяким вправам з піксель-арту 🙂

 

CSS.Урок 4 — Блоки

 

В основі кожного елементу розмітки HTML закладено поняття блоку — прямокутної області, у якій будуть знаходитися елементи розмітки. Під кожне зображення або текстовий блок у документі виділяється прямокутна площина. Це стосується і ефекту заокруглення кутів за допомогою невеличких зображень:

Аналогічного ефекту згодом можна буде отримати за допомогою тега border-radius, але поки що на жаль, цей тег (як і багато інших нововведених) підтримується не усіма браузерами. Тому будемо користуватися малюнками 🙂

Розмір кожного елементу або блоку встановлюється за допомогою двох тегів:

Width — відповідає за розмір елементу по горизонталі

Height — відповідає за розмір елементу по вертикалі.

Значення цих властивостей зазвичай вказується у пікселях або процентах. Якщо ви вкажете значення у процентах, їх розмір буде вираховуватися відносно розміру вікна браузера.

Давайте трохи потренуємося.

Відкрийте CSS свого блогу, та знайдіть такі блоки:

#BlogMainBox — відповідає за все «тіло» блога, тут можна передбачити ширину блога.

#BlogTitleBox — відповідає за поле із назвою і описом блога

#BlogBodyBox — блок з нашими замітками

#Footer — нижній блок, що органічно завершує дизайн сторінки.

Це варто запам’ятати, бо найчастіше змінювати ми будемо саме їх 🙂

Увага! У кожного з нас встановлені різні шаблони, тому деякі елементи можуть сильно відрізнятися один від одного. Я пропоную на час вправи змінювати шаблон на такий, з яким працювала я, і тренуватися на ньому. Потім буде достатньо легко примінити нові знання для свого власного шаблону. Цього разу я користувалася шаблоном Rin.

Спробуємо його звузити. За допомогою комбінації клавіш CTRL+F знаходимо такі селектори і змінюємо значення width на ті, що я надала біля кожного селектора:

#BlogMainBox — 600

#SuperScript — 600

#BlogTitleBox — 600

#BlogBodyBox  — 580

#Footer  — 602

#BlogWideColumn — 380

#BlogCategories — 380

Як бачите, властивість width для селекторів #BlogWideColumn та #BlogCategories не по 600 пікселів, а по 380. Це тому, що блок #BlogBodyBox ділиться на 2 блоки: #BlogWideColumn шириною у 380 пікселів, та #BlogNarrowColumn шириною 200 пікселів.

За допомогою цього прикладу ви можете звузити або розширити свій блог за власними побажаннями. Головне правило — не боятися експериментувати:)

CSS.Урок 3. CSS блогу

 

Ви можете надати будь-якого вигляду своєму блогу, просто змінюючи його CSS шаблон. Наприклад, блог з цими уроками використовує відозмінений стандартний шаблон «Кубрік», так само, як і блог за цим посиланням:  http://www.sometales.blox.ua/html

Якщо повністю стерти код CSS з шаблону, залишивши тільки селектори, ваш блог набере такого вигляду:

CSS - пустий код

Як бачите, на цьому білому тлі простір для фантазій — необмежений )

Ось повний код такої заготівки:

 

BODY {}

BODY A {}

BODY A:hover {}

 

#SelectedCategoryTitle h3 {margin-bottom: 0px}

 

#BlogMainBox {}

#SuperScript {}

#BlogTitleBox {}

#BlogTitleDescription {}

#BlogTitleText h1 A {}

#BlogTitleText A {}

#BlogTitleText A:hover {}

#BlogBodyBox {}

#Footer {}

#BlogNarrowColumn {}

#BlogWideColumn {}

#BlogWideColumn A {}

#BlogWideColumn A:hover {}

#BlogCategoriesBox {}

#BlogCategoriesBox A {}

#BlogCategories {}

#BlogRss {}

.BlogEntryItemTitle {}

.CommentedEntryTitle h2 {}

 

.CommentedEntryContent {}

.CommentedEntryLead {}

.BlogEntryContent {}

DIV.BlogEntryItemTitle A {}

.BlogEntryPublishDate {}

.BlogEntryBox {}

.BlogEntryInfo {}

.InfoUserCommCommentedEntry {}

#CommentRecommendEntryBlock {}

.InfoUserCommUnderText A {}

#BlogLinksBox {}

#BlogLinksBox A {}

#ShareCss {}

#BlogLinksBox A:hover {}

#BlogCalendarBox {}

TABLE.Calendar {}

TD.Month {}

TD.Month A {}

TD.Month A:hover {}

TD.DayOfWeek {}

TD.DayOfMonth {}

TD.DayOfMonth A {}

TD.DayOfMonth A:hover {}

#BlogBookmarkBox {}

#BlogArchiveBox {}

#ArchiveTitle {}

.ArchiveItem {}

.ArchiveItem A {}

.ArchiveItem A:hover {}

#BlogBookmarkBox {}

#BookmarksTitle {}

.BookmarkFolderTitle {}

#BookmarksItems {}

#BookmarksTitle {}

.BookmarkFolderTitle {}

.BookmarkTreeLevel {}

.BookmarkEtiquette {}

.BookmarkEtiquette A {}

.BookmarkEtiquette A:hover {}

#CommentNarrowColumn {}

#CommentBoxLabel {}

#CommentBoxLabel A {}

#CommentBoxLabel A:hover {}

.CommentSystemMessage {}

DIV#CommentKeys {}

DIV#CommentKeys INPUT {}

#BlogSearchForm {}

#BlogSearch {}

DIV#BlogSearchText INPUT {}

DIV#BlogSearchButton INPUT {}

.CommentError {}

#CommentInputAuthor {}

#CommentInputPassword {}

#CommentURL {}

#CommentSystemMessage {}

#BlogTitlesLastEntries, #BlogAuthorsBox {}

#BlogTitlesLastEntries ul, #BlogAuthorsBox ul {}

#BlogTitlesLastEntries li, #BlogAuthorsBox li {}

#BlogTitleBoxLastEntries, #BlogAuthorsTitle {}

#BlogTitlesLastEntries li a, #BlogAuthorsBox li a {}

#BlogTitlesLastEntries li a:hover, #BlogAuthorsBox li a {}

.InfoUserCommAuthor {}

.InfoUserCommDate {}

.InfoUserCommText {}

#CommentTextArea {}

 

#BlogPagingBox {}

div#BlogPagingBox table {}

td.BlogPagingPrevious {}

td.BlogPagingPage {}

td.BlogPagingNext {}

 

#CommentInputPassword input, #CommentURL input, #CommentInputAuthor input {}

#CommentInputAuthor input {}

#CommentURL input {}

 

div#Captcha img {}

div#Captcha {}

div#Captcha {}

 

div#CommentTrackbackList {}

div#CommentTrackBackListTitle {}

div#CommentTrackBackUrlInfo {}

DIV#CommentTrackBackUrlInfo textarea {}

div.InfoUserCommTBContent {}

div.InfoUserCommTBData {}

 

div#CommentCommentsListTitle {}

div#CommentCommentsList {}

 

img#ImgLogoSyndicate {}

div.InfoUnderEntryMore{}

 

#HtmlUserField {}

 

div.CommentAddCommentLink, div.CommentAddCommentLinkUnderList {}

 

/* navigation panel div */

.linksDiv {}

 

/* links of navigation panel */

.linksDiv a {}

 

/* navigation panel div */

.linksDivLight {}

 

/* links of navigation panel */

.linksDivLight a {}

 

У кожному наступному уроці я буду пояснювати окрему частину даного коду, поки ми не розберемо його повністю.

Скопіюйте його собі до будь-якого текстового редактору, а також скопіюйте сторінку зі свого блогу на жорсткий диск таким чином:

Файл>Зберегти як>Веб-сторінка повністю (не архівом). Знайдіть у папці збереженої веб-сторінки файл з кодом CSS. Тепер у нас підготовлено все для комфортної роботи з шаблоном  )