4 CSS техніки, які ви повинні знати

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

1. Закруглені кути без використання зображень.

Однак великим недоліком цього є те, що він працює тільки в браузерах Firefox і Safari.

Тому, якщо в цьому блоці ви бачите квадратні кути, завантажте та встановіть браузер Firefox.

СSS код

HTML код

2. Імітація рамок зображення.

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

повинні

CSS код

HTML код

Приклад другий. Ілюзія тіні зображення.

цьому

CSS код

HTML код

CSS код

HTML код

4. Напівпрозоре тло та непрозорий текст

СSS код

HTML код

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.eight7teen.com Переклав: Сергій Патін Урок створено: 17 Березня 2009 Переглядів: 34203 Правила передруку

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

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

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.