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

CSS Медіа-запити для різних пристроїв

В якості шпаргалки, зібравши інформацію з різних джерел, склав ось такий, невеликий набір стандартних правил css медіа-запитів, для різних типів пристроїв і режимів їх орієнтації, залежно від положення телефону або планшета в руках користувача. Так в портретному режимі portrait, коли висота перевищує довжину, і в альбомному режимі landscape, коли ширина більше висоти, ну і звичайно ж, комбіновані варіанти використання цих режимів.Ось кілька поширених медіа-запитів, які можуть виявитися корисними при проектуванні динамічного сайту з адаптивним дизайном:/* Смартфони (портретний і альбомний режими) ----------- */

10 Безкоштовних наборів елементів інтерфейсу з плоским дизайном

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

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

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

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

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

Огляд онлайн-сервісів для веб-розробки і дизайну

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

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

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

Огляд засобів для боротьби з плагіатом

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

SNOB — Універсальний адаптивний шаблон для сайту

Дорогі друзі. Представляю вам очереднойбесплатный html-шаблон, привернув мою увагу під час безцільного блукання, чи ні, швидше все ж, як завжди, в пошуках цікавого і нового, в стані «буржуїнів». Універсальний, адаптивний шаблон під назвою «СНОБ».

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

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

Zoom — Збільшення Зображення з jQuery

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

Висуваються бічне меню на чистому CSS

Бічні меню, що висуваються по кліку, останнім часом широко використовуються розробниками сайтів. Найвідоміше, на даний момент, це звичайно ж меню навігації, упаковане під кнопки в стилі «гамбургер». Напевно кожен з вас хоча б раз зустрічав в інтернеті сайт, на якому збоку, праворуч або ліворуч, красується кнопа такого виду: ? , при натисканні на яку зявляється(висувається) панелька з вертикальним меню.Існує маса готових рішень для створення таких панелей з допомогою jQuery, окремі плагіни та модулі для різних систем управління сайтом. Це все дуже навіть добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно ))), з оглядкою на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.Не так давно, «видав на-гора» рішення і приклад роботи панелі висувається зверху.

Приклад верстки контактної форми для сайту з допомогою CSS3

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

Фон в стилі «карбон» з допомогою градієнтів CSS

Всім, привіт! У попередній статті розписував, як за допомогою лінійних і радіальних градієнтів CSS, можна «намалювати» цілком симпатичні текстури для фону. На цей раз пропоную відтворити темний фон в стилі «карбон», який відмінно підійде для заливки, як основного фону сайту, так і для оформлення окремих блокових елементів.У прикладі використовував повторювані лінійні градієнти з кутом нахилу 45deg, а так само накладення радіального градієнта по центру вгорі at 50% 0, для імітації світлового відблиску: На весь екранВийшло фонове зображення масштабується і змінюємо розмір точок, за допомогою значень властивості background-size.

Топ — 20 Нові преміум теми WordPress на Themeforest ( грудень 2016)

Продовжуємо знайомитися з новинками розробок преміум тем WordPress , представлених на популярної торгової майданчику Themeforest . Сьогодні представляю на ваш огляд ТОП-20 тим WP преміум класу, виставлені на продаж або пройшли повний апгрейд(оновлення) в грудні 2016 року.Всі теми представлені в цьому огляді різної спрямованості, це можуть бути багато-функціональні теми, які підходять для створення сайтів, блогів і журналів різної тематики, а так само теми привязані до якоїсь однієї категорії майбутніх веб-проектів.При складанні огляду спирався на низку факторів і звичайно ж на свій смак, а він, як ми всі прекрасно знаємо, у всіх різний.

Онлайн генератор стартового HTML шаблону

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

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

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

jQuery & CSS3 меню акордеон з допомогою CSS Menu Maker

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

Візуальний слайд-ефект для підписів зображень на HTML5 і CSS3

Раніше для створення різних ефектів обовязково потрібно підключення javascript і додаткових файлів зображень, з виходом на арену веб-розробки найпотужніших інструментів CSS3 і HTML5 всі реалізується набагато простіше. У сьогоднішньому прикладі продемонструю html-розмітку і готовий набір правил css, для створення одного з безлічі візуальних ефектів виведення підписів до зображень, ефекту у вигляді вислизає блоку з певним змістом.

Набір стилів для формування посторінкової навігації сайту на CSS3

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

Маленькі хитрощі великого Total Commander

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

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

Час спорту

Космос