CSS se používá k přidání stylů na webovou stránku poté, co jste nastavili kostru HTML. Kromě toho můžete vytvářet elegantní návrhy v CSS pomocí několika řádků kódu.

Každý vývojář by měl znát tyto CSS triky, aby mohl své projekty rozvíjet rychle a efektivně. Určitě zvýší vaši produktivitu na další úroveň – pojďme začít.

1. Efekty přejetí myší

Efekt přechodu můžete přidat k prvku HTML pomocí :vznášet se volič.

Příklad: Přidání efektu přechodu k prvku tlačítka.

HTML kód:

CSS kód:

tlačítko: najet {
barva: #0062FF;
ohraničení: #0062FF plný 1px;
pozadí: #FFFF99;
}

S tímto kódem si můžete pohrát a přidat efekty jako fade-in,vyrůst v, překroutit, a tak dále. Udělejte si to po svém!

CSS Fade-in efekt při umístění kurzoru

knoflík{
krytí: 0,5;
}
tlačítko: najet{
neprůhlednost: 1;
}

CSS Grow-in efekt při umístění kurzoru

tlačítko: najet{
-webkit-transform: scale (1.2);
-ms-transformace: měřítko (1,2);
transformace: měřítko (1,2);
}

2. Změňte velikost obrázků tak, aby se vešly do kontejneru div

Velikost obrázku můžete změnit tak, aby se vešel do kontejneru div pomocí

instagram viewer
výška, šířka, a objekt-fit vlastnosti.

HTML kód:

CSS kód:

.random-image {
výška: 100 %;
šířka: 100 %;
object-fit: obsahovat;
}

3. Přepsání všech stylů

Všechny ostatní deklarace stylu atributu (včetně vložených stylů) můžete přepsat pomocí !Důležité direktiva na konci hodnoty.

HTML kód:


Ahoj světe!

CSS kód:

p {
barva pozadí: žlutá;
}
.jméno třídy {
barva pozadí: modrá !důležité;
}
#idName {
barva pozadí: zelená;
}

V tomto příkladu je !Důležité pravidlo má přednost před všemi ostatními barva pozadí deklarací a zajistí, že barva pozadí bude nastavena na modrou, nikoli na zelenou.

4. Zkrátit Text S Elipsou

Přetékající text můžete zkrátit třemi tečkami (...) za použití přetečení textu Vlastnost CSS.

HTML kód:


Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

CSS kód:

.text {
white-space: nowrap;
přepad: skrytý;
text-overflow: elipsa;
šířka: 200px;
}

Příbuzný: Model CSS Box vysvětlený na příkladech

5. Pomocí textové transformace

Můžete vynutit, aby byl text psán velkými, malými nebo velkými písmeny pomocí textová transformace Vlastnost CSS.

Velká písmena

HTML kód:


Lorem ipsum dolor sit amet, consectetur adipisicing elita.

CSS kód:

.velká písmena {
text-transform: velká písmena;
}

malá písmena

HTML kód:


Lorem ipsum dolor sit amet, consectetur adipisicing elita.

CSS kód:

.malé písmeno {
text-transform: malá písmena;
}

Velká písmena

HTML kód:


Lorem ipsum dolor sit amet, consectetur adipisicing elita.

CSS kód:

.capitalize {
text-transform: velká písmena;
}

6. Použití jednořádkové deklarace vlastnosti

Můžete použít zkrácené vlastnosti v CSS, aby byl váš kód stručný a snadno čitelný.

Například CSS Pozadí je zkrácená vlastnost, která vám umožňuje definovat hodnoty barva pozadí, obrázek na pozadí, pozadí-opakování, a pozadí-pozice. Podobně můžete definovat vlastnosti pro písmo, okraj, okraj, a vycpávka.

Jednořádkové prohlášení o vlastnosti na pozadí

barva pozadí: černá;
background-image: url (images/xyz.png);
background-repeat: no-repeat;
pozadí-pozice: vlevo nahoře;

Výše uvedené prohlášení můžete zjednodušit na jeden řádek:

pozadí: černá url (images/xyz.png) bez opakování vlevo nahoře;

Vlastnosti těsnopisu se velmi pohodlně používají, ale musíte některé zvážit složité okrajové případy (jak je uvedeno na webových dokumentech MDN) při jejich používání.

Popisky představují způsob, jak poskytnout více informací o prvku, když uživatel přesune ukazatel myši na prvek.

HTML kód:

Pravá nápověda
Toto je text popisku

CSS kód:

tělo {
text-align: center;
}
.tooltip_div {
poloha: relativní;
displej: inline-block;
}
.tooltip_div .tooltip {
viditelnost: skrytý;
šířka: 170px;
barva pozadí: modrá;
barva: #fff;
text-align: center;
border-radius: 6px;
odsazení: 5px 0;
/* Umístění popisku */
pozice: absolutní;
z-index: 1;
horní: -5px;
vlevo: 105 %;
}
.tooltip_div: ukaž .tooltip {
viditelnost: viditelné;
}

HTML kód:

Levá nápověda
Toto je text popisku

CSS kód:

tělo {
text-align: center;
}
.tooltip_div {
poloha: relativní;
displej: inline-block;
}
.tooltip_div .tooltip {
viditelnost: skrytý;
šířka: 170px;
barva pozadí: modrá;
barva: #fff;
text-align: center;
border-radius: 6px;
odsazení: 5px 0;
/* Umístění popisku */
pozice: absolutní;
z-index: 1;
horní: -5px;
vpravo: 105 %;
}
.tooltip_div: ukaž .tooltip {
viditelnost: viditelné;
}

