Додому Блог

Плагін WP Smush.it — оптимізація зображень у WordPress

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

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

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

Pixie — маленький помічник для швидкого визначення значень кольору

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

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

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

Material — Журнальна тема для WordPress преміум класу

У новому 2015 році, на ринку Envato, представлено величезну кількість якісних тем оформлення, для сайтів і блогів працюють на движку WordPress. Встежити за всіма зявляються новинками складно, але по мірі можливості, продовжую знайомити вас з найбільш помітними з них. Сьогодні хочу представити чергову роботу від Dankov, чудову тему WordPress преміум класу, виконану в популярному журнальному стилі.Material — Журнальна тема для WordPress ДемоСкачатьПрофесійна новинна тема, відмінно підійде для тих, хто шукає готовий набір інструментів (шаблони сторінок, додатки, віджети і т.

Адаптивні зображення з допомогою CSS

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

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

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

Підказки до посилань з допомогою CSS

У сьогоднішній статті, продовжимо розгляд способів виведення підказки до посилань. На цей раз навчимося робити підказки до посилань, використовуючи тільки CSS. Знову ж таки як завжди, для перегляду того, що ми отримаємо в результаті ,просто перейдіть на сторінку демонстрації, і якщо вам сподобався вид підказки , сміливо приступайте до її виготовлення. Дивитися ДемоТепер подивимося, як же це реалізується на рівні коду?Крок 1.Ваше таблиці стилів або безпосередньо на сторінці створіть стиль через , слід прописувати між тегами . Для першої (інформаційної)підказки: .tooltip { position:relative; z-index:24; }

Набори іконок для соціальних закладок

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

Знайомимося — Dr.Web Бастіон Pro

Не хочу і не буду починати одвічний спір, який антивірусний програмний продукт краще, просто вся ця метушня і розбризкування слин вже неабияк набридла. Для банального ознайомлення і щоб ввести в курс справи не досвідченого користувача, сьогодні обєктом нашої уваги я вибрав — бандл Dr.Web Бастіон Pro для Windows.

Стильний шаблон сайту — Ancient

Ancient — CSS шаблон для сайту, прекрасно оформлений в оригінальному стилі «папірус». На мій погляд, найбільше підійде для ведення блогу, темний фон, легкий наліт старовини в дизайні сторінок, розташовують до розміреного читання записів. Шаблон упакований готовими варіантами сторінок для блогу, галерея зображень, сторінкою зворотного звязку з вбудованою контактною формою, а так само запропонований варіант авторської сторінки.

Генератор кнопок CSS3 c підтримкою лінійного градієнта

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

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

Всім нам вже добре знайомі різні хмарні сховища файлів, Dropbox, Google Drive, Яндекс.Диск і т. д. Дуже зручні і потрібні сервіси для надійного зберігання файлів, але іноді виникає потреба швидкого обміну файлами великого розміру, а місця в «хмарних коморах» недостатньо, або ж вони зовсім відсутні у вашій обоймі інструментів «супер-пупер» користувача інтернету. Ось тоді то і приходять на допомогу такі чудові сервіси, як DropMeFiles, за допомогою якого ви запросто зможете відправляти відео, або передавати файли великого розміру (до 50 гб).Інтерфейс сайту DropMeFiles простий для сприйняття і використання, жодної зайвої води, все заточене на швидку роботу і, що дуже радує, сайт повністю російською, з можливістю перемикання на англійську.

jQuery плагін для збільшення зображень

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

Онлайн-антивіруси для перевірки компютера

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

10 Нових Адаптивних Фото-Відео Тем WordPress

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

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

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

Вертикальне меню в стилі акордеон CSS і jQuery

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

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

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

Ефект Lightbox CSS3

Майже два роки минуло з моменту написання статті присвяченій цікавому способом реалізації lightbox-ефекту при перегляді повно-розмірних зображень, без підключення до роботи javascript, виключно з допомогою властивостей CSS3.Час не стоїть на місці, стандарти, вимоги веб-розробки і дизайну змінюються, прийшов час трохи підкоригувати деякі властивості ефекту, додавши до нього нові функції. За великим рахунком нічого особливо міняти не довелося, хіба що підключив трохи більш плавну трансформацію при прояві картинок, та додав правила @media для різних типів пристроїв, адаптивний дизайн бачите нині в моді...Отже, для початку, як завжди можете подивитися на ефект у справі, поізменять розміри вікна браузера, поглянути на сирці, а потім більш детально розберемо деякі деталі. Відразу хочу відзначити, що коректно і у повному обсязі даний метод працює в браузерах що підтримують псевдоклас :target(на ньому власне весь ефект і заснований) це Firefox 1.0+, Chrome 1.0+, Opera 9.6+, Safari 3.0+ і Internet Explorer 9.0+, користувачі щільно підсіли на IE 8, на жаль нічого не побачать.ДемоСпочатку, для приховування і появи картинок повного розміру використовував властивості display:none і display:block, але у такому разі картинки проявлялися миттєво без будь-якої затримки.

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

Час спорту

Космос