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

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

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

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

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

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

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

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

Створюємо спливаюче вікно при завантаженні сайту за допомогою CSS3 і трохи javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Час спорту

Космос