• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффекты теней для текста на CSS (Оригинальный эффект длины тени для текста с помощью CSS)
Создать эффекты теней для текста на CSS
Kosten
Дата: Суббота, 2020-07-04, 21:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


Давайте сначала поговорим об эффекте тени. Эффект тени можно использовать как для обычных элементов, так и для текста. Настройка очень проста для тени текста, это означает, что тень направления оси X составляет 5 пикселей вправо, тень направления оси Y вниз на 2 пикселя, радиус размытия тени равен 6 пикселям, а цвет - rgba (64, 64, 64, 0.5).

Тени элементов и текста

CSS

Код
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}

.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}

Смещение может быть отрицательным значением, а отрицательное значение находится в противоположном направлении.



Далее поговорим об отражении, он выглядит как отражение в воде, и его настройка очень проста, обратитесь к следующему коду:

Код
.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
     to(rgba(255, 255, 255, 0.51)));
}

Настройка также очень проста, где каждый в основном обращает внимание на «-webkit-box-reflect: ниже 10px», он говорит, что отражение находится на 10px ниже элемента, а затем в сочетании с эффектом градиента картина видимого эффекта выглядит следующим образом.

CSS3 фоновые эффекты

У CSS3 есть еще несколько фоновых атрибутов, которые мы кратко представим здесь:

* background-clip: border-box; фон отображается от границы;
* background-clip: padding-box; фон отображается из отступов;
* background-clip: content-box; область фонового содержимого начинает отображаться;
* background-clip: no-clip; свойство по умолчанию, эквивалентное border-box;

Обычно наш фон покрывает весь элемент и теперь CSS3 позволяет вам указать, нужно ли вам это делать.

Второе: используется для определения положения фона, обычно оно используется в сочетании с background-position, где вы можете рассчитать background-position из границы, отступов, контента (как background-clip).

* background-origin: border-box; вычислить положение фона по границе;
* background-origin: padding-box; вычислить background-position из отступов;
* background-origin: content-box; вычислить background-position из контента;

Кроме того размер фона обычно используемый для настройки размера фонового изображения, где не следует путать с клипом, это в основном используется для установки самого изображения.
Прикрепления: 6165974.png(22.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффекты теней для текста на CSS (Оригинальный эффект длины тени для текста с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: