Створюємо багаторівневе горизонтальне меню з ефектом анімації на CSS3

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

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

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

Адаптивні вкладки (таби) на CSS3

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

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

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

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

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

Ефект Lightbox CSS3

Майже два роки минуло з моменту написання статті присвяченій цікавому способом реалізації 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, як у демо, пропишіть наступний код: .block_br {

Модальний блок відео на CSS3

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

Адаптивні html-блоки у вигляді цегляної кладки за допомогою CSS3

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

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

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

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

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

Меню «Акордеон» без javascript і зображень

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

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

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

Приклад верстки контактної форми для сайту з допомогою CSS3

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

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

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

10 Уроків по створенню відмінних меню навігації для ваших веб-сайтів

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

Модальні спливаючі вікна з допомогою CSS3 без Javascript

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

Адаптивні зображення з допомогою CSS

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

Акордеон на чистому CSS працює на прихованих чекбоксах

Пропоную черговий варіант компактного блоку «акордеон», або якщо хочете, розкривного меню, сформованого на чистому CSS і працює на прихованих чекбоксах, використовуючи різні комбінації type=radio type=checkbox. Не залишаю спроби знайти оптимальне рішення, з мінімальним кодом, концепт «акордеона» на чистому CSS, без використання js, яку б підтримували всі сучасні браузери.

Меню навігації в стилі Lava-Lamp

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

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

Час спорту

Космос