| Kosten | Пятница, 01 Марта 2019, 23:19 | Сообщение 1 |
| Если кому не известно, то CSS это простой язык, который используется для настройки визуального стиля страниц. У него простой синтаксис, и поэтому его легко понять и безусловно не сложен в настройке. Время от времени наступает момент, когда CSS нужно применять в разных параметрах. Таким образом в такой ситуации, чтобы выполнить работу легко, то здесь будут полезны различные приемы CSS.
Для этого здесь собран список основных трюков и техник CSS, которые могут быть полезны для самых дизайнеров. После того вы узнаете, как работает блочная модель и как плавать эти блоки, что пришло время серьезно отнестись к вашему CSS.
1. Эффекты наведения и переход CSS:
Эффекты наведения позволяют изменять свойства CSS при наведении указателя мыши на определенные элементы, где CSS-переход, это способ управления скоростью анимации при изменении свойств CSS. Например, если вы хотите изменить цвет фона кнопки при наведении.
Код .button{
background: #e4dfdf;
}
.button:hover{
background: #151414;
}
Здесь если наведите курсор мыши, цвет фона изменится, но он будет мгновенным, где визуально не очень красиво смотрится, и визуально привлекательным. Но вы можете применить переход через CSS, который будет отлично смотреться.
Код .button{
transition: all 0.5s ease;
background: #e8e3e3;
}
.button:hover{
background: #1d1c1c;
}
2. Вертикальное центрирование текста с высотой строки:
Это отличный способ выровнять текст по центру, если вы знаете высоту блока, в котором находится текст. Для этого вы можете использовать свойства высоты строки.
Код .block{
height: 50px;
Line-height: 50px;
}
3. Плавное изображение:
Адаптивный дизайн является обязательным для каждого дизайнера сегодня. Для текста они являются текучими по умолчанию, так как они переформатируют, чтобы занять оставшееся пространство, так как браузеры сужены. Но вы можете использовать свойства максимальной ширины, чтобы сделать его плавным.
Код img{
max-width: 100%;
height: auto;
}
4. Селектор: nth-child:
Это используется для сопоставления каждого элемента, который является дочерним элементом, независимо от типа, его родителя. Например: если вы хотите применить свойства CSS только к пятому селектору из группы селекторов.
Код p:nth-child(5){
color: #403e3e;
}
5. Переопределение стилей:
Он используется для переопределения определенного свойства CSS элемента, для которого уже определено свойство CSS, где нужно использовать осторожно.
Например: уже определенный CSS:
Код #block p{
color:#f5f3f3;
}
Если вы хотите переопределить этот CSS, просто используйте! Important в конце CSS.
Код #block p{
color:#dcdcdc !important;
}
6. Кросс-браузерная прозрачность:
Все браузеры не поддерживают прозрачность элемента, где можете использовать эту технику, чтобы заставить ее работать.
Код .element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
7. Создание кругов с радиусом границы:
Радиус границы, это свойство CSS, где можно использовать для создания кругов. Просто установите радиус границы каждой стороны элемента на 50%, чтобы создать отображение круга любого размера.
Код .cirlce {
width: 200px;
height: 200px;
background-color: #000;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
}
8. Фиксированный элемент:
Фиксированный элемент расположен относительно области просмотра, что он всегда остается на одном и том же месте, даже если страница прокручивается.
Код .element{
Position: fixed;
}
9. Несколько границ:
Если вам нужно несколько границ для определенного элемента, вы можете расположить псевдоэлемент, как эта обычная одиночная граница.
Код .circle{
position: relative;
border: 2px solid #000;
}
Теперь используйте псевдоэлемент:
Код .circle:before {
content: " ";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid #000;
}
10. Градиентный текст:
Вы можете добавить цвет градиента к тексту, в то время как текст остается редактируемым и выбираемым веб-текстом.
Код h2 {
font-size: 45px;
background: -webkit-linear-gradient(#e4e0e0, #211f1f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
11. CSS треугольники:
Вы можете сделать крутые треугольники просто с помощью CSS.
Код .traingle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #0b79ef transparent;
}
12. Вращающийся элемент:
Свойство transform используется для применения 2D или 3D преобразования к элементу. Это свойство позволяет вращать элемент в любом направлении
Код .element {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
13. Порядок стека элемента:
Свойство Z-index используется для применения порядка стека элемента. Элемент с большим порядком стека всегда будет перед элементом с более низким порядком стека.
Код .box-large { position: relative; z-index: 1; height: 100px; width: 100px; background: #000; } .box-small { position: absolute; z-index: 3; /* Box small will be infront of box-large */ background: #fff; width: 50px; height: 50px; left: 10px; top: 10px; }
14. Размытый текст:
Вы можете сделать текст размытым.
Код .example {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
15. Первый элемент и крайний:
Код p:first-child{
color: #c6c8cc;
}
P:last-child{
color: #c6c8cc;
}
Без языка таблиц стилей HTML-документы могут быть непредсказуемыми, безжизненными и неприглядными. В качестве основной технологии для создания веб-страниц каждый дизайнер должен освоить различные советы и приемы CSS. Специфика CSS относится к технике, которой придерживается браузер для определения наиболее важного правила для отображения.
Например, если существуют противоречивые правила CSS, браузер будет применять элемент стиля с наибольшим весом. Другими словами, это метод ранжирования, который определяет, какие объявления стилей выигрывают, особенно если существуют похожие объявления CSS.
| | Страна: (RU) |
| |