HTML kód:

Top Tooltip
Toto je text popisku

CSS kód:

tělo {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
poloha: relativní;
displej: inline-block;
}
.tooltip_div .tooltip {
viditelnost: skrytý;
šířka: 170px;
barva pozadí: modrá;
barva: #fff;
text-align: center;
border-radius: 6px;
odsazení: 5px 0;
/* Umístění popisku */
pozice: absolutní;
z-index: 1;
dno: 100 %;
vlevo: 50 %;
margin-left: -60px;
}
.tooltip_div: ukaž .tooltip {
viditelnost: viditelné;
}

HTML kód:

Dolní nápověda
Toto je text popisku

CSS kód:

tělo {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
poloha: relativní;
displej: inline-block;
}
.tooltip_div .tooltip {
viditelnost: skrytý;
šířka: 170px;
barva pozadí: modrá;
barva: #fff;
text-align: center;
border-radius: 6px;
odsazení: 5px 0;
/* Umístěte popisek */
pozice: absolutní;
z-index: 1;
horní: 100 %;
vlevo: 50 %;
margin-left: -60px;
}
.tooltip_div: ukaž .tooltip {
viditelnost: viditelné;
}

K vytvoření vlastní můžete také použít knihovnu Bootstrap Popisky bootstrapu.

8. Přidejte stínové efekty

K textům a prvkům můžete přidat stínové efekty CSS pomocí textový stín a box-shadow CSS vlastnosti resp.

Textový stín CSS

The textový stín Vlastnost CSS přidává do textu stíny a vrstvy. The textový stín vlastnost přijímá čárkami oddělený seznam stínů, které mají být aplikovány na text.

Syntaxe vlastnosti text-shadow CSS:

/* S vlastností text-shadow CSS můžete použít 4 argumenty:
offset-x, offset-y, blur-radius a color */
/* offset-x | offset-y | poloměr rozostření | barva */
text-shadow: 2px 2px 4px červená;
/* barva | offset-x | offset-y | poloměr rozostření */
text-shadow: #18fa3e 1px 2px 10px;

Poznámka: Argumenty barva a poloměr rozostření jsou volitelné.

Příbuzný: Jak používat CSS text-shadow: triky a příklady

Například:

pozadí: #e74c3c;
barva: #fff;
font-family: lato;
text-shadow: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 0,52), 4gba41 30px, 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0,55), 7 pixelů 7 pixelů rgba (154, 40, 28, 0,56), 8 pixelů 8 pixelů rgba (158, 42, 30, 0,57), 9 pixelů 9 pixelů rgba (162, 410, 80 pixelů), 162, 450 pixelů 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), 154381,50 px, 15438,50 px, 16px 16px rgba (184, 54, 40, 0,65), 17px 17px rgba (186, 55, 41, 0,66), 18 pixelů 18 pixelů rgba (189, 56, 42, 0,67), 19 pixelů 19 pixelů rgba (191, 57, 43, 0,68), 20 pixelů 20 pixelů rgba (193, 21, 58 pixelů), 1941 pixelů, 58, rgba 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), 26 rgba (26,540,360 px), 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 (211, 32,67,ba) 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), 37,8652, 370px, 38px 38px rgba (220, 71, 55, 0,87), 39px 39px rgba (221, 71, 56, 0,88), 40 pixelů 40 pixelů rgba (222, 72, 56, 0,89), 41 pixelů 41 pixelů rgba (223, 72, 57, 0,9), 42 pixelů 42 pixelů rgba (224, 439 pixelů, 224, 430 pixelů, 55 pixelů 225, 73, 57, 0,92), 44px 44px rgba (225, 73, 58, 0,93), 45px 45 pixelů rgba (226, 74, 58, 0,94), 46 pixelů 46 pixelů rgba (227, 74, 58, 0,95), 47 pixelů 47 pixelů rgba (228, 75, 59, 0,96), 48,97297 pixelů, 48,975297 pixelů, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

The box-shadow vlastnost se používá k aplikaci stínu na prvky HTML.

Syntaxe vlastnosti CSS box-shadow

box-shadow: [horizontální posun] [vertikální posun] [poloměr rozostření] [volitelný poloměr šíření] [barva];

Poznámka: Parametry rozostření, roztažení a barvy jsou volitelné.

Příbuzný: Jak používat CSS box-shadow: triky a příklady

Například:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Pokud se chcete podívat na úplný zdrojový kód použitý v tomto článku, zde je úložiště GitHub.

Upravte svůj web pomocí moderních triků CSS

Přidání stínů textu CSS na web je skvělý způsob, jak přitáhnout pozornost uživatelů. Webu může dodat určitou eleganci a jedinečný dojem. Buďte kreativní a experimentujte s některými textový stín příklady, které mohou odpovídat tématu vašeho webu.

11 příkladů stínů textu CSS, které si můžete vyzkoušet na svém webu

S efekty stínů textu v CSS můžete udělat hodně, ale může být obtížné přesně vědět, co je možné. Získejte pomoc s těmito vizuálními příklady.

Přečtěte si další

PodíltweetE-mailem
Související témata
  • Programování
  • CSS
  • Webový design
  • Vývoj webu
O autorovi
Yuvraj Chandra (81 publikovaných článků)

Yuvraj je vysokoškolským studentem informatiky na univerzitě v Dillí v Indii. Je nadšený pro Full Stack Web Development. Když nepíše, zkoumá hloubku různých technologií.

Více od Yuvraj Chandra

Přihlaste se k odběru našeho newsletteru

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!

Chcete-li se přihlásit k odběru, klikněte sem