Вероятно никога не сте чували за тях, но ще ги обикнете, щом разберете.
CSS.
Език, който отговаря за почти всеки уебсайт в света.
С толкова много свойства, CSS е доста огромен. Намирането на добри свойства сред тях е като да се опитвате да прочетете сам двоичен файл (моля, не опитвайте).
Ето защо направих това за вас (CSS, а не двоичния).
Ето 10 свойства, които може да не използвате много или никога не сте чували, но ще ви харесат, щом ги опознаете.
Персонализирани ленти за превъртане
Нека променим ширината и цвета на лентата за превъртане. Също така, нека го направим и малко кръгъл.
По-долу са частите на лентата за превъртане.
Използваме ::-webkit-scrollbar за промяна на свойствата.
/* Set the width of the scroll bar*/
::-webkit-scrollbar{
width: 10px;
}
/* Change the track to a blue color and give a round border */
::-webkit-scrollbar-track{
background-color: blue;
border-radius: 10px;
}
/* Making the thumb (which shows how much you've scrolled) a gray color
and making it round */
::-webkit-scrollbar-thumb{
background: gray;
border-radius: 10px
}
/* A dark gray color when hovered overn */
::-webkit-scrollbar-thumb:hover{
background: darkgray;
}
Забележка: Това е нестандартно свойство и без -webkit- няма да работи.
Курсори
Променете как изглежда курсорът, когато поставите курсора на мишката върху елемент.
/* An element with class 'first' */
.first{
cursor: not-allowed;
}
/* An element with class 'second' */
.second{
cursor: zoom-in;
}
/* An element with class 'third' */
.third{
cursor: crosshair;
}
Поведение при превъртане
Поведението на превъртане може да направи плавно превъртане, за да направи прехода от една секция към друга по-плавен.
Добавете тази проста линия и вижте ефекта сами.
html{
scroll-behavior:smooth;
}
Вместо просто да прихваща страницата от една секция в друга, тя превърта нагоре/надолу до секцията. Вижте ефекта тук.
Цвят на акцента
Променете цвета на потребителския интерфейс, като контроли на формуляра и квадратчета за отметка.
Вижте как цветът на квадратчето за отметка и бутона за избор е син, вместо стандартния (и скучен) сив.
input{
accent-color: blue;
}
Това е всичко. Можете да използвате селектори, за да направите някои входове сини, някои червени и някои зелени.
И това не променя цвета на текста, така че можете да се забърквате с цветовете и да експериментирате. Цветът на потребителския интерфейс е под наш контрол.
Съотношение
Когато създавате отзивчиви компоненти, постоянната проверка на височината и ширината може да бъде главоболие, тъй като трябва да поддържате съотношения на страните. Видеоклиповете и изображенията понякога може да изглеждат разтегнати.
Ето защо можем да използваме свойството аспектно съотношение. След като зададете стойността на пропорцията и след това зададете ширина, височината се задава автоматично. Или обратното.
/* An elment with class example */
.example{
/* Setting the aspect ratio */
aspect-ratio: 1 / .25;
/* Upon setting width, height is automatically set */
width: 200px;
/* Border is not required, but it is here just to see the effect. */
border: solid black 1px;
}
Сега, след като сме задали ширината, автоматично ще получим височина, равна на 125 px, за да запазим съотношението на страните. Това е много полезно за отзивчивото поведение.
Box Reflect
Това ни позволява да създадем отражения на компонент под него.
За тази демонстрация използвах SVG вълново изображение, което получих с помощта на този уебсайт.
/* An element with class name 'example */
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below;
}
Това създава отражение под SVG.
Можем също да компенсираме малко отражението.
/* An element with class name 'example */
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below 20px;
}
Освен това бих искал да избледнее малко. Можем да използваме градиент за това.
/* An element with class name 'example */
.example{
/* The reflection will appear below. Other possible values are above | left | right */
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}
Това дава хубаво отражение.
Това е нестандартно свойство, поддържано от повечето основни браузъри (с изключение на Firefox).
Проверете дали браузърът поддържа свойство
Как да проверите дали определено свойство се поддържа в CSS.
/* Check if browser supports display: flex */
@supports (display: flex){
/* If it does, set the display to flex */
div{
display: flex
}
}
Въпреки че горният пример винаги ще се поддържа от основните браузъри, нестандартните свойства (като персонализирани ленти за превъртане и отражения на кутия) може да не се поддържат от някои.
Не забравяйте да поставите условието в () скоби.
Ако поставите ключовата дума not, тя ще работи, ако свойството не се поддържа.
@supports not (display: flex){/* If not supported *}
Маски
Можете да използвате маска за изображение в CSS.
/* An object with class example */
.example{
/* Setting the mask from a URL */
-webkit-mask: url(YOUR URL);
mask: url(YOUR URL);
}
В изображението на маската бялото представлява маската, а черното е областта, която трябва да бъде изрязана.
Филтър
Можете да добавяте невероятни филтри към вашите изображения с помощта на CSS. Филтрите са нещо, което виждаме във всяко приложение за споделяне на снимки, а сега нека видим колко лесни са за прилагане
img{
filter: /*YOUR VALUE */;
}
Има много налични филтри. Можете да замъглявате, осветявате и насищате филтри. Можете да направите изображението сиво, да промените неговата непрозрачност, да обърнете цветовете и др.
Вижте тази страница за повече подробности.
Фонови ефекти
Можете да добавите добре изглеждащ филтър към областта зад изображение, като използвате backdrop-filter.
Всички свойства на филтъра са достъпни тук. С други думи, това е просто филтър, който да се приложи към фона.
<div class="image">
<div class="effect">
backdrop-filter: blur(5px);
</div>
</div>
<style>
.image{
background-image: url(YOUR URL);
background-size: cover;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.effect{
font-size: x-large;
color: white;
font-weight: 800;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
padding: 20px;
}
</style>
Това прави ефект като този:
И с това вече знаете 10 нови свойства на CSS. Можете да направите уебсайта си да изглежда много професионално.
Ако ви харесва тази статия, покажете подкрепата си чрез:
- Пляскане
- Следвам за съдържание относно CSS, HTML, JS, Python и AI.
- Отговаряйки на тази статия, разказвайки любимия си имот.
- Или направете всичко от горните 3 😃
