8 bistvenih CSS nasvetov in trikov, ki bi jih moral poznati vsak razvijalec

CSS se uporablja za dodajanje stilov spletni strani, potem ko ste nastavili okostje HTML. Poleg tega lahko ustvarite gladke dizajne v CSS z le nekaj vrsticami kode.

Vsak razvijalec bi moral poznati te trike CSS za hiter in učinkovit razvoj svojih projektov. Zagotovo bodo povečali vašo produktivnost na naslednjo raven – začnimo.

1. Učinki lebdenja

Elementu HTML lahko dodate učinek lebdenja z uporabo : lebdi izbirnik.

Primer: dodajanje učinka lebdenja elementu gumba.

HTML koda:

Pomaknite se nad menoj

CSS koda:

gumb: lebdi {
barva: #0062FF;
obroba: #0062FF polna 1px;
ozadje: #FFFF99;
}

S to kodo se lahko poigrate in dodate učinke, kot je bledenje,rast v, poševno, in tako naprej. Naj bo po svoje!

Učinek zmanjševanja CSS pri lebdenju

gumb{
motnost: 0,5;
}
gumb: lebdi{
motnost: 1;
}

Učinek rasti CSS pri lebdenju

gumb: lebdi{
-webkit-transform: lestvica (1,2);
-ms-transform: lestvica (1,2);
preobrazba: lestvica (1,2);
}

2. Spremenite velikost slik, da se prilegajo vsebniku div

Velikost slike lahko spremenite tako, da bo ustrezala vsebniku div z uporabo višina, premer, in prileganje predmeta lastnosti.

HTML koda:

CSS koda:

.random-image {
 višina: 100 %;
 širina: 100 %;
 prileganje predmeta: vsebovati;
 }

3. Preglasitev vseh slogov

Vse druge deklaracije sloga atributa (vključno z vgrajenimi slogi) lahko preglasite z uporabo !pomembno direktivo na koncu vrednosti.

HTML koda:

 Pozdravljen, svet!

CSS koda:

p {
 barva ozadja: rumena;
 }
 .className {
 barva ozadja: modra !pomembno;
 }
 #idName {
 barva ozadja: zelena;
 }

V tem primeru je !pomembno pravilo prevlada nad vsemi drugimi Barva ozadja deklaracije in zagotavlja, da bo barva ozadja nastavljena na modro in ne zeleno.

4. Skrajšajte besedilo s elipso

Prepolno besedilo lahko skrajšate s tritočko (...) uporabljati prelivanje besedila lastnost CSS.

HTML koda:

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

CSS koda:

.text {
 presledek: Nowrap;
 prelivanje: skrito;
 prelivanje besedila: elipsa;
 širina: 200px;
 }

Povezano: Model CSS Box, razložen s primeri

5. Uporaba pretvorbe besedila

Besedilo lahko prisilite, da se napiše velike, male ali velike črke z uporabo preoblikovanje besedila lastnost CSS.

Velike črke

HTML koda:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS koda:

.velike črke {
 preoblikovanje besedila: velike črke;
 }

male črke

HTML koda:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS koda:

.male črke {
 preoblikovanje besedila: male črke;
 }

Vpišite z veliko začetnico

HTML koda:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS koda:

.capitalize {
 preoblikovanje besedila: velike črke;
 }

6. Uporaba enovrstične deklaracije lastnosti

Uporabite lahko kratične lastnosti v CSS, da bo vaša koda jedrnata in lahko berljiva.

Na primer, CSS ozadje je kratka lastnost, ki vam omogoča, da definirate vrednosti Barva ozadja, slika ozadja, ozadje-ponoviti, in položaj ozadja. Podobno lahko definirate lastnosti za pisava, meja, marža, in oblazinjenje.

Enovrstična izjava lastnosti ozadja

barva ozadja: črna;
slika ozadja: url (images/xyz.png);
ponovitev ozadja: brez ponovitve;
položaj ozadja: levo zgoraj;

Zgornjo izjavo lahko poenostavite na eno vrstico:

ozadje: črn url (images/xyz.png) brez ponovitve levo zgoraj;

Kratke lastnosti so zelo priročne za uporabo, vendar jih morate upoštevati zapleteni robni primeri (kot je opisano v MDN Web Docs), medtem ko jih uporabljate.

Namigi orodij so način za zagotavljanje več informacij o elementu, ko uporabnik premakne kazalec miške nad element.

HTML koda:

Desni opis orodja
To je besedilo orodja

CSS koda:

telo {
 poravnava besedila: središče;
 }
 .tooltip_div {
 položaj: relativni;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrita;
 širina: 170px;
 barva ozadja: modra;
 barva: #fff;
 poravnava besedila: središče;
 radij obrobe: 6px;
 padding: 5px 0;
 /* Postavitev opisa orodja */
 položaj: absolutni;
 z-indeks: 1;
 zgoraj: -5px;
 levo: 105 %;
 }
 .tooltip_div: lebdi .tooltip {
 vidljivost: vidna;
 }

HTML koda:

Levi opis orodja
To je besedilo orodja

CSS koda:

telo {
 poravnava besedila: središče;
 }
 .tooltip_div {
 položaj: relativni;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrita;
 širina: 170px;
 barva ozadja: modra;
 barva: #fff;
 poravnava besedila: središče;
 radij obrobe: 6px;
 padding: 5px 0;
 /* Postavitev opisa orodja */
 položaj: absolutni;
 z-indeks: 1;
 zgoraj: -5px;
 desno: 105 %;
 }
 .tooltip_div: lebdi .tooltip {
 vidljivost: vidna;
 }

HTML koda:

Top Tooltip
To je besedilo orodja

CSS koda:

telo {
 poravnava besedila: središče;
 }
 .tooltip_div {
 margin-top: 100px;
 položaj: relativni;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrita;
 širina: 170px;
 barva ozadja: modra;
 barva: #fff;
 poravnava besedila: središče;
 radij obrobe: 6px;
 padding: 5px 0;
 /* Postavitev opisa orodja */
 položaj: absolutni;
 z-indeks: 1;
 dno: 100 %;
 levo: 50 %;
 rob-levo: -60px;
 }
 .tooltip_div: lebdi .tooltip {
 vidljivost: vidna;
 }

HTML koda:

Spodnji opis orodja
To je besedilo orodja

CSS koda:

telo {
 poravnava besedila: središče;
 }
 .tooltip_div {
 margin-top: 100px;
 položaj: relativni;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrita;
 širina: 170px;
 barva ozadja: modra;
 barva: #fff;
 poravnava besedila: središče;
 radij obrobe: 6px;
 padding: 5px 0;
 /* Postavite opis orodja */
 položaj: absolutni;
 z-indeks: 1;
 vrh: 100 %;
 levo: 50 %;
 rob-levo: -60px;
 }
 .tooltip_div: lebdi .tooltip {
 vidljivost: vidna;
 }

Za ustvarjanje po meri lahko uporabite tudi knjižnico Bootstrap Namigi orodij za zagon.

8. Dodajte senčne učinke

Učinke sence CSS lahko dodate besedilom in elementom z uporabo senca besedila in škatla-senca Lastnosti CSS oz.

Senca besedila CSS

The senca besedila Lastnost CSS doda sence in plasti v besedilo. The senca besedila Lastnost sprejema seznam senc, ločenih z vejicami, ki jih je treba uporabiti za besedilo.

Sintaksa lastnosti CSS text-shadow:

/* Uporabite lahko 4 argumente z lastnostjo CSS text-shadow:
offset-x, offset-y, blur-radius in color */
/* odmik-x | odmik-y | polmer zamegljenosti | barva */
senca besedila: 2px 2px 4px rdeče;
/* barva | odmik-x | odmik-y | polmer zamegljenosti */
senca besedila: #18fa3e 1px 2px 10px;

Opomba: Argumenta barve in polmera zamegljenosti sta neobvezna.

Povezano: Kako uporabljati senco besedila CSS: triki in primeri

Na primer:

ozadje: #e74c3c;
barva: #fff;
družina pisave: lato;
senca besedila: 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, 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, .50) 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, 15 px, 15 px, 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, 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, 26px, 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, 67 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, 37 px, 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, rgba (225,743, px) 225, 73, 57, 0,92), 44px 44px rgba (225, 73, 58, 0,93), 45px 45 px rgba (226, 74, 58, 0,94), 46 px 46 px rgba (227, 74, 58, 0,95), 47 px 47 px rgba (228, 75, 59, 0,96), 49 px, 48 px, 48 px, 47 px, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

The škatla-senca Lastnost se uporablja za uporabo sence na elemente HTML.

Sintaksa lastnosti CSS box-shadow

box-shadow: [horizontalni odmik] [navpični odmik] [polmer zamegljenosti] [izbirni polmer širjenja] [barva];

Opomba: Parametri zamegljenosti, širjenja in barve so neobvezni.

Povezano: Kako uporabljati CSS box-shadow: triki in primeri

Na primer:

senca škatle: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Če si želite ogledati celotno izvorno kodo, uporabljeno v tem članku, je tukaj repozitorij GitHub.

Oblikujte svoje spletno mesto z uporabo sodobnih CSS trikov

Dodajanje senc besedila CSS na spletno mesto je odličen način, da pritegnete pozornost uporabnikov. Spletnemu mestu lahko da določeno eleganco in edinstven občutek. Bodite ustvarjalni in eksperimentirajte z nekaterimi senca besedila primeri, ki se lahko ujemajo s temo vašega spletnega mesta.

11 primerov sence besedila CSS, ki jih lahko preizkusite na svojem spletnem mestu

Z učinki sence besedila v CSS lahko naredite veliko, vendar je lahko težko vedeti, kaj točno je mogoče. Poiščite pomoč pri teh vizualnih primerih.

Preberite Naprej

O avtorju