CSS се използва за добавяне на стил към уеб страница, след като сте настроили HTML скелета. Освен това можете да създавате гладки дизайни в CSS само с няколко реда код.
Всеки разработчик трябва да знае тези CSS трикове, за да развива своите проекти бързо и ефективно. Те със сигурност ще увеличат производителността ви до следващото ниво - нека да започнем.
1. Ефекти при задържане на курсора
Можете да добавите ефект на задържане на мишката към HTML елемент с помощта на :hover селектор.
Пример: Добавяне на ефект на задържане на мишката към елемент от бутон.
HTML код:
CSS код:
бутон: задръжте курсора {
цвят: #0062FF;
граница: #0062FF плътен 1px;
фон: #FFFF99;
}Можете да си играете с този код и да добавяте ефекти като избледнява,израстване, изкривяване, и така нататък. Направете го сами!
CSS ефект на избледняване при задържане на мишката
бутон{
непрозрачност: 0,5;
}
бутон: задържане на мишката{
непрозрачност: 1;
}CSS ефект на растеж при задържане на мишката
бутон: задържане на мишката{
-webkit-transform: мащаб (1.2);
-ms-transform: мащаб (1.2);
трансформиране: мащаб (1.2);
}2. Преоразмерете изображенията, за да паснат на контейнер div
Можете да преоразмерите изображение, за да пасне на контейнер div, като използвате височина, ширина, и съвпадение на обекта Имоти.
HTML код:
CSS код:
.random-image {
височина: 100%;
ширина: 100%;
object-fit: съдържат;
}3. Отмяна на всички стилове
Можете да замените всички други декларации за стил на атрибут (включително вградени стилове), като използвате !важно директива в края на стойност.
HTML код:
Здравей свят!
CSS код:
p {
цвят на фона: жълт;
}
.className {
цвят на фона: син !важно;
}
#idName {
цвят на фона: зелен;
}В този пример, !важно правилото отменя всички останали Цвят на фона декларации и гарантира, че цветът на фона ще бъде зададен на син, а не на зелен.
4. Съкратете текста с многоточие
Можете да съкратите препълващия текст с многоточие (...) използвайки препълване на текст CSS свойство.
HTML код:
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
CSS код:
.текст {
бяло пространство: nowrap;
преливане: скрито;
текст-препълване: многоточие;
ширина: 200px;
}Свързани: Моделът CSS Box, обяснен с примери
5. Използване на текстова трансформация
Можете да принудите текста да бъде с главни, малки или главни букви, като използвате преобразуване на текст CSS свойство.
Главна буква
HTML код:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS код:
.Главна буква {
преобразуване на текст: главни букви;
}Малки букви
HTML код:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS код:
.lowercase {
преобразуване на текст: малки букви;
}Изписвайте с главни букви
HTML код:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS код:
.capitalize {
преобразуване на текст: изписване с главни букви;
}6. Използване на едноредова декларация за свойство
Можете да използвате съкратените свойства в CSS, за да направите кода си кратък и лесно четим.
Например CSS заден план е съкратено свойство, което ви позволява да дефинирате стойностите на Цвят на фона, фоново изображение, фоново повторение, и фонова позиция. По същия начин можете да дефинирате свойства за шрифт, граница, марж, и подплата.
Едноредова декларация за фоново свойство
цвят на фона: черен;
фоново изображение: url (images/xyz.png);
фоново повторение: без повторение;
позиция на фона: отгоре отляво;Можете да опростите горната декларация до един ред:
фон: черен url (images/xyz.png) без повторение вляво отгоре;Съкратените свойства са много удобни за използване, но трябва да вземете предвид някои трудни крайни случаи (както е посочено в MDN Web Docs), докато ги използвате.
Подсказките са начин за предоставяне на повече информация за елемент, когато потребителят премести показалеца на мишката върху елемента.
HTML код:
Десен подсказка
Това е текстът на подсказката
CSS код:
тяло {
подравняване на текста: център;
}
.tooltip_div {
позиция: относителна;
дисплей: inline-block;
}
.tooltip_div .tooltip {
видимост: скрита;
ширина: 170px;
цвят на фона: син;
цвят: #fff;
подравняване на текста: център;
радиус на границата: 6px;
допълване: 5px 0;
/* Позициониране на подсказката */
позиция: абсолютна;
z-индекс: 1;
отгоре: -5px;
ляво: 105%;
}
.tooltip_div: задръжте курсора на мишката .tooltip {
видимост: видима;
}HTML код:
Ляв подсказка
Това е текстът на подсказката
CSS код:
тяло {
подравняване на текста: център;
}
.tooltip_div {
позиция: относителна;
дисплей: inline-block;
}
.tooltip_div .tooltip {
видимост: скрита;
ширина: 170px;
цвят на фона: син;
цвят: #fff;
подравняване на текста: център;
радиус на границата: 6px;
допълване: 5px 0;
/* Позициониране на подсказката */
позиция: абсолютна;
z-индекс: 1;
отгоре: -5px;
вдясно: 105%;
}
.tooltip_div: задръжте курсора на мишката .tooltip {
видимост: видима;
}HTML код:
Най-горен подсказка
Това е текстът на подсказката
CSS код:
тяло {
подравняване на текста: център;
}
.tooltip_div {
margin-top: 100px;
позиция: относителна;
дисплей: inline-block;
}
.tooltip_div .tooltip {
видимост: скрита;
ширина: 170px;
цвят на фона: син;
цвят: #fff;
подравняване на текста: център;
радиус на границата: 6px;
допълване: 5px 0;
/* Позициониране на подсказката */
позиция: абсолютна;
z-индекс: 1;
дъно: 100%;
ляво: 50%;
margin-left: -60px;
}
.tooltip_div: задръжте курсора на мишката .tooltip {
видимост: видима;
}HTML код:
Долна подсказка
Това е текстът на подсказката
CSS код:
тяло {
подравняване на текста: център;
}
.tooltip_div {
margin-top: 100px;
позиция: относителна;
дисплей: inline-block;
}
.tooltip_div .tooltip {
видимост: скрита;
ширина: 170px;
цвят на фона: син;
цвят: #fff;
подравняване на текста: център;
радиус на границата: 6px;
допълване: 5px 0;
/* Позициониране на подсказката */
позиция: абсолютна;
z-индекс: 1;
отгоре: 100%;
ляво: 50%;
margin-left: -60px;
}
.tooltip_div: задръжте курсора на мишката .tooltip {
видимост: видима;
}Можете също да използвате библиотеката Bootstrap, за да създадете персонализирани Подсказки за Bootstrap.
8. Добавете ефекти на сянка
Можете да добавяте CSS ефекти на сянка към текстове и елементи с помощта на текстова сянка и на кутия-сянка CSS свойства съответно.
CSS текстова сянка
В текстова сянка CSS свойството добавя сенки и слоеве към текста. В текстова сянка свойството приема разделен със запетая списък със сенки, които да бъдат приложени към текста.
Синтаксис на CSS свойството text-shadow:
/* Можете да използвате 4 аргумента с CSS свойството text-shadow:
offset-x, offset-y, радиус на размазване и цвят */
/* отместване-x | изместване-y | радиус на размазване | цвят */
текстова сянка: 2px 2px 4px червено;
/* цвят | отместване-x | изместване-y | радиус на размазване */
текстова сянка: #18fa3e 1px 2px 10px;Забележка: Аргументите за цвят и радиус на размазване не са задължителни.
Свързани: Как да използвате CSS текстова сянка: Трикове и примери
Например:
фон: #e74c3c;
цвят: #fff;
семейство шрифтове: lato;
текстова сянка: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52), 4gba31px (4gba34px, 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0.55), 7px 7px rgba (154, 40, 28, 0.56), 8px 8px rgba (158, 42, 30, 0.57), 9px 9px rgba (1631, 410, .px 10px rgba (166, 45, 33, 0,59), 11px 11px rgba (169, 47, 34, 0,6), 12px 12px rgba (173, 48, 36, 0,61), 13px 13px rgba (176, 50, 37, 0,62), 14px 14px rgba (178, 51, 38, 0,63), 15px, 15px, 15 px, 154px, 150px, 16px 16px rgba (184, 54, 40, 0,65), 17px 17px rgba (186, 55, 41, 0,66), 18px 18px rgba (189, 56, 42, 0,67), 19px 19px rgba (191, 57, 43, 0,68), 20px 20px rgba (1944, 58 px) (1944, 58 px 195, 59, 45, 0.7), 22px 22px rgba (197, 60, 46, 0.71), 23px 23px rgba (199, 61, 47, 0,72), 24px 24px rgba (201, 62, 47, 0,73), 25px 25px rgba (202, 62, 48, 0,74), 24px, 24px, 26px, 264px, 26px, 27px 27px rgba (206, 64, 49, 0,76), 28px 28px rgba (207, 65, 50, 0.77), 29px 29px rgba (209, 65, 51, 0.78), 30px 30px rgba (210, 66, 51, 0.79), 31px 31px rgba (2152, 67px, px 213, 67, 52, 0.81), 33px 33px rgba (214, 68, 53, 0.82), 34px 34px rgba (215, 69, 53, 0.83), 35px 35px rgba (216, 69, 54, 0.84), 36px 36px rgba (218, 70, 54, 0.85), 37px, 37px, 372px, 37px, 37px, 38px 38px rgba (220, 71, 55, 0.87), 39px 39px rgba (221, 71, 56, 0.88), 40px 40px rgba (222, 72, 56, 0.89), 41px 41px rgba (223, 72, 57, 0.9), 42px 42px rgba (225,743, px rgba (225,743, px 225, 73, 57, 0.92), 44px 44px rgba (225, 73, 58, 0.93), 45px 45px rgba (226, 74, 58, 0.94), 46px 46px rgba (227, 74, 58, 0.95), 47px 47px rgba (228, 75, 59, 0.96), 49px, 48px, 48px, 48px, 47px, 49px 49px rgba (230, 75, 59, 0.98), 50px 50px rgba (230, 76, 60, 0.99);CSS Box Shadow
В кутия-сянка свойството се използва за прилагане на сянка към HTML елементи.
Синтаксис на CSS свойството box-shadow
box-shadow: [хоризонтално отместване] [вертикално отместване] [радиус на размазване] [незадължителен радиус на разпространение] [цвят];Забележка: Параметрите за размазване, разпространение и цвят са по избор.
Свързани: Как да използвате CSS box-shadow: Трикове и примери
Например:
box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;Ако искате да разгледате пълния изходен код, използван в тази статия, ето хранилището на GitHub.
Оформете уебсайта си с помощта на модерни CSS трикове
Добавянето на CSS текстови сенки към уебсайт е чудесен начин да привлечете вниманието на потребителите. Може да придаде на уебсайта определена елегантност и уникално усещане. Бъдете креативни и експериментирайте с някои текстова сянка примери, които могат да съответстват на темата на вашия уебсайт.
Можете да направите много с ефектите на сянка на текст в CSS, но може да е трудно да разберете какво точно е възможно. Получете помощ с тези визуални примери.
Прочетете Следващото
- Програмиране
- CSS
- Уеб дизайн
- Уеб разработка
Юврадж е студент по компютърни науки в Университета в Делхи, Индия. Той е страстен за Full Stack уеб разработка. Когато не пише, той изследва дълбочината на различните технологии.
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!
Щракнете тук, за да се абонирате
