Висловлюючи IT

Інший швидкий урок. Ось те, просто і красиво, використовуючи силу CSS ... але було важко concieve (і це, звичайно, не мені), щоб почати с. Додавання DropShadow, може бути peice пирога для багатьох з нас, використовуючи деякі інструменти для редагування зображень, як Photoshop, Fireworks НФА та ін
Причина, чому я вибрала тіні за допомогою CSS є те, що, як правило, при створенні дизайну сторінки / HTML заяви, вимоги зберегти ітерації. Я маю на увазі, в існуючий веб-сайт з великою кількістю зображень, як ті, що відображає Freinds списку або галереї зображень, важко буде переробити увесь вантаж зображень, які вже були вивантажені, щоб додати або видалити тіні, для цього питання.
Так що якщо ви зробили трохи вперед мислення при створенні HTMLS додати ці додаткові підрозділи або правило, ситуація така, що у вас є цикл логіка створення цих ікон / мініатюр в XSL, PHP. JAVA або будь-який інший програми / скриптова мова, ви можете додати його в будь-який час, то це просто питання про шоу і приховати ці тіні за допомогою властивості CSS Display, відповідно до клієнтами постійно мінливих вимог ... Я havn't зробити цей вид далекоглядних до цього ... але ahev прямо зараз!

У наведеному нижче прикладі, вихідне зображення без тіней і dropshadows застосовуються в міру необхідності! Крім того, я пішов трохи більше, використовуючи прийоми з моїх попередніх Тута (Well! це, ймовірно, найкоротші різні навчальні матеріали, так що виправдано тільки називаючи їх "Тута" 'и) про використання CSS кліп власності на показати тільки

Початкове зображення

Результати CSS DropShadow

Переглянути демо | Завантажити файли вихідного коду

Чому я хочу, щоб це розуміти?? Хамм ...!!

Більшість письменників CSS погодяться, що CSS кліп власності, ймовірно, одним з найбільш невикористаних властивостей CSS. Це було так вірно і для мене і був найщасливіший нехтувати цим, поки я не почав зміни MooTools ДВА ручку (Pin) Slider Компонент (з Range Indicator) .

Існував хороша пропозиція від одного з компонентів користувачам змінювати Slider Компонент використанням обрізаний Довідковий зображення (у порівнянні зі змінною шириною поділ), щоб вказати повзунка діапазону. Таким чином, настав мій час, щоб увійти в задоволення, але не-статутних (для мене звичайно ж) води майна кліп CSS.

Ну! як важко це може бути? Не так багато на всіх ... ТАК і НІ. Синтаксис CSS власності Кліп досить прямій, але зміст / usuage трохи croocked. З пам'яттю, як у мене, кожен раз, коли я сиджу в переробку на мій Slider сценарій ... У мене є tokeep повертаючись до використання цього кліпу власності, щоб нагадати собі логіку, яку я створив в мій сценарій .... Звідси! думав пера його, в надії згадати його майбутнє (а також в інтересах тих, хто, здається Вражає власності кліпу CSS)

Що таке CSS кліп робити?

Кліп є частиною візуального модуля ефектів CSS 2.1. Простіше кажучи, його робота полягає в розміщенні видиме вікно у верхній частині об'єкта, який обрізається, тому обрізання зображень і створення мініатюр без створення додаткових файлів (я вже поставив цю можливість для більш ефективного використання в компоненті Slider )

Використовуючи властивість кліпу CSS, ви можете створити вирізку допомогою форми прямокутника. Як і багато інших властивостей CSS (наприклад, маржа, відступи і т.д.), використовуючи прямокутник, необхідно чотири координати Top, Right, Bottom, Left (TRBL). Croocked природа цієї властивості відображає, коли ви уважно подивитеся, як кліп обчислює область відсікання, використовуючи ці чотири координати (посилає мозок у жеребкуванні на деякий час). Тепер, щоб збити вас з пантелику нижньої починається зверху, а права починається з лівого боку. . Ви бачите, що я сказав? .... Таким чином, цей пост ...

Ця невелика плутанина може легко зникнути, з цим візуальним пояснення CSS Clip / прямокутник власності, як показано нижче!!

Вимоги CSS кліп

Завдання, яке ми почали це кліп на наступному зображенні Мініатюра на квадратний шукати зображення (а також ширококутні зображення)

Оригінальний Thumbnal / Image	Кліп Вимоги до Sqaure Thumbmail

Результати CSS кліп

Переглянути демо | Завантажити файли вихідного коду

Це питання мені в голову кілька разів, коли я працював на сайтах і раніше, в якому використовується, щоб показати WordPress блогів або новий вид контенту в деякі частини сайту / portal.Being новачок в PHP і навколо WordPress, я продовжував procastinating він, думаючи, що "це не моє peice пирога". Нарешті! Ця вимога вступило до мого носа, коли почалася Diggin навколо небагато для її вирішення.
Я був здивований, виявивши, що це дійсно було легше, ніж я на самом деле думав, що це було, щоб відобразити список заголовків або останнє повідомлення будь-яку іншу сторінку поза WordPress харчуванням розділ, використовуючи тільки трохи PHP і WordPress API .

Ось що потрібно зробити: -
З причин, пояснення, припустимо, що ваш сайт http://www.inchembur.com/ і у вас є розділ новин на цьому сайті на http://news.inchembur.com/ (який працює WordPress). Тепер вимога показати останнє повідомлення від http://news.inchembur.com/ на головній сторінці основного сайту, тобто http://www.inchembur.com/index.php

Крок 1: У вашому index.php додати наступну частину коду, включити файл WordPress API. Ви можете додати це у верхній частині сторінки ви хочете, щоб після з'явитися на.

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES, помилковий) / / Disbable використання теми WordPress
require ('/ var / news.inchembur.com / WP-блозі-header.php'); / / Включити WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Отримати Останнє повідомлення
>

