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

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

Підказка до ссылке з фоном з допомогою CSS

При створенні сайту часто виникає необхідність в тому, щоб відобразити підказки до посилань при наведенні на них. Це не примха творців, це часом необхідність, покликана поліпшити огляд сторінок і полегшити користувачам пошук потрібної інформації на сайті.Уявляю вашій увазі відмінне рішення по створенню підказки до посилань з допомогою таблиць каскадних стилів CSS і невеликого Javascript: Дивитися ДемоКрок 1.Насамперед розглянемо, з чого складається сама підказка, точніше сказати код її виконання. Що б ця функція заробила вам необхідно вставити в сторінку перед закриваючим тегом пару рядків такого змісту: <script type=text/javascript src=BubbleTooltips.js>

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

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

Модальне вікно на CSS3 (варіант №2)

Доброго дня всім! Сьогодні буде не повноцінний урок, а всього лише невелика демонстрація, ще одного варіанту спливаючого модального вікна, реалізованого виключно засобами CSS3, без javascript і додаткових зображень у формуванні стилів. За основу взято перший варіант: «Модальні спливаючі вікна з допомогою CSS3 без Javascript», перевірений і став досить популярним серед користувачів, які читають мій блог. У другому варіанті, особливо нового ви нічого не побачите, як міг, намагався спростити всю конструкцію (html, css), додав зовсім трішки елементів анімації при появі вікна, трохи видозмінив кнопку закриття і ще пару-трійку несуттєвих дрібниць.Щоб вам легше було розібратися що до чого і навіщо, залишив всі вихідні коди і живий приклад роботи віконця в онлайн-редакторі, так що сміливо можете поекспериментувати з параметрами «не відходячи від каси» ))).Для тих же, хто віддає перевагу дивитися живий приклад роботи модального віконця на окремій сторінці, спеціально таку сторінку заклав.

Три ефекти при наведенні на зображення

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

Адаптивне відео для сайту за допомогою CSS

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

Прийоми оформлення кордонів блоку за допомогою CSS

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

CSS3 Градієнт для кнопок

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

Адаптивне модальний строго по центру

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

Оформлення тексту з ефектами тіні, анімації та градієнта

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

Чуйний Акордеон на чистому CSS

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

Ефект тіні box-shadow CSS без зображень

Всім знову привіт.Продовжуємо експерименти з новими властивостями CSS3. Сьогодні розпишу техніку створення ефекту drop-shadows, що у вільному перекладі означає — «падаюча тінь». Раніше я розповідав про прийоми оформлення кордонів блоку за допомогою CSS, в яких широко застосовувався параметр box-shadow, а так само напевно всім добре відомий спосіб створення тіні для тексту text-shadow .

Чуйні вкладки (таби) з переходом у акордеон jQuery & CSS3

У своїх статтях, я не раз звертався до теми створення вкладок(табів), що працюють з використанням бібліотеки javascript, jQuery, а так само розповідав і показував приклади реалізації вкладок виключно засобами CSS. Таби(вкладки), досить популярний компонент в середовищі розробників веб-сайтів, цей елемент включений до складу практично всіх відомих фреймворків, найчастіше вони однотипні і по дизайну, і по функціональним можливостям.Вимоги адаптивного дизайну диктують свої правила, по-цьому розробники намагаються всі елементи інтерфейсу і модульні компоненти веб-сайтів, різними способами підігнати під ці вимоги, і звичайно ж вкладки(таби) не виняток . В одній зі своїх статей розповідав про одне цікаве рішення створення адаптивних вкладок на CSS, без підключення javscript.

Фіксовані підписи до зображень

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

4 простих hover-ефекту для кнопки на чистому CSS

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

Стиль контактної форми CSS

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

Види обрамлення клітинок у таблиці через стиль

Дуже часто виникає потреба сконцентрувати увагу користувача на окремій частині вмісту таблиці. Для цього існує безліч способів і рішень. В цій великій статті розглянемо види обрамлення клітинок у таблиці допомогою стилів.В результаті не хитрих дій у нас повинне вийти наступне: Тепер давайте подивимося з допомогою чого досягається такий результат і як редагувати параметри обрамлення. В першу чергу нам потрібен сам код створення таблиці на сторінку, виглядати він буде так: <table style=width: 70%; height: 40%; border=2px cellspacing=10px bordercolor=black>

Акордеон на чистому CSS3 — експерименти тривають

Існує багато цікавих рішень і можливостей для створення ефектних, компактних блоків з вмістом, виконаних у стилі «Акордеон». Самий надійний в плані адекватної обробки і підтримки всіма браузерами, і напевно через це найпопулярніший спосіб, це кроссбраузерное рішення засноване на jQuery.Не залишаю спроби знайти життєздатний прийом реалізувати простий анімований акордеон, з гідним функціоналом і оформленням, виключно засобами CSS3, без підключення javascript і додаткових зображень.Що стосується формування зовнішнього вигляду блоків в стилі «акордеон» на чистому CSS3, з цим проблем вже не виникає, як і раніше не вдається привчити деякі майкрософтовские дітища (IE8 і нижче) до розуміння псевдокласу :target. Використання псевдокласу :hover дало певні позитивні результати при створенні кроссбраузерноо варіанту «акордеона», весь розклад розписав раніше в статті «Кросбраузерність Акордеон з допомогою CSS3».

Створення кнопок за допомогою CSS, HTML без javascript

Якась фобія у наших користувачів щодо використання javascript, досить часто зустрічаю в коментарях питання про те, що при відключених скриптах в браузерах, що то перестає працювати. Люди часом не спромагаються навіть вникнути у процес створення того або іншого рішення.Ну, а раз є потреба і невгамовне бажання не використовувати javascript в роботі, на прикладі створення кнопок покажу, як можна створити і додати динамічність вашим кнопок за допомогою чистого CSS, без будь то або застосування javascript.Цей метод використовує стандартні теги HTML, CSS-стилі для графічних налаштувань і без JavaScript.Для всього фону самої кнопки, ми будемо використовувати один невеликий файл зображення.

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

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

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

Час спорту

Космос