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

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

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

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

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

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

Модальне вікно з смугою прокручування

Здрастуйте друзі! Останнім часом у читачів блогу проявився підвищений інтерес до створення і розширення функціоналу Модальних вікон. Зовсім нещодавно я спробував докладно розповісти, як вбудувати в модальний ротатор контенту (тексту), сподіваюся, у мене це вийшло.Сьогодні один з відвідувачів блогу помітив таку особливість, що якщо додати в модальний занадто багато тексту, то воно витягується по довжині і неможливо прокрутити вгору, щоб побачити весь текст цілком, так і кнопка закриття при цьому ховається за межі видимості, що само собою вже не є добре.

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

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

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

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

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

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

Висувний верхня панель на чистому CSS

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

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

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

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

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

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

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

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

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

Розкриваються блоки з прихованим змістом з допомогою CSS3

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

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

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

Приклад адаптивної верстки Портфоліо з фільтрацією робіт на jQuery

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

Створення цікавого ефекту розкриття для мініатюр з допомогою CSS і JQuery

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

Створюємо випадаюче меню навігації на CSS3

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

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

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

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

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

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

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

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

Час спорту

Космос