У наведеному вище peice з включають в себе, ми отримуємо тільки одне останнє повідомлення. якщо ви хочете спробувати кілька варіантів, не соромтеся, щоб вирити в, query_posts() документації .

Крок 2: Тепер, в частині Головна / Головна сторінка, на якій ви хочете показати останні WordPress повідомлення від http://news.inchembur.com , використовуйте наступний код. Зрозуміло, не соромтеся оголошення стилю підрозділів, прольотів і класи відповідно до ваших потреб проекту.

Крок 3: Існує немає Крок 3 ... Thats, це ... все готово!

Як показують конкретні записи / сторінки, а не останнє повідомлення: -
Це легко реалізується за рахунок зміни аргументів query_posts() включити ідентифікатор сторінки або сторінки кулі

) ; query_posts ('page_id = 7');
) ; query_posts ("назва сторінки = о ');

або ви можете контролювати кількість повідомлень:
) ; query_posts (showposts = 3);

Іноді, щоб зберегти pageweight вниз ... ми розбили наші сценарії на фрагменти ... Ці фрагменти JavaScript може бути завантажений як і в разі необхідності (за подією або після натискання на посилання або кнопку і т.д.).

Завантаження Javascripts динамічно простий і досить прямо вперед, як показано нижче ...

= “text/javascript” > <Сценарій тип = "текст / JavaScript">
Функція loadNewScript (джерело) {
Var S = document.createElement ('сценарію');
s.setAttribute («типу», «текст / JavaScript");
s.setAttribute («SRC», джерело);
document.body.appendChild (и);
}
</ SCRIPT>

і ви можете за наступним посиланням виклику в будь-яку точку тіла, або ви можете мати цей сценарій "OnLoad" самого документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A HREF = "javascript: loadNewScript ('myDynamicScript.js');"> Load Динамічний сценарій </ a>

або

<body onload="loadNewScript('myDynamicScript.js');">

Якщо ви CSS людини, ви б знали, біль в отриманні макети робочих хрест-браузера. IE8 є ще одним ключем в роботі для нас розробники. Anywaz! якщо ви потрапили на це питання, як я зробив вчора, коли ваш прекрасно працює CSS в IE7 (і раніше) і Firefox раптом почали кидати істерики в IE8, спробуйте це ... Це добре, здавалося, виправити мої проблеми на даний момент ....

Використання мета декларації, ми можемо вказати рендеринга ми хотіли б використовувати IE8. Таким чином, щоб змусити IE8 надавати як IE7 ... вставте наступний мета-тег в голову документа: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

За замовчуванням IE Мета б: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
які зроблять IE8 зробити сторінку за допомогою нового режиму стандартів.

При необхідності, цей синтаксис може бути використаний для розміщення на інших браузерах, як показано нижче:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

БІЛЬШЕ ПРО ТИПИ ДОКУМЕНТІВ:

Якщо ви ще не знайомі з подібного тварини під назвою "Doctype" ... ось деякі швидко читати
Які ТИПИ ДОКУМЕНТІВ? Що таке браузер примхи і строгий режим?
Установка DOCTYPE в XSL

Для більш глибокого розуміння ТИПИ ДОКУМЕНТІВ, спробуйте відвідати ці посилання ...
A List Apart: Виправте ваш сайт з правого DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартів, вперед сумісності та IE8

Примітка: Хоча багато хто з нас, HTML / CSS люди були без урахування важливості DOCTYPE decleration в наших документах, Установка правою DOCTYPE, як правило, відповідь на самий хрест запитання оглядача.

Завдяки різноманітності Каруселі там багато для Mootools, а також, я все ж вирішив написати свій власний клас Карусель, деякі вагомі причини
1. Потрібні підкачки функцію (щоб мати можливість перейти зокрема слайд / крок в каруселі).
2. Потрібні волі з розміщенням кнопок вліво і вправо / зв'язку, де б я, будь ласка.
3. Більше контролю над Слайд кроки.

Мені вдалося створити нові каруселі, з урахуванням вищезазначених особливостей ... нижче ... Не соромтеся пропонувати будь-які зміни зажадають!

Мій приклад виглядає наступним чином ... [ Переглянути презентацію ]

Переглянути демо | Завантажити Mootools карусель з підкачкою версії 1.0 (Скачано 1984 раз)

1. Карусель пейджинга

Ви можете легко додати підкачки до каруселі, просто встановивши підкачки прапор, який є останнім parater пройшло при створенні екземпляра MooCarousel до істинної (хочу підкачки) або FALSE (виграш бажаючих підкачки).

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = кількість слайдів, SSS = слайд кроку

І звичайно ж ви можете змінити зовнішній вигляд-н-стиль цих підкачки achors як вам буде завгодно, змінюючи їх CSS.

. Carousel_paging {вирівнювання тексту: праворуч; поле: 5px 10px 0 0;}
. Carousel_paging струму, carousel_paging сторінки {контуру: немає; ширина: ... 15px висота: 15px; висота рядка: 15px; вирівнювання тексту: центр; дисплей: блок; float: left; фон: # D8D8EB; маржа: 0 1px 0 0; текст-оздоблення: немає;}

. Carousel_paging: наведіть, carousel_paging поточний {фон: # 4D4D9B, колір: # FFFFFF;} ..

Ну! є невелика проблема, хоча, підкачування якоря якщо встановлений, то він отримає породжених завжди після того, як карусель компонентів. Я хотів зробити його динамічним, як добре, але потім просто зберегти сценарій для видува пропорції, я вирішив пропустити його.
Але ви знаєте, трохи Javascript, ви можете легко змінити код підкачки покоління в MooCarousel класу порадувати своїх потреб.

2. Налаштування лівий і правий іконки

Ви можете змінити розміщення, зображення або будь-якого displat власності ліва і права кнопки просто граючи з CSS. щоб бути в змозі змінити розміщень лівої і правої buttoms була дійсна причина для мене, щоб права наших моя карусель класу.
Так як це MooCarousel класу, приймає ідентифікатори з цих кнопок, ви можете помістити ці кнопки в будь-якому місці сторінки, будь ласка ... це не повинно бути в ієрархії елементів, як у моєму прикладі.

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);

CSS
.. Carousel_container_l, carousel_container_r {маржа: 50px 0 0 0; позиція: відносна ширина: 23px висота: 20px; float: left; курсора: покажчик;}

. Carousel_container_r {фон-позиції: 0-38px;}

. Carousel_container_l {фон-позиції: 0-58px;}

3. Налаштування слайд кроки

Що я маю на увазі мій Налаштування КРОКИ SLIDE?
Більшість Каруселі ковзати з повним видимого вікна. Так кажуть у вас було чотири елементи (як в моєму прикладі вище), то буде ковзати всіма чотирма елементами. З цією каруселі компонент, Ви передаєте кількість слайдів і розмір кроку за вашим вибором.

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = кількість слайдів, c_sss = слайд кроку

Крім того, в моєму example1 я calcuted розмір слайда крок, засновані на логіці, де, я знаю, кількість предметів, шириною по кожному пункту, і поля, які дали після того, як кожен елемент в моєму CSS.

/ * Для гулянки 1 * /

УАГ c1_w = 92; / / гулянки товару Ширина

УАГ c1_n = 10; / / Загальна кількість товарів Порівняння гулянки

УАГ c1_pp = 4 / / Кількість Порівняння perpage гулянки товарів

УАГ c1_marginFactor = 51;

УАГ c1_sss = c1_w * c1_pp / / SSS = слайд кроку

УАГ c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = кількість слайдів

c1_sss + = c1_marginFactor / / SSS = слайд кроку, 51 полів

Вимоги: Mootools 1.2

Переглянути демо | Завантажити Mootools карусель з підкачкою версії 1.0 (Скачано 1984 раз)

MooRating простий (крос-браузер, звичайно, як він використовує владу бібліотеки MooTools), легкі і відмінно Mootools заснований рейтинг рішення. Це не називається, як "Зоряний Рейтинг", просто тому, що рейтинг зображення може бути, як ви виберете (я надав Зірки, бари і серця при завантаженні, але ви можете створити свій власний сорт і просто його).

Як це виглядає наступним чином:

	Рейтинг Mootools з різними зображеннями Переглянути демо
	Рейтинг Mootools з Відсоток значень Переглянути демо
	Рейтинг Mootools з дробовими значеннями Переглянути демо

Завантажити Mootols Категорія сценарій (Скачано 716 раз)

Оцінка даних: ціле число, десяткове або відсотках
В даний час сценарій призначений для демонстрації в рейтингу дані в цілому значення (1,2,3,4,5), в десяткових (1.24, 3.45 і т.д.) або у відсотках (12%, 55% і т.д.). Вибір для відображення даних в будь-якому із зазначених форматів може бути встановлений тільки шляхом зміни деяких значень прапора в JavaScript (moorating.js)
Є два електронних два прапори, щоб грати, для відображення значень в формат за вашим вибором ...

УАГ inpercent = false; / / Встановити прапор так, якщо вам потрібно процентні значення, яке буде відображатися
УАГ isFractional = False / / Встановити це вірно, якщо ви хочете дробові значення, як 1,24, 1,25, 4,56, а не 1,2 ... 5

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

якщо (isFractional) {якщо (х <= 5 | | х> = 0) moostartval [я] = InnerHtml FormatNumber (х, 3);.} / / 2 змінюється на 3
ще {moostartval [я] InnerHtml екскурсії, (х).

Оновлення Рейтинг Значення:
Я нету турбувати написання сценаріїв AJAX для поновлення Рейтинги значення, тому що я знаю зі свого досвіду, що не завжди роблять це наміру переглядати або оновлювати РЕЙТИНГ як тільки користувач щось ставок. Ви вільні робити все, що ви хочете з номінального значення, оновлення за допомогою AJAX або запропонувати його або встановити приховане значення поля форми, які будуть представлені з усією формою і т.д.

Функція updateRating (ID, рейтинг) {
/ / Сповіщення (ID + "," + рейтинг);
/ / Зробити щось з РЕЙТИНГ
}

Існує функція в JavaScript під назвою "updateRating". Ця функція була передана ідентифікатор Рейтинг Div, щоб визначити, які рейтинги (якщо є більше однієї оцінки на сторінці) був оновлений і значення рейтингу [updateRating (ID, рейтинг)]. Ви можете вибрати все, що ви хочете з цими цінностями, як я згадував раніше.

Рейтинг фотографії: зірки, серця, бари і все, що завгодно
Зміна рейтингу будь-якого з вищевказаних типів (зірки, серця і т.д.) дуже проста. Просто створіть зображення, схоже на вхідний в комплект поставки і помістіть його дюйма Пам'ятайте, якщо ви зміните ім'я образу, не внести необхідні зміни у файлі CSS, див нижче.

. Moostar {маржа: 0px; оббивка: 0px; переповнення: прихований, ширина: 84px висота: 20px; float: left; фон: URL ('stars.gif) повторите-х;}
. Moostar проміжок {float: left; краю: 0px; оббивка: 0px; дисплей: блок, ширина: 84px висота: 20px; текст-оздоблення: немає; текст-indent:-9000px, г-індекс: 20;}
.. Moostar вал {фон: URL ('stars.gif) залишив 25px;}

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

Вимоги: Mootools 1.2
Завантажити Mootols Категорія сценарій (Скачано 716 раз)

У Firefox ... іноді ви могли помітити, що курсор починає блимати на екрані. Це може статися при натисканні на будь-який елемент на сторінці, поділу або зображень і т.д. Це миготливий курсор у вікні браузера насправді ДОСТУПНОСТІ Особливість FireFox називається "каретка перегляду. Ця функція дозволяє / дозволяє користувачеві вибрати текст на сторінці за допомогою клавіатури (які ми зазвичай схильні робити з використанням нашого миші).

Ну! якщо ви хочете виграш цю функцію ... простим натисканням "F7" для перемикання його на помилковий і навпаки (якщо ви хочете, ON). Ви можете також ввести "про: конфігурації" в адресному рядку (типу "вставки" в поле фільтра) і просто двічі клацніть змінити опцію "accessibility.browsewithcaret" від "істинного" (поворот каретки переглядають ON) "помилковим »(поворот каретки переглядають OFF)

Я шукав подвійний покладали слайдер (слайдер з двома ручками, мінімальні та максимальні) з використанням MooTools. Хоча, я знайшов кілька добре зробили подвійний слайдер покладали на форумі MooTools, єдиною проблемою було те, що всі ці повзунки вм'ятина є обраний маркер діапазону. Нарешті! Я вирішив створити свій власний. Ну! Я використовувати вихідний код і змінити його, щоб мати повзунок тло вказує на вибраний діапазон візуально, як у моєму прикладі. СИНІЙ області вказує на діапазон вартості обраної.

Перегляд версії 2.2 Demo | Завантажити Mootools двомісні ВАЖЛИВО Slider версії 2.2 (Скачано 11572 раз)

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

Ви напишіть мені коментар, якщо ви знайдете її корисною.

Перш, ніж ми мали справу з CSS для створення макетів сторінок нашого, поєднавши частину вмісту всередині комірки таблиці, здавалося, гра просто дитини. Просто встановіть "align" або "VALIGN" властивість таблиці мають вирівнювання по вашим вибором, шматок пирога!
З макети CSS, хоча у нас є "вертикального вирівнювання" властивості елементів, вона не здається такою простою, як «вирівнювання» або «VALIGN" властивості. Щоб бути більш specifiic "вертикального вирівнювання" ніколи, здається, вирішити будь-які ваші проблеми, особливо якщо будуть писати шматок крос-браузерні CSS.

Без використання таблиць HTML, завдання центрування на об'єкт, будь то зображення або текст, що містить усередині підрозділи, ймовірно, було кожного UI / CSS розробники кошмар якийсь момент. Ця проблема подальшого екстраполює ваші турботи узгодження, якщо об'єкт по центру динамічний характер, тобто, коли його висота змінні (невідомі висоти).

Незважаючи на відсутність відомих прямим рішенням, яке буде працювати по всьому спектру браузерів ми маємо справу з того, що рішення, яке я намагався прийти до дійсно схоже на роботу в декількох браузерах, які я пробував в (IE6, IE 7 , FF).

РІШЕННЯ:
В браузерах Mozilla, Opera і Safari, дивну поведінку "вертикального вирівнювання" майно може бути доведена до його почуттів, просто встановивши "дисплей" майном містять поділ на «клітинки таблиці" (дисплей: осередки таблиці) .

Проблема залишається з IE браузерів сімейства, який, проте, схоже, не розуміють, що з "елементи таблиці" майно і невігласи, як вони є, вони просто ігнорують його. Рішення наводиться нижче, хоча простий, оголошення кількох DOM елементів в HTML, щоб все відбулося.

CSS і HTML виглядає наступним чином
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> виробника <br/> переглядів: 3456 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити вихідних файлів (Скачано 450 раз)

TOP краю CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> виробника <br/> переглядів: 1234 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

НИЖНІЙ краю CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> виробника <br/> переглядів: 1234 </ div>
</ Div>
</ Div>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити тут

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

З надією, що коли-небудь

• вертикальне вирівнювання власності в CSS буде працювати, як це робиться у клітинці таблиці, без того, щоб бити багато навкруги
• По крайней мере, встановлення різниці-топ: авто і різниці-дно: авто, як дасть той же результат, з краю лівого і правого краю набору для автоматичного
• Браузер війни буде над деякими день.
• Там буде тільки один браузер для ВСІХ.

Завантажити CSS і HTML вищевказаних рішень тут (Скачано 450 раз) .. для зрозумілості, CSS не оптимізована

PS: І, до речі, ті ескізи деяких фотографіях я клацнув ...