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

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

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

Реліз нового відеокурсу — «Практика гумової верстки»

Дорогі друзі!27-го листопада, а значить вже сьогодні, в 9.00 по Москві, мої колеги з команди WebForMySelf запускають абсолютно новий навчальний курс: «Практика гумової верстки сайту». Здавалося б, матеріалів такого плану випущено немало і що нового може запропонувати ще один інфо-продукт.

Випадаюче меню javascript

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

Анімовані чекбокси з використанням шрифт-іконок

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

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

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

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

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

Короткі URL від bit.ly для записів у WordPress

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

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

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

Адаптивний відеоплеєр для сайту

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

Красиве меню для Вашого сайту

Сьогодні розглянемо досить цікаву і красиву концепцію навігаційного меню для Вашого сайту з допомогою невеликого плагін jQuery, CSS і HTML. Впевнений, такий варіант меню здатне пожвавити і виділити із загальної маси будь-який проект. Для початку, щоб переконатися в тому, що воно вам точно треба, подивіться живий приклад роботи цього чудового меню.

Швидкий аналіз кольору використовується в дизайні веб-сайтів

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

Фон в клітинку на чистому CSS

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

Google позначить мобільні сайти в пошуковій видачі

Дуже часто переходячи з мобільного видачі Google ми потрапляємо на сайти, які просто нереально дивитися на маленьких екранах, перекошений макет, ледве читається текст, розповзаються картинки і т. д. Звичайно такий розклад не розташовує до тривалого перебування користувачів на сайті і найчастіше, відвідувачі поспішають покинути такий ресурс. Щоб хоч якось упорядкувати хаос пошукової видачі і дати користувачам мобільних пристроїв якусь підказку, в Google вирішили позначати в результатах пошуку всі сайти адаптовані для екранів мобільних пристроїв більш ніж конкретної фрази — «Для мобільних».

Ефект прозорості для зображень при наведенні з допомогою CSS3

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

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

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

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

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

Безкоштовний курс з основ адаптивної верстки сайту

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

Свій стиль для підказки за допомогою jQuery

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

Найлегший плагін jQuery для створення вкладок (табів)

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

Стрічки з текстом, на зображенні за допомогою CSS3

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

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

Час спорту

Космос