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.

Слънчеви очила от първо лице

Готин експеримент с уеб страница, показваща се от първо лице през слънчеви очила.

Падаща навигация

Експериментален скрипт за навигационно падащо меню.