5 новых технологий CSS3, которые вы должны знать

CSS — это хорошо известный и широко используемый язык стилизации веб-сайтов. В план версии 3 (CSS3) добавлены некоторые новые функции, которые могут сэкономить время. Хотя эти эффекты поддерживаются только последними версиями браузеров, знать о них все равно необходимо и интересно. В этой статье Бао Фэнбинбин покажет вам 5 интересных новых технологий в CSS: закругленные углы, отдельные закругленные углы, непрозрачность, тень и изменение размера элементов.

1: Базовая оценка

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

Для нашего xHTML требуются следующие элементы div:

#round использует код CSS3 для получения закругленных углов.

#indie, примените несколько отдельных скруглений.

#opacity демонстрирует новый способ реализации непрозрачности в CSS3.

#shadow показывает, как использовать CSS3 для достижения эффекта тени без использования Photoshop.

#resize показывает, как использовать CSS для достижения эффекта изменения размера.

Подводя итог, наш xHTML должен выглядеть так:

Ниже приводится цитируемое содержание: <голова> <тело> ​​

Давайте создадим базовый CSS-файл:

Как вы можете видеть выше, мы присвоили каждому элементу div ширину и высоту 300 пикселей и позволили им плавать влево, оставив все элементы div страницы для стилизации позже.

2: закругленные углы

В настоящее время существует множество способов создания скруглений, но все они громоздки. Самый распространенный метод: сначала нужно создать картинку с закругленными углами, затем создать множество html-элементов и использовать фоновое изображение для отображения закругленных углов; Мы с вами очень хорошо знаем конкретный процесс.

Эта проблема будет легко решена в CSS3 с помощью свойства «border-radius». Сначала мы создаем черный элемент div и устанавливаем для него черную рамку. Граница является необходимым условием для достижения эффекта атрибута «border-radius».

Так:

Теперь, когда вы создали элемент div, он выглядит так, как вы и ожидали: высота 300 пикселей, угловатый и черный. Теперь давайте добавим код для реализации закругленных углов. Это очень просто и требует всего две строки кода.

Здесь мы добавили две похожие строки кода: -moz- для браузера Firefox и -webkit- для браузера Safari/Chrome.

Примечание. На данный момент браузер IE не поддерживает атрибут border-radius, поэтому, если вы хотите, чтобы IE имел эффект закругленных углов, вам необходимо добавить закругленные углы отдельно.

Дословный перевод свойства border-radius — это радиус границы. Как и в Photoshop, чем больше его значение, тем больше закругленные углы.

3: Отдельные закругленные углы.

Если вы будете следовать прошлым привычкам, это будет пустой тратой времени. Теперь CSS3 может решить эту проблему быстро!

Теперь нам просто нужно, чтобы правый верхний и правый нижний углы div были закруглены, поэтому нам нужно внести лишь небольшие изменения:

Только представьте, для каких элементов веб-страницы будет использоваться этот подход? Да! Это кнопка навигации с вкладками!

4. Измените непрозрачность с помощью CSS3

Теперь можно условно написать несколько строк кода для реализации эффекта непрозрачности (хака). Однако CSS3 упрощает этот процесс.

Эту строку кода легко запомнить, просто «opacity: value;»:

5: эффект тени

Существует множество способов создания теней. Самый распространенный из них — использовать Photoshop для создания теневого изображения и последующего применения его к свойствам фона. Но CSS3 делает вашу работу более эффективной. К сожалению, только Safari и Chrome в настоящее время поддерживают эту новую функцию.

Для этого требуется только одна строка кода, но она имеет 4 разных значения:

Позвольте мне объяснить, что представляют собой эти четыре значения. Первые 3 пикселя — это горизонтальное (горизонтальное) расстояние между указанной тенью и элементом div, а вторые 5 пикселей относятся к вертикальному (вертикальному) расстоянию между тенью и элементом div. третьи 10 пикселей относятся к размытию тени (похоже на растушевку в фотошопе), чем больше значение, тем деликатнее. Всем известно, что конечное значение – это цвет тени.

Наш окончательный код эффекта тени;

Как видите, наш div имеет белый фон, черную рамку и светло-серую тень.

6: Изменение размера

В последней версии CSS можно изменять размеры элементов (но в настоящее время поддерживается только Safari).

После использования этого кода в правом нижнем углу нашего элемента появится небольшой треугольник, напоминающий пользователю, что размер этого элемента можно изменить. Код по-прежнему очень прост, можно сказать, что для него требуется всего одна строка кода. Конечно, вы также можете использовать некоторые свойства, которые использовали раньше, например «max-width», «max-height», «. минимальная ширина» и «минимальная высота».

Здесь мы в основном говорим об атрибутах resize и overflow: оба означают, что все стороны могут быть изменены. Его значения также включают горизонтальные и вертикальные. Как следует из названия, они бывают горизонтальными и вертикальными. Переполнение предназначено для работы с изменением размера, поэтому здесь используется auto.

Подвести итог

Итак, получили ли вы что-нибудь из этой статьи? Хотя сейчас лишь несколько браузеров поддерживают CSS3, нельзя отрицать, что CSS3 действительно сэкономит больше времени в нашей работе. Если у вас есть некоторые знания и понимание прогрессивного улучшения, я думаю, вы с готовностью примете эту мощную новую версию CSS3. Не тратьте все свое время на IE6, иначе вы останетесь всего лишь устаревшим интерфейсным разработчиком.