Створюємо спливаючу контактну форму для сайту

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

Вбудовуємо відео в модальний

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

Малюємо іконку календаря за допомогою CSS3

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

Вертикальне меню в стилі акордеон CSS і jQuery

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

Підказки до посилань з допомогою CSS

У сьогоднішній статті, продовжимо розгляд способів виведення підказки до посилань. На цей раз навчимося робити підказки до посилань, використовуючи тільки CSS. Знову ж таки як завжди, для перегляду того, що ми отримаємо в результаті ,просто перейдіть на сторінку демонстрації, і якщо вам сподобався вид підказки , сміливо приступайте до її виготовлення. Дивитися ДемоТепер подивимося, як же це реалізується на рівні коду?Крок 1.Ваше таблиці стилів або безпосередньо на сторінці створіть стиль через , слід прописувати між тегами . Для першої (інформаційної)підказки: .tooltip { position:relative; z-index:24; }

Вертикальне меню навігації з підменю CSS

У недавньому минулому я детально розписував спосіб і техніку створення «Вертикального меню для сайту». Ми розглянули рішення виконання простої навігації, побудованої повністю на використання CSS і невеликого файлу зображення.

Робимо блоки з закругленими кутами без використання зображень

Давайте розглянемо спосіб створення і виведення блоку на сторінках сайту, не вдаючись до використання жодного графічного зображення. У цьому варіанті кожен піксель кута прорисовується за допомогою CSS.Тим самим зменшується час завантаження сторінки, так і редагувати параметри виведеного блоку досить просто. Подивіться як буде виглядати виводиться блок на прикладі:Дивитися ДемоТепер як завжди, розберемо, за рахунок чого досягається такий результат. По-перше, безпосередньо на сторінці теги або у файлі ваших стилів CSS, як у демо, пропишіть наступний код: .block_br {

Малюємо серце з допомогою CSS3

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

Висуваються бічне меню на чистому CSS

Бічні меню, що висуваються по кліку, останнім часом широко використовуються розробниками сайтів. Найвідоміше, на даний момент, це звичайно ж меню навігації, упаковане під кнопки в стилі «гамбургер». Напевно кожен з вас хоча б раз зустрічав в інтернеті сайт, на якому збоку, праворуч або ліворуч, красується кнопа такого виду: ? , при натисканні на яку зявляється(висувається) панелька з вертикальним меню.Існує маса готових рішень для створення таких панелей з допомогою jQuery, окремі плагіни та модулі для різних систем управління сайтом. Це все дуже навіть добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно ))), з оглядкою на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.Не так давно, «видав на-гора» рішення і приклад роботи панелі висувається зверху.

Створення випадного меню з допомогою CSS

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

Привабливі кнопки з допомогою магії CSS3

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

Колекція модальних вікон і форм

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

Круглі кнопки панелі посторінкової навігації

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

Модальне вікно на HTML5, CSS3 і прихованих чекбоксах

Судячи по коментарям, тема створення модальних вікон досить популярна. Я не раз вже описував різні техніки виконання, як з допомогою jQuery, так і на чистому CSS. Та й в інтернеті, інформації по темі предостатньо, і кожен може вибрати для себе оптимальний варіант. Мене більше цікавлять рішення без використання javascript, не тому-що в мене якась фобія до js, ні, мені просто цікаві експерименти, пошук нових можливостей звязки html+css, тим більше що останнім часом ці можливості істотно розширилися. Приховані чебоксы(checkbox) я пару раз використовував при розробці блоків в стилі «акордеон», чому б не застосувати цю ж методу і для реалізації спливаючих(модальних) вікон.

Чистий стиль меню за допомогою CSS3

Всім знову привіт! У своїх статтях, я не раз звертався до різних способів створення навігаційних меню для веб-сайтів. Розглядалися менюшки на будь-який смак і колір, навігація в популярному стилі «акордеон», горизонтальні і вертикальні, з використанням javascript і картинок, не мало уваги приділялося багаторівневим меню jQuery.

Створюємо меню для сайту

У цій статті розповім як можна без особливих труднощів зробити красиве і динамічне меню для сайту. Меню виконано з використанням зображень, які ви з легкістю можете поміняти на свої, але для цього потрібно зовсім небагато, розібратися і зрозуміти структуру самого навігаційного блоку.Даний блок з цікавим ефектом при наведенні курсора мишки на елемент меню, може згодиться на Вашому сайті.Як завжди подивіться як буде виглядати ваше меню:Дивитися ДемоОтже , давайте тепер все по порядку.Крок 1.Між тегами необхідно вставити код скрипта: <script type=text/javascript>

Як зробити просте адаптивне меню за допомогою CSS3

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

Створюємо блок навігації в стилі Акордеон

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

Кросбраузерність «акордеон» з допомогою CSS3

Останнім часом, в силу того, що практично всі сучасні і популярні браузери (Opera, Firefox, Safari, Chrome, Flock і навіть вічний гальма — IE), активно підключаються до підтримки нових властивостей CSS3, стало можливим впритул зайнятися розробкою, більш-менш кроссбраузерного, компактного «акордеона», що розкривається при наведенні.

Інтеграція контактної форми модальне вікно

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

Навколишній світ

Час спорту

Космос