Додому Блог Сторінка 4

Стильні CSS3 — кнопки без графіки

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

Відмінне багаторівневе меню jQuery

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

5 нових плагінів для автоматичного резервного копіювання блогів WordPress

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

Схований блок (спойлер) з допомогою jQuery

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

Безкоштовні ресурси для дизайнерів і розробників веб-сайтів

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

Варіанти оформлення кнопки «Читати далі» (read more)

Практично на всіх інтернет-ресурсах, будь-то простенький сайт, великоваговий новинний портал або особистий блог, використовується заповітна кнопка «Читати далі» (read more), найчастіше це головна сторінка з коротким анонсами записів, сторінки рубрик, архіви тегів або тимчасові архіви, там де більша частина тексту постів прихована і замінено на посилання «Читати далі».Оформляють цю посилання, хто на що здатний, хтось обходиться стандартній текстової посиланням, багато навішують різні фонові картинки, ну а ми, давайте розглянемо декілька варіантів оформлення кнопки «Читати далі» (read more), з допомогою нових властивостей з обойми CSS3. Дивитися ДемоВ наборі використано 5 основних класів відповідних тій або іншій кольоровій схемі (pink, red, blue, yelow, green), з допомогою додавання певних класів, змінюються базові стилі за замовчуванням і при наведенні курсору на посилання «Читати далі». читати далі

Стабільний інформаційний блок при прокручуванні сторінки

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

Огляд цікавих та корисних веб-додатків

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

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

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

Planer — Адаптивна тема WordPress в журнальному стилі

Представляю вашій увазі чудову тему WordPress з серії преміум-класу. Planer — елегантна, професійна тема оформлення WordPress, відмінно підійде для тих, хто планує створити проект з відображенням більшого обсягу різного контенту, з оформленням в чистому і світлому дизайні, приємному для сприйняття користувальницького інтерфейсу. Завдяки сітці в 3-колонки та можливості виведення більшої кількості матеріалу на головній сторінці, ця тема відмінно справляється з угрупованням змісту, не роблячи при цьому ваш сайт або блог тісним і захаращеним інформацією.

Як у новій Opera включити панель закладок і відключити панель пошуку Яндекс

Коли розробники браузера Opera пересадили своє дітище на движок «Blink», вони з якогось переляку, одним махом відключили одну з найбільш корисних і улюблених користувачам функцій цього чудового браузера — зручну і компактну панель закладок.

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

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

Виводимо твіти на будь-якому сайті з допомогою jQuery

Існує чимало різних способів відображення твітів на сайтах та блогах. Для WordPress наприклад, є своя купка спеціальних плагінів. Так і народні умільці з числа противників великої кількості плагінів, не дрімають, покопавшись в надрах движка wordpress, явили стражденним пару-трійку рішень виведення твітів без використання плагінів. Незнаю, чи сприяє розкручуванню твіттер акаунту відображення останніх твітів на сторінках блогу, або ж це просто модна фішка, типу — ознака хорошого тону, але людям подобається, тема затребувана, а значить варто розглядати все нові і цікаві варіанти виконання.Сьогодні ми розглянемо один з варіантів виведення останніх повідомлень з твітера будь-якого користувача на сторінках сайтів з допомогою jQuery плагін Jtwt.js.

CSS-стилі для форм зворотного звязку

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

Оформлення заголовока в стилі 3D на CSS3

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

Десятка Адаптивних Lightbox Плагінів

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

Відмінне горизонтальне меню з CSS і jQuery

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

Універсальний шаблон односторінкового сайту — Sand Paper

Sand Paper — універсальний шаблон односторінкового сайту з чітким поділом на інформаційні блоки і зручною навігацією по сторінці. Дизайн шаблону витриманий в мяких ясно-сірих тонах. Кожен інформаційний блок оснащений кнопкою швидкого повернення до початку сторінки, що робить навігацію по сайту ще більш зручною. ДемоСкачатьНа десерт — дивимося черговий шедевр від Chrome Experiment:

Абсолютна центрування чуйного зображення на CSS

Для абсолютної горизонтального і вертикального центрування елементів на сторінці пропонуються різні методи, наприклад, на Хабре, ще в 2013р був представлений переклад відмінної статті з рішенням від Стефана Шоу, написаної в свій час для Smashing Magazine. Так що, в цьому плані, нічого нового не відкрию, з центруванням елементів все гранично ясно.Одного разу, при розробці чергового лайтбоксу, мені знадобилося зробити так щоб популярні зображення, не тільки виводилися абсолютно по центру, але і були гарантовано чуйними, тобто гнучкими і коректно які відображаються при перегляді на екранах різних пристроїв, незалежно від розмірів оригінальної картинки. Для центрування рішення знайшов швидко, використовував flexboxдля контейнера лайтбоксу і один з найпростіших способів трансформації transform: translate(-50%, -50%); безпосередньо для зображення.Спосіб звичайно не ідеальний, вимагає додаткової розмітки.

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

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

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

Час спорту

Космос