8 essentielle CSS-tip og tricks, som enhver udvikler bør kende

CSS bruges til at tilføje styling til en webside, efter du har opsat HTML-skelettet. Desuden kan du skabe smarte designs i CSS med blot et par linjer kode.

Enhver udvikler bør kende disse CSS-tricks for at udvikle deres projekter hurtigt og effektivt. De vil helt sikkert øge din produktivitet til det næste niveau – lad os komme i gang.

1. Hover effekter

Du kan tilføje en hover-effekt til et HTML-element ved hjælp af :hover vælger.

Eksempel: Tilføjelse af svæveeffekt til et knapelement.

HTML-kode:

Svæv over mig

CSS-kode:

knap: hover {
farve: #0062FF;
kant: #0062FF fast 1px;
baggrund: #FFFF99;
}

Du kan lege med denne kode og tilføje effekter som f.eks fade-in,vokse ind, skævt, og så videre. Gør det til dit eget!

CSS-fade-in-effekt ved hover

knap{
opacitet: 0,5;
}
knap: hover{
opacitet: 1;
}

CSS Grow-in-effekt ved svævning

knap: hover{
-webkit-transform: skala (1.2);
-ms-transform: skala (1,2);
transform: skala (1,2);
}

2. Tilpas størrelse på billeder, så de passer til en div-beholder

Du kan ændre størrelsen på et billede, så det passer til en div-beholder ved hjælp af

højde, bredde, og objekttilpasning ejendomme.

HTML-kode:

CSS-kode:

.random-image {
 højde: 100%;
 bredde: 100%;
 objekttilpasning: indeholde;
 }

3. Tilsidesættelse af alle stilarter

Du kan tilsidesætte alle andre stilerklæringer af en attribut (inklusive indlejrede typografier) ​​ved hjælp af !vigtig direktiv i slutningen af ​​en værdi.

HTML-kode:

 Hej Verden!

CSS-kode:

p {
 baggrundsfarve: gul;
 }
 .className {
 baggrundsfarve: blå !vigtigt;
 }
 #idName {
 baggrundsfarve: grøn;
 }

I dette eksempel er !vigtig reglen tilsidesætter alt andet baggrundsfarve erklæringer og sikrer, at baggrundsfarven bliver sat til blå i stedet for grøn.

4. Afkort tekst med ellipsis

Du kan afkorte overfyldt tekst med en ellipse (...) bruger tekst-overløb CSS ejendom.

HTML-kode:

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

CSS-kode:

.text {
 white-space: nowrap;
 overløb: skjult;
 tekst-overløb: ellipse;
 bredde: 200px;
 }

Relaterede: CSS-boksmodellen forklaret med eksempler

5. Brug af tekst-transform

Du kan tvinge tekst til at være med store bogstaver, små bogstaver eller store bogstaver ved hjælp af tekst-transformation CSS ejendom.

Store bogstaver

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

.store bogstaver {
 tekst-transform: store bogstaver;
 }

Små bogstaver

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

.små bogstaver {
 tekst-transform: små bogstaver;
 }

Brug stort

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

.capitalize {
 tekst-transform: skrive med store bogstaver;
 }

6. Brug af egenskabserklæring på én linje

Du kan bruge stenografiegenskaberne i CSS til at gøre din kode kortfattet og letlæselig.

For eksempel CSS baggrund er en stenografi egenskab, der giver dig mulighed for at definere værdierne af baggrundsfarve, baggrundsbillede, baggrund-gentag, og baggrundsposition. På samme måde kan du definere egenskaber for skrifttype, grænse, margen, og polstring.

Enkeltlinjet baggrundsdeklaration

baggrundsfarve: sort;
baggrundsbillede: url (images/xyz.png);
baggrunds-gentag: ingen gentagelse;
baggrundsposition: venstre top;

Du kan forenkle ovenstående erklæring til en enkelt linje:

baggrund: sort url (images/xyz.png) ingen gentagelse til venstre øverst;

Stenografiegenskaberne er meget praktiske at bruge, men du skal overveje nogle vanskelige kant sager (som beskrevet på MDN Web Docs), mens du bruger dem.

Værktøjstip er en måde at give flere oplysninger om et element, når brugeren flytter musemarkøren hen over elementet.

HTML-kode:

Højre værktøjstip
Dette er værktøjstip-teksten

CSS-kode:

krop {
 tekst-align: center;
 }
 .tooltip_div {
 stilling: relativ;
 display: inline-blok;
 }
 .tooltip_div .tooltip {
 synlighed: skjult;
 bredde: 170px;
 baggrundsfarve: blå;
 farve: #fff;
 tekst-align: center;
 kant-radius: 6px;
 polstring: 5px 0;
 /* Placering af værktøjstip */
 position: absolut;
 z-indeks: 1;
 top: -5px;
 venstre: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighed: synlig;
 }

HTML-kode:

Venstre værktøjstip
Dette er værktøjstip-teksten

CSS-kode:

krop {
 tekst-align: center;
 }
 .tooltip_div {
 stilling: relativ;
 display: inline-blok;
 }
 .tooltip_div .tooltip {
 synlighed: skjult;
 bredde: 170px;
 baggrundsfarve: blå;
 farve: #fff;
 tekst-align: center;
 kant-radius: 6px;
 polstring: 5px 0;
 /* Placering af værktøjstip */
 position: absolut;
 z-indeks: 1;
 top: -5px;
 højre: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighed: synlig;
 }

HTML-kode:

Topværktøjstip
Dette er værktøjstip-teksten

CSS-kode:

krop {
 tekst-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 stilling: relativ;
 display: inline-blok;
 }
 .tooltip_div .tooltip {
 synlighed: skjult;
 bredde: 170px;
 baggrundsfarve: blå;
 farve: #fff;
 tekst-align: center;
 kant-radius: 6px;
 polstring: 5px 0;
 /* Placering af værktøjstip */
 position: absolut;
 z-indeks: 1;
 bund: 100%;
 venstre: 50%;
 margin-venstre: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighed: synlig;
 }

HTML-kode:

Nederste værktøjstip
Dette er værktøjstip-teksten

CSS-kode:

krop {
 tekst-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 stilling: relativ;
 display: inline-blok;
 }
 .tooltip_div .tooltip {
 synlighed: skjult;
 bredde: 170px;
 baggrundsfarve: blå;
 farve: #fff;
 tekst-align: center;
 kant-radius: 6px;
 polstring: 5px 0;
 /* Placer værktøjstip */
 position: absolut;
 z-indeks: 1;
 top: 100%;
 venstre: 50%;
 margin-venstre: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighed: synlig;
 }

Du kan også bruge Bootstrap-biblioteket til at oprette brugerdefinerede Bootstrap værktøjstip.

8. Tilføj skyggeeffekter

Du kan tilføje CSS-skyggeeffekter til tekster og elementer ved hjælp af tekst-skygge og kasse-skygge CSS egenskaber hhv.

CSS tekstskygge

Det tekst-skygge CSS-egenskab tilføjer skygger og lag til teksten. Det tekst-skygge egenskaben accepterer en kommasepareret liste over skygger, der skal anvendes på teksten.

Syntaks for text-shadow CSS-egenskaben:

/* Du kan bruge 4 argumenter med egenskaben text-shadow CSS:
offset-x, offset-y, sløringsradius og farve */
/* offset-x | offset-y | sløringsradius | farve */
tekst-skygge: 2px 2px 4px rød;
/* farve | offset-x | offset-y | sløringsradius */
tekst-skygge: #18fa3e 1px 2px 10px;

Bemærk: Argumenterne for farve og sløringsradius er valgfri.

Relaterede: Sådan bruger du CSS text-shadow: Tricks og eksempler

For eksempel:

baggrund: #e74c3c;
farve: #fff;
skrifttype-familie: lato;
tekst-skygge: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 4x 4g, 0,52), 0,52, 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 (4,52, 162, 162, 162, 162, 1,52, 4,52, 4,52, 4,52, 4,52, 4,53, 4,53, 4,52, 158, 42, 30, 0,57). 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), 515px 1, 51x 1, 51x 1, 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 (20px rgba, 19px rgba, 19px rgba (2,19 px 4,19 px 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 ), 26px, 40x, 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 (2.x rgba (2,81 px 2,81 px 2, 5 px 2, 5 px 2, 5 px 2, 5 px 2, 5 px rgba) 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 ), 370px., 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 (224, 73, 57, 0,91), 43px 43px RGBA ( 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), 42px, 9g, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

Det kasse-skygge egenskaben bruges til at anvende en skygge på HTML-elementer.

Syntaks for box-shadow CSS-egenskaben

box-shadow: [horisontal offset] [lodret offset] [sløringsradius] [valgfri spredningsradius] [farve];

Bemærk: Slørings-, sprednings- og farveparametrene er valgfrie.

Relaterede: Sådan bruges CSS box-shadow: Tricks og eksempler

For eksempel:

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

Hvis du vil have et kig på den komplette kildekode, der bruges i denne artikel, er her GitHub-depotet.

Style dit websted ved hjælp af moderne CSS-tricks

Tilføjelse af CSS-tekstskygger til et websted er en fantastisk måde at tiltrække brugernes opmærksomhed. Det kan give hjemmesiden en vis elegance og et unikt præg. Bliv kreativ og eksperimenter med nogle tekst-skygge eksempler, der kan stemme overens med temaet på din hjemmeside.

11 eksempler på CSS-tekstskygge, som du kan prøve på dit websted

Du kan gøre meget med tekstskyggeeffekter i CSS, men det kan være svært at vide præcis, hvad der er muligt. Få hjælp til disse visuelle eksempler.

Læs Næste

Om forfatteren