• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » 5 вариантов отличных возможностей CSS (Топ 5 красивых эффектов с помощью стилистики CSS3)
5 вариантов отличных возможностей CSS
Kosten
Дата: Суббота, 18.08.2018, 20:39 | Сообщение 1
Администраторы
Сообщений:18096
Награды: 55


Давайте рассмотрим самые актуальные возможности, что можно создать на стилистике CSS3. Так как пока не все еще браузеры поддерживают, но все таки на самых популярных, все корректно отображается. Здесь безусловно не все трюки на CSS, то те, с которыми вы вероятно встречались на интернет ресурсах. Что теперь появилась возможность установить у себя на сайте.

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



1. Производим анимацию CSS при переходах

Здесь мы создаем красивый эффект на переход со страницы на другой объект, а точнее возможности стилей CSS3 при анимации. Что по браузерам, то если говорить об IE, то здесь он будет виден, только с десятой версий. Чтоб создать его, здесь всего лишь добавляем transition, что предоставлено ниже.

Код
div {
    transition: width 1s;
}


2. Вычисления значений с помощью calc()

Аналогично в своей оригинальности CSS свойство - как calc(). Основном это свойство можно увидеть при добавлении в CSS стиль, таких возможностей, как арифметические вычисление, которое будет отлично подходить под вычисление ширины или высоты элемента блока.

Код
.block {
    width: 100%;
    width: calc(100% - 40px);
}


3. Продвинутые селекторы

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

Код
/* Несколько примеров */
input[type=text] {
    color: #000;
}
li:nth-child(n) {
    color: #CCC;
}


4. Генерация контента через CSS

Теперь появилась возможность в стилистике CSS, как добавлять или и генерировать контент, и все при помощи псевдо селекторов как ::before и ::after. Которая поддерживается до версий IE9.

5. CSS градиенты

Если вспоминать прошлое, то при добавлении градиента, нужно было реально много сделать, это генерировать маленькую картинку на изображения, что потом еще нужно обязательно растянуть по блоку. Но все это осталось в далеком прошлом, вообще прошли те лихие времена, где тратилось понапрасну время. Так, как сейчас, если нужно добавить градиент, то все производится на чистом CSS.

Код
background: linear-gradient(to bottom, blue, white);


Как понимаете это не все, так как с CSS3, появилось намного больше разных возможностей.
Прикрепления: 2588673.png(24.5 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 19.08.2018, 19:14 | Сообщение 2
Администраторы
Сообщений:18096
Награды: 55


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

Вот простой пример:



HTML

Код
<div class="codmun nventions"></div>
<div class="codmun vanced"></div>


CSS

Код
.codmun {
    width: 75px;
    height: 75px;
}

.nventions {
    background-color: #c1352a;
    margin-bottom: 53px;
}

.vanced {
    background-color: #217dc5;
    margin-top: 53px;
}

Вместо 75px между красным и синим квадратом мы имеем только 53px, край синего квадрата не принимается во внимание вообще. Есть способы борьбы с этим поведением, но лучше просто работать с ним и использовать поля, только в одном направлении, предпочтительно margin-bottom.

Демонстрация
Прикрепления: 4281346.png(1.2 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » 5 вариантов отличных возможностей CSS (Топ 5 красивых эффектов с помощью стилистики CSS3)
  • Страница 1 из 1
  • 1
Поиск: