8 základných CSS tipov a trikov, ktoré by mal vedieť každý vývojár

CSS sa používa na pridanie štýlu na webovú stránku po nastavení kostry HTML. Okrem toho môžete vytvárať úhľadné návrhy v CSS pomocou niekoľkých riadkov kódu.

Každý vývojár by mal poznať tieto CSS triky, aby svoje projekty rozvíjal rýchlo a efektívne. Určite zvýšia vašu produktivitu na ďalšiu úroveň – začnime.

1. Efekty vznášania

Efekt prechodu môžete pridať k prvku HTML pomocou :vznášať sa selektor.

Príklad: Pridanie efektu vznášania sa k prvku tlačidla.

HTML kód:

Vznášaj sa nad mnou

CSS kód:

tlačidlo: umiestnite kurzor myši {
farba: #0062FF;
okraj: #0062FF plný 1px;
pozadie: #FFFF99;
}

S týmto kódom sa môžete pohrať a pridať efekty ako napr vyblednutie,dorast, skresľovať, a tak ďalej. Urobte si to podľa seba!

CSS Fade-in Effect pri umiestnení kurzora myši

tlačidlo{
nepriehľadnosť: 0,5;
}
tlačidlo: visieť{
nepriehľadnosť: 1;
}

Vplyv CSS Grow-in pri umiestnení kurzora myši

tlačidlo: visieť{
-webkit-transform: scale (1.2);
-ms-transformácia: mierka (1,2);
transformácia: mierka (1,2);
}

2. Zmeňte veľkosť obrázkov tak, aby sa zmestili do kontajnera div

Veľkosť obrázka môžete zmeniť tak, aby sa zmestil do kontajnera div pomocou výška, šírkaa objekt-fit vlastnosti.

HTML kód:

CSS kód:

.random-image {
 výška: 100 %;
 šírka: 100 %;
 objekt-fit: obsahovať;
 }

3. Prepísanie všetkých štýlov

Všetky ostatné deklarácie štýlu atribútu (vrátane vložených štýlov) môžete prepísať pomocou !dôležité smernicu na konci hodnoty.

HTML kód:

 Ahoj svet!

CSS kód:

p {
 farba pozadia: žltá;
 }
 .className {
 farba pozadia: modrá !dôležité;
 }
 #idName {
 farba pozadia: zelená;
 }

V tomto príklade !dôležité pravidlo má prednosť pred všetkými ostatnými farba pozadia deklarácií a zabezpečuje, že farba pozadia bude nastavená na modrú a nie na zelenú.

4. Skrátiť text s elipsami

Pretekajúci text môžete skrátiť pomocou troch bodiek (...) pomocou text-overflow Vlastnosť CSS.

HTML kód:

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

CSS kód:

.text {
 white-space: nowrap;
 prepad: skrytý;
 text-overflow: elipsa;
 šírka: 200px;
 }

Súvisiace: Model CSS Box vysvetlený na príkladoch

5. Pomocou transformácie textu

Môžete vynútiť, aby sa text písal veľkými, malými písmenami alebo veľkými písmenami pomocou textová transformácia Vlastnosť CSS.

Veľké písmená

HTML kód:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kód:

.veľké písmená {
 text-transform: veľké písmená;
 }

Malými písmenami

HTML kód:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kód:

.malými písmenami {
 text-transform: malé písmená;
 }

Veľké písmená

HTML kód:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kód:

.capitalize {
 text-transform: veľké písmená;
 }

6. Použitie jednoriadkovej deklarácie vlastníctva

Môžete použiť vlastnosti skratky v CSS, aby bol váš kód stručný a ľahko čitateľný.

Napríklad CSS pozadie je skrátená vlastnosť, ktorá vám umožňuje definovať hodnoty farba pozadia, obrázok na pozadí, pozadie-opakovaťa pozícia na pozadí. Podobne môžete definovať vlastnosti pre písmo, hranica, maržaa vypchávka.

Jednoriadkové vyhlásenie o vlastnostiach na pozadí

farba pozadia: čierna;
background-image: url (images/xyz.png);
background-repeat: no-repeat;
pozícia na pozadí: vľavo hore;

Vyššie uvedené vyhlásenie môžete zjednodušiť na jeden riadok:

pozadie: čierna url (images/xyz.png) bez opakovania vľavo hore;

Skrátené vlastnosti sú veľmi pohodlné na použitie, ale musíte niektoré zvážiť zložité prípady okrajov (ako je uvedené v dokumentoch MDN Web Docs) pri ich používaní.

Popisy nástrojov predstavujú spôsob, ako poskytnúť viac informácií o prvku, keď používateľ presunie ukazovateľ myši nad prvok.

HTML kód:

Right Tooltip
Toto je text popisu

CSS kód:

telo {
 text-align: center;
 }
 .tooltip_div {
 poloha: relatívna;
 displej: inline-block;
 }
 .tooltip_div .tooltip {
 viditeľnosť: skryté;
 šírka: 170px;
 farba pozadia: modrá;
 farba: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 /* Umiestnenie popisku */
 pozícia: absolútna;
 z-index: 1;
 hore: -5px;
 vľavo: 105 %;
 }
 .tooltip_div: podržte kurzor myši .tooltip {
 viditeľnosť: viditeľné;
 }

HTML kód:

Ľavý popis
Toto je text popisu

CSS kód:

telo {
 text-align: center;
 }
 .tooltip_div {
 poloha: relatívna;
 displej: inline-block;
 }
 .tooltip_div .tooltip {
 viditeľnosť: skryté;
 šírka: 170px;
 farba pozadia: modrá;
 farba: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 /* Umiestnenie popisku */
 pozícia: absolútna;
 z-index: 1;
 hore: -5px;
 vpravo: 105 %;
 }
 .tooltip_div: podržte kurzor myši .tooltip {
 viditeľnosť: viditeľné;
 }

HTML kód:

Horný popis
Toto je text popisu

CSS kód:

telo {
 text-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 poloha: relatívna;
 displej: inline-block;
 }
 .tooltip_div .tooltip {
 viditeľnosť: skryté;
 šírka: 170px;
 farba pozadia: modrá;
 farba: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 /* Umiestnenie popisku */
 pozícia: absolútna;
 z-index: 1;
 spodná časť: 100 %;
 vľavo: 50 %;
 ľavý okraj: -60px;
 }
 .tooltip_div: podržte kurzor myši .tooltip {
 viditeľnosť: viditeľné;
 }

HTML kód:

Spodný popis
Toto je text popisu

CSS kód:

telo {
 text-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 poloha: relatívna;
 displej: inline-block;
 }
 .tooltip_div .tooltip {
 viditeľnosť: skryté;
 šírka: 170px;
 farba pozadia: modrá;
 farba: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 /* Umiestnite popis */
 pozícia: absolútna;
 z-index: 1;
 horná časť: 100 %;
 vľavo: 50 %;
 ľavý okraj: -60px;
 }
 .tooltip_div: podržte kurzor myši .tooltip {
 viditeľnosť: viditeľné;
 }

Na vytvorenie vlastného môžete použiť aj knižnicu Bootstrap Tipy pre bootstrap.

8. Pridať tieňové efekty

K textom a prvkom môžete pridať tieňové efekty CSS pomocou textový tieň a box-shadow CSS vlastnosti resp.

Textový tieň CSS

The textový tieň Vlastnosť CSS pridáva do textu tiene a vrstvy. The textový tieň vlastnosť akceptuje čiarkami oddelený zoznam tieňov, ktoré sa majú použiť na text.

Syntax vlastnosti text-shadow CSS:

/* S vlastnosťou CSS text-shadow môžete použiť 4 argumenty:
offset-x, offset-y, rozostrenie-polomer a farba */
/* offset-x | ofset-y | rozostrenie-polomer | farba */
text-shadow: 2px 2px 4px červená;
/* farba | posun-x | ofset-y | polomer rozostrenia */
text-shadow: #18fa3e 1px 2px 10px;

Poznámka: Argumenty farba a polomer rozostrenia sú voliteľné.

Súvisiace: Ako používať CSS text-shadow: triky a príklady

Napríklad:

pozadie: #e74c3c;
farba: #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), 4gba (41px 30px), 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0,55), 7 pixelov 7 pixelov rgba (154, 40, 28, 0,56), 8 pixelov 8 pixelov rgba (158, 42, 30, 0,57), 9 pixelov 9 pixelov rgba (162, 45, 80 pixelov), 830 pixelov 10px rgba (166, 45, 33, 0,59), 11px 11px rgba (169, 47, 34, 0,6), 12px 12 pixelov rgba (173, 48, 36, 0,61), 13 pixelov 13 pixelov rgba (176, 50, 37, 0,62), 14 pixelov 14 pixelov rgba (178, 51, 38, 0,63), 15 rg38, 15,2 pixelov, 16px 16px rgba (184, 54, 40, 0,65), 17px 17px rgba (186, 55, 41, 0,66), 18 pixelov 18 pixelov rgba (189, 56, 42, 0,67), 19 pixelov 19 pixelov rgba (191, 57, 43, 0,68), 20 pixelov 20 pixelov rgba (193, 21, 58 pixelov), 193, 210 pixelov 195, 59, 45, 0,7), 22 px 22 px rgba (197, 60, 46, 0,71), 23 px 23px rgba (199, 61, 47, 0,72), 24px 24px rgba (201, 62, 47, 0,73), 25px 25px rgba (202, 62, 48, 0,74), 26rg492,360px, 27px 27px rgba (206, 64, 49, 0,76), 28px 28px rgba (207, 65, 50, 0,77), 29 pixelov 29 pixelov rgba (209, 65, 51, 0,78), 30 pixelov 30 pixelov rgba (210, 66, 51, 0,79), 31 pixelov 31 pixelov rgba (211, 32, 67, ba 213, 67, 52, 0,81), 33 px 33 px rgba (214, 68, 53, 0,82), 34 px 34 pixelov rgba (215, 69, 53, 0,83), 35 pixelov 35 pixelov rgba (216, 69, 54, 0,84), 36 pixelov 36 pixelov rgba (218, 70, 54, 0,85), 37, 86 52, 37 pixelov, 38px 38px rgba (220, 71, 55, 0,87), 39px 39px rgba (221, 71, 56, 0,88), 40 pixelov 40 pixelov rgba (222, 72, 56, 0,89), 41 pixelov 41 pixelov rgba (223, 72, 57, 0,9), 42 pixelov 42 pixelov rgba (224, 430 pixelov, 224, 430 pixelov, 74rba 225, 73, 57, 0,92), 44 px 44 px rgba (225, 73, 58, 0,93), 45 px 45px rgba (226, 74, 58, 0,94), 46px 46px rgba (227, 74, 58, 0,95), 47px 47px rgba (228, 75, 59, 0,96), 48 rg52, 48,50px, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

The box-shadow vlastnosť sa používa na aplikovanie tieňa na prvky HTML.

Syntax vlastnosti CSS box-shadow

box-shadow: [horizontálny posun] [vertikálny posun] [polomer rozostrenia] [voliteľný polomer roztiahnutia] [farba];

Poznámka: Parametre rozmazania, rozloženia a farby sú voliteľné.

Súvisiace: Ako používať CSS box-shadow: triky a príklady

Napríklad:

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

Ak sa chcete pozrieť na úplný zdrojový kód použitý v tomto článku, tu je úložisko GitHub.

Upravte svoj web pomocou moderných trikov CSS

Pridanie tieňov textu CSS na webovú stránku je skvelý spôsob, ako upútať pozornosť používateľov. Webovej stránke môže dodať určitú eleganciu a jedinečný vzhľad. Buďte kreatívni a experimentujte s niektorými textový tieň príklady, ktoré môžu byť v súlade s témou vášho webu.

11 príkladov tieňov textu CSS, ktoré si môžete vyskúšať na svojom webe

S efektmi tieňa textu v CSS môžete urobiť veľa, ale môže byť ťažké presne vedieť, čo je možné. Získajte pomoc s týmito vizuálnymi príkladmi.

Prečítajte si ďalej

O autorovi