‘Уроки CSS’

CSS-3D-Push-Button-Demo-small

Створення тривимірної натиснутої кнопки з використанням CSS3

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

603-css3-multiple-borders-box

Створення декількох рамок з використанням CSS3

Властивість рамки CSS2.1 працює добре, але вона недостатньо гнучка.  А якщо потрібно створити дві або більше рамок різних кольорів в одного елемента? Властивість зображення рамки CSS3 можна розглядати як варіант, але для нього потрібно створити відповідне зображення і синтаксис цієї властивості досить складний. Однак є інший простіший спосіб – властивість тіні блоку, якщо потрібно додати кілька […]

GitHub

Створення висувної форми пошуку

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

css

Урок CSS: як розтягнути елементи блоків

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

link-glow-text-small

Створення посилань, що світяться, з використанням CSS3

Тінь тексту – це багатогранна властивість CSS3, яка підтримується в браузерах без приставок виробників. Але вона не працює в браузері Internet Explorer версій 9 і нижче. Однак, цю властивість можна використовувати не тільки для створення тіней. На темному тлі біла тінь створює ефект світіння. Цей ефект можна застосувати для моментів, коли користувач наводить покажчик миші […]

css-stiched-button-small

Створення кнопки у вигляді заплатки з використанням CSS

Веб-дизайнерам іноді потрібно створювати ефект старовини. Одним із способів його створення – використання латочок в дизайні сайту. Раніше це робилося за допомогою зображень, а тепер, завдяки CSS3 і винахідливому використанню його властивостей, можна створити латку, використовуючи тільки CSS. З цього уроку Ви дізнаєтеся, як за допомогою CSS створити кнопки у вигляді заплаток для сайту.

shiny-button-set-590x229

Створення сяючих кнопок із використанням CSS

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

button-preview

Створення градієнтних кнопок з використанням CSS3

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

css3-toggle-switch-small

Створення перемикача з використанням CSS3

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

713-revealing-css3-menu-screenshot

Створення рухомого меню з CSS3

Непотрібні речі треба прибирати, щоб не заважали. Меню сайту – ще одне тому підтвердження. Коли ми читаємо статтю, нам не потрібно, щоб більша частина екрану була зайнята посиланнями, особливо на мобільному пристрої.

id=