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

Огляд дійсно корисних інструментів для розробників CSS

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

Створення випадного меню з допомогою CSS

Продовжуючи вивчення і шалений вгризання у всі премудрості використання технік CSS, часто експериментую з створенням різних видів навігаційних меню. Іноді за основу береться вже існуюча структура вподобаного рішення і методом проб і помилок, привноситься щось нове в стиль оформлення, а можливості CSS часом, здаються воістину безмежні. Зокрема сьогодні, хочу розповісти ще про один чудовому способі створення меню з випадаючим меню, без будь-яких javascript, застосовуючи в роботі виключно властивості CSS. Ідею і структуру самого блоку меню, як це часто буває, подав закордонний товариш і напевно хороший такий «буржуяка» Janko. Як кажуть, кому цікаво, дивіться оригінал там же.Ну, а ми зі своїм допитливим розумом і невгамовною фантазією, підемо трохи далі, раздербаним все і вся на складові, почаклуємо над стилем, додамо нових властивостей, і в підсумку отримаємо ось таке чудове меню для сайту: Мені подобається, коли меню веде себе як списки, що розкриваються.

Настройка розмірів текстового поля з допомогою CSS

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

Фонове виділення посилання з допомогою Javascript

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

Абсолютно круглі зображення з допомогою CSS

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

Абсолютно новий відеокурс — «Корпоративний сайт під ключ»

В даний час, для створення повноцінного сайту або блогу існує безліч готових рішень, це і різні онлайн-конструктори сайтів, і популярних систем управління контентом (CMS). Все це добре, але якщо ви хочете стати по-справжньому професійним розробником, який здатний виконувати будь-які завдання і отримувати за свою роботу пристойні гроші, вам просто необхідно мати в своєму арсеналі надійний, універсальний інструмент — СВОЯ СИСТЕМА КЕРУВАННЯ КОНТЕНТОМ(CMS).Звичайно, якщо ви — весь такий «распальцованный гуру» в області сайтобудування, або просто, вас і так все влаштовує, то немає сенсу читати далі...Для решти ж хочу повідомити, що перед вами — найунікальніша можливість прямо зараз, крок за кроком, пройти найкоротший шлях і отримати готовий інструмент — УНІВЕРСАЛЬНУ СИСТЕМУ УПРАВЛІННЯ КОНТЕНТОМ, яка дозволить вам вже завтра створювати повноцінні корпоративні сайти під ключ.Командою розробників WebForMySelf випущений абсолютно новий, унікальний навчальний матеріал — Відеокурс «Корпоративний сайт під ключ». Курс «Корпоративний сайт під ключ» — це практичне керівництво і готова універсальна система управління контентом плюс весь процес її створення з відкритим кодом, який не має меж розширення і вдосконалення.Іншими словами, ви можете не тільки користуватися системою, але і постійно покращувати і допрацьовувати її під свої особисті потреби — нехай буде ваш корпоративний блог, промо-сайт для вашої компанії або будь-який інший сайт, наприклад, для замовника на фрілансі або веб-студії. Кому ж буде особливо цікавий цей відеокурс?Тим, хто хоче займатися розробкою професійних сайтів під замовлення, для бізнесу або просто для себе;Кому необхідно опанувати мистецтво сайтобудування «тут і зараз».

Створюємо спливаюче вікно при завантаженні сайту за допомогою CSS3 і трохи javascript

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

Виділення зовнішніх посилань з допомогою CSS

При написанні статей ми так чи інакше ні-ні та використовуємо посилання на зовнішні сайти, це можуть бути посилання на першоджерела, різні веб-додатки, каталоги і т. д. Більшість з нас ніяк не виділяє зовнішні посилання, частіше обмежуючись атрибутом target=_blank в засланні, визначальним відкриття цієї самої посилання в новому вікні, ну, або ж стандартні підказки через атрибут title. Давайте розглянемо найпростіший приклад того, як з допомогою кількох рядків CSS, можна візуально виділити із загального масиву, всі посилання на зовнішні сайти. Стилізувати посилання, як ви знаєте, можна по різному, виділити кольором, підкресленням і т.

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

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

Меню навігації в стилі «Акордеон» (CSS3 + jQuery)

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

Адаптивні вкладки (таби) на CSS3

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

Огляд новинок якісних тем wordpress — січень 2014

Продовжуємо серію статей присвячених новинок якісних тем оформлення для популярного движка WordPress. Сьогодні познайомимося з черговою серією, упакованих по повній, цікавих (на мій погляд) тим wordpress преміум-класу, виконаних в стилі адаптивного дизайну.Умільці зі всього світу, працюють не покладаючи рук, день і ніч, крапают все нові і нові одягу для сайтів і блогів, які працюють на WP.

SimplePagination.js — Легкий jQuery плагін для створення пагинации

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

Liveweave — Новий онлайн-редактор HTML5, CSS3 і JavaScript

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

WordPress плагін WP-Syntax

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

Акордеон на чистому CSS працює на прихованих чекбоксах

Пропоную черговий варіант компактного блоку «акордеон», або якщо хочете, розкривного меню, сформованого на чистому CSS і працює на прихованих чекбоксах, використовуючи різні комбінації type=radio type=checkbox. Не залишаю спроби знайти оптимальне рішення, з мінімальним кодом, концепт «акордеона» на чистому CSS, без використання js, яку б підтримували всі сучасні браузери.

Поворот елементів під будь-яким градусом на CSS3

Найпростіше рішення для повороту блочних елементів сторінки під будь-яким градусом з допомогою CSS3. У прикладі я використав цей метод стосовно до заголовка першого рівня . Ви ж, запросто можете застосувати поворот до будь-якого іншого елементи блоків (div, blockquote, p, h2, h3, та ін). Для того щоб реалізувати поворот на практиці, достатньо в CSS створити окремий клас, наприклад .rotate (логічно), прописати в ньому чудова властивість transform з певним видом трансформації ( в нашому випадку це rotate) і задати необхідні значення повороту елемента на заданий кут відносно точки трансформації rotate(-8.5 deg);.Для коректного відображення цього методу в різних браузерах, використовуємо вендорные префікси -webkit-, -moz-, -ms - та -o-.

Вкладки (таби) з нескінченною вкладеністю

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

CSS — Макет Контактної Форми

Багато разів розповідав про різних рішеннях створення контактних форм, детально розписував варіанти верстки і оформлення за допомогою CSS3. Сьогодні хочу представити вам ще один css-макет оригінальної форми зворотного звязку.

Photobox – CSS3 jQuery галерея зображень

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

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

Час спорту

Космос