Уроки

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

Доброго дня всім!Сьогодні я хочу розповісти і показати на прикладі, як з допомогою JQuery створити просту і функціональну форму «входу» з можливістю перемикання на форму «реєстрації» і «відновлення пароля».

Присвятивши у свій час розгорнуту статтю стилів оформлення панелі посторінкової навігації. Вирішив поекспериментувати і з допомогою нових властивостей CSS3, додати округлості цифрових кнопок пагинации, а точніше зробити їх зовсім круглими.Використовуючи виключно кошти CSS3, без підключення додаткових фонових зображень, вийшов досить не поганий результат: Начебто все вийшло більш ніж чудово, ан ні, чорта з два, всю загальну картинку, як завжди нахабно і в збоченій формі, зламав все той же ІЕшка.

Наочний приклад того, як можна організувати перегляд відео в модальному блоці, виключно засобами CSS3, без javascript і додаткових зображень в оформленні. За основу взяв модальний на чистому CSS, кардинально нічого міняти не став, хіба що видозмінив кнопку закриття, ефект появи і фоновою заливку.Для гумового макета модального блоку використовував ширину %.

Всім доброго дня чи ночі!Раніше ми докладно розглянули спосіб створення чудового модального вікна за допомогою CSS і jQuery. Навчилися розширювати, за потреби, функціонал нашого спливаючого віконця, використовуючи його для подачі різної інформації, будь то динамічний ротатор контенту , або вбудована форма зворотного звязку.Сьогодні хочу розповісти, як просто і легко вбудувати будь відеоролик в модальне вікно.

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

Всім доброго часу доби! Контактна форма дуже важливий елемент будь-якого сайту або блогу. Дивно, що оформлення форм зворотного звязку не приділяється належної уваги, за рідкісним винятком, це стандартний набір полів введення, обрамлені куцій рамкою і банальна кнопка «Відправити».

Створити кнопки для сайту можна, використовуючи будь-який графічний редактор ( Photoshop, Paint.Net, Gimp та ін), можна, не особливо заморочуючись з приводу вивчення властивостей CSS, скористатися спеціальними генераторами кнопок, благо таких інструментів випущено предостатньо останнім часом. Мене більше приваблює можливість використання нових стандартів CSS3 при створенні різних елементів дизайну сучасних сайтів, в тому числі і можливість створення чудових кнопок без фонових зображень, виключно з допомогою властивостей CSS3.

Продовжуючи серію статей про різні види меню для сайту, сьогодні хочу звернути увагу всіх стражденних, на відмінну горизонтальне меню навігації, виконане в стилі Lava-Lamp. Що це за стиль такий, розписувати не буду, кому раптом стане цікаво, можуть почитати про нього у високоповажних буржуїнів: lava-lamp style. Ми ж з Вами розглянемо сам спосіб створення такого меню, як говоритися, розкладемо все по поличках. Перш ніж почати опис структури меню, мабуть не зайвим буде поглянути на нього в дії:ДемоСкачатьВідразу хочу сказати, що найкраще таке меню виглядає в браузерах С?гоме і Firefox.Для побудови меню ми будемо використовувати всю міць бібліотеки JavaScript, jQuery .

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

В черговий раз звертаюся до теми створення модальних(спливаючих вікон. Останнім часом мене все більше цікавлять, різні техніки виконання спливаючих вікон, без використання javascript, плагінів jQuery і т.

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

Різними блоками, менюшками виконаних у стилі «акордеон», зараз вже нікого не здивуєш. Пропонується маса цікавих рішень і технік виконання, як з використанням jQuery, так і заснованих виключно на CSS. Сьогодні хочу познайомити вас з ще одним варіантом компактного, вертикального меню в стилі «акордеон», яке відмінно впишеться в бічну колонку будь-якого сайту.

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

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

Всім доброго часу доби! В продовження теми про створення контактної форми, сьогодні хочу розповісти, про простому способі інтеграції цієї самої форми модальне вікно, тим самим надати чудову можливість вашим читачам надсилати повідомлення з будь-якої сторінки, або окремого запису сайту (блогу).Оновлено: 31.10.2014У нас є цілком пристойна контактна форма, зверстана на чистому css, як закрити працездатне модальне вікно, ми теж розібралися, тепер залишається ці два механізму обєднати в єдиний інструмент.

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

Майже два роки минуло з моменту написання статті присвяченій цікавому способом реалізації lightbox-ефекту при перегляді повно-розмірних зображень, без підключення до роботи javascript, виключно з допомогою властивостей CSS3.Час не стоїть на місці, стандарти, вимоги веб-розробки і дизайну змінюються, прийшов час трохи підкоригувати деякі властивості ефекту, додавши до нього нові функції. За великим рахунком нічого особливо міняти не довелося, хіба що підключив трохи більш плавну трансформацію при прояві картинок, та додав правила @media для різних типів пристроїв, адаптивний дизайн бачите нині в моді...Отже, для початку, як завжди можете подивитися на ефект у справі, поізменять розміри вікна браузера, поглянути на сирці, а потім більш детально розберемо деякі деталі. Відразу хочу відзначити, що коректно і у повному обсязі даний метод працює в браузерах що підтримують псевдоклас :target(на ньому власне весь ефект і заснований) це Firefox 1.0+, Chrome 1.0+, Opera 9.6+, Safari 3.0+ і Internet Explorer 9.0+, користувачі щільно підсіли на IE 8, на жаль нічого не побачать.ДемоСпочатку, для приховування і появи картинок повного розміру використовував властивості display:none і display:block, але у такому разі картинки проявлялися миттєво без будь-якої затримки.

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

Продовжуючи вивчення і шалений вгризання у всі премудрості використання технік CSS, часто експериментую з створенням різних видів навігаційних меню. Іноді за основу береться вже існуюча структура вподобаного рішення і методом проб і помилок, привноситься щось нове в стиль оформлення, а можливості CSS часом, здаються воістину безмежні. Зокрема сьогодні, хочу розповісти ще про один чудовому способі створення меню з випадаючим меню, без будь-яких javascript, застосовуючи в роботі виключно властивості CSS. Ідею і структуру самого блоку меню, як це часто буває, подав закордонний товариш і напевно хороший такий «буржуяка» Janko. Як кажуть, кому цікаво, дивіться оригінал там же.Ну, а ми зі своїм допитливим розумом і невгамовною фантазією, підемо трохи далі, раздербаним все і вся на складові, почаклуємо над стилем, додамо нових властивостей, і в підсумку отримаємо ось таке чудове меню для сайту: Мені подобається, коли меню веде себе як списки, що розкриваються.