Категорії — вниз

Шаблон

У цьому шаблоні було втілено ідею трохи змінити розташування деяких елементів. А саме — розташувати категорії блога внизу сторінки.

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

Робимо банер

Сьогодні я покажу, як зробити банер за допомогою виключно HTML і CSS — без використання графічних зображень. Подивіться, як можна вирішити проблему власного банера лише за допомогою кодування:

ВчимоCSS БЛОГ
«Ідея від MandarinDesign» …

Нижче надаю код з поясненням, як це зробити:

Увага! Вставляючи такий код до замітки, ви маєте переключитися на простий редактор (не графічний).

Для цього потрібно тицьнути на посилання Налаштування редактора при редагуванні замітки.

 

CSS plus .png

Шаблон весняні сонечки

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

Хочу зауважити, що різниці ви побачите, якщо користуєтеся новими браузерами. Internet Explorer 7, Opera 9 і т. д.

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

 

BODY { background: #E8E8CE url(http://speedmastertest.blox.ua/resource/nasekom31.jpg) repeat-x fixed; }

І друге — це використання графічного формату png  для фонових зображень. Формат png було створено, як альтернативу для формату gif, який, хоч і "важить" (займає місця) набагато менше за png, але завдяки тому, що підтримує малу кількість кольорів, виглядає пласким і трохи недолугим. Для того, щоб ви побачили різницю, я зберегла один і той же малюнок у форматі png та у форматі gif. Подивіться і відчуйте різницю 🙂

 

 GIF  PNG
   

Крім охайного вигляду у формата  png є ще одна цікава опція — можливість зберігання напівпрозорих зображень. Саме таке зображення як фонове, було використано для мого нового шаблона. Щоправда, цю напівпрозорість зрозуміють не усі старі браузери. Але за моїми перевірками у нових версіях Опери, Інтернет Експлорера, Файрфокса та Хрома шаблон відображається коректно.

Виникає питання: чому раніше я не використовувала цей формат у своєму дизайнуванні на Блоксі? Насправді усе просто: зайчики у форматі png, наведені вище, важать ні багато ні мало — 119 Кб, а у минулому, коли можна було додавати файли, що не перевищують за розмірами 150 Кб, мені було важкувато підбирати потрібні малюнки. Тож раджу усім, хто ще вивчає CSS, спробувати застосувати ці дві можливості, про які я говорила. А для тих, хто просто хотів би скопіювати собі цей шаблон, повідомляю:

Клікніть на картинку у цьому блозі, знайдіть у шаблоні, що відкриється, кнопочку "Подобається мій блог? Копіюйте CSS", клацніть на ній, а потім оберіть, до якого блога слід скопіювати шаблон, якщо у вас їх декілька.

 

CSS.Псевдоелемент :first-line.

Псевдоелемент :first-line відповідає за формат першого рядка замітки, або за кожний перший рядок блога (залежно від розміщення у коді CSS). Про псевдоелементи, та як з ними працювати, читайте у попередній замітці.

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

 

 

 

 

 

 

Шаблон для кода, за допомогою якого ви швидко можете змінити перший рядок за власними вподобаннями:

.BlogEntryContent :first-line {font-size: 16px; font-family: Comic Sans MS; background-color: pink; color: violet;}

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