8 essensielle CSS-tips og triks alle utviklere bør vite

CSS brukes til å legge til stil på en nettside etter at du har satt opp HTML-skjelettet. Dessuten kan du lage glatte design i CSS med bare noen få linjer med kode.

Hver utvikler bør kjenne til disse CSS-triksene for å utvikle prosjektene sine raskt og effektivt. De vil garantert øke produktiviteten din til neste nivå – la oss komme i gang.

1. Hover-effekter

Du kan legge til en hover-effekt til et HTML-element ved å bruke :sveve velger.

Eksempel: Legger til hover-effekt til et knappeelement.

HTML-kode:

Hold musepekeren over meg

CSS-kode:

knapp: hover {
farge: #0062FF;
kantlinje: #0062FF solid 1px;
bakgrunn: #FFFF99;
}

Du kan leke med denne koden og legge til effekter som fade-in,vokse inn, skjevhet, og så videre. Gjør den til din egen!

CSS-fade-in-effekt ved sveving

knapp{
opasitet: 0,5;
}
knapp: hover{
opasitet: 1;
}

CSS Grow-in-effekt ved sveving

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

2. Endre størrelsen på bilder for å passe til en div-beholder

Du kan endre størrelsen på et bilde for å passe til en div-beholder ved å bruke

høyde, bredde, og objekttilpasning egenskaper.

HTML-kode:

CSS-kode:

.random-image {
 høyde: 100 %;
 bredde: 100 %;
 objekttilpasning: inneholde;
 }

3. Overstyrer alle stilene

Du kan overstyre alle andre stilerklæringer for et attributt (inkludert innebygde stiler) ved å bruke !viktig direktiv på slutten av en verdi.

HTML-kode:

 Hei Verden!

CSS-kode:

p {
 bakgrunnsfarge: gul;
 }
 .klassenavn {
 bakgrunnsfarge: blå !viktig;
 }
 #idName {
 bakgrunnsfarge: grønn;
 }

I dette eksemplet er !viktig regelen overstyrer alt annet bakgrunnsfarge erklæringer og sikrer at bakgrunnsfargen blir satt til blå i stedet for grønn.

4. Kutt av tekst med ellipsis

Du kan avkorte overfylt tekst med en ellipse (...) bruker tekst-overflyt CSS-eiendom.

HTML-kode:

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

CSS-kode:

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

I slekt: CSS-boksmodellen forklart med eksempler

5. Bruke tekst-transform

Du kan tvinge tekst til å være store, små eller store bokstaver ved å bruke tekstforvandling CSS-eiendom.

Stor bokstav

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

.stor bokstav {
 tekst-transform: store bokstaver;
 }

Små bokstaver

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

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

Bruk store bokstaver

HTML-kode:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kode:

.capitalize {
 tekst-transform: bruk store bokstaver;
 }

6. Bruker enkeltlinjedeklarasjon

Du kan bruke stenografiegenskapene i CSS for å gjøre koden din kortfattet og lett lesbar.

For eksempel CSS bakgrunn er en stenografi-egenskap som lar deg definere verdiene til bakgrunnsfarge, bakgrunnsbilde, bakgrunnsgjenta, og bakgrunnsposisjon. På samme måte kan du definere egenskaper for font, grense, margin, og polstring.

Enkeltlinjes bakgrunnseiendomserklæring

bakgrunnsfarge: svart;
bakgrunnsbilde: url (images/xyz.png);
bakgrunns-repeat: ingen-repeat;
bakgrunnsposisjon: venstre topp;

Du kan forenkle erklæringen ovenfor til en enkelt linje:

bakgrunn: svart url (images/xyz.png) ingen gjentakelse til venstre øverst;

Stenografiegenskapene er veldig praktiske å bruke, men du må vurdere noen vanskelige kantsaker (som beskrevet på MDN Web Docs) mens du bruker dem.

Verktøytips er en måte å gi mer informasjon om et element når brukeren beveger musepekeren over elementet.

HTML-kode:

Høyre verktøytips
Dette er verktøytipsteksten

CSS-kode:

kropp {
 tekst-align: center;
 }
 .tooltip_div {
 stilling: pårørende;
 display: inline-blokk;
 }
 .tooltip_div .tooltip {
 synlighet: skjult;
 bredde: 170px;
 bakgrunnsfarge: blå;
 farge: #fff;
 tekst-align: center;
 border-radius: 6px;
 polstring: 5px 0;
 /* Plassering av verktøytipset */
 posisjon: absolutt;
 z-indeks: 1;
 topp: -5px;
 venstre: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kode:

Venstre verktøytips
Dette er verktøytipsteksten

CSS-kode:

kropp {
 tekst-align: center;
 }
 .tooltip_div {
 stilling: pårørende;
 display: inline-blokk;
 }
 .tooltip_div .tooltip {
 synlighet: skjult;
 bredde: 170px;
 bakgrunnsfarge: blå;
 farge: #fff;
 tekst-align: center;
 border-radius: 6px;
 polstring: 5px 0;
 /* Plassering av verktøytipset */
 posisjon: absolutt;
 z-indeks: 1;
 topp: -5px;
 høyre: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kode:

Topp verktøytips
Dette er verktøytipsteksten

CSS-kode:

kropp {
 tekst-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 stilling: pårørende;
 display: inline-blokk;
 }
 .tooltip_div .tooltip {
 synlighet: skjult;
 bredde: 170px;
 bakgrunnsfarge: blå;
 farge: #fff;
 tekst-align: center;
 border-radius: 6px;
 polstring: 5px 0;
 /* Plassering av verktøytipset */
 posisjon: absolutt;
 z-indeks: 1;
 bunn: 100 %;
 venstre: 50 %;
 marg-venstre: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kode:

Verktøytips nederst
Dette er verktøytipsteksten

CSS-kode:

kropp {
 tekst-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 stilling: pårørende;
 display: inline-blokk;
 }
 .tooltip_div .tooltip {
 synlighet: skjult;
 bredde: 170px;
 bakgrunnsfarge: blå;
 farge: #fff;
 tekst-align: center;
 border-radius: 6px;
 polstring: 5px 0;
 /* Plasser verktøytipset */
 posisjon: absolutt;
 z-indeks: 1;
 topp: 100 %;
 venstre: 50 %;
 marg-venstre: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

Du kan også bruke Bootstrap-biblioteket til å lage tilpassede Bootstrap verktøytips.

8. Legg til skyggeeffekter

Du kan legge til CSS-skyggeeffekter til tekster og elementer ved å bruke tekst-skygge og boks-skygge CSS-egenskaper.

CSS tekstskygge

De tekst-skygge CSS-egenskapen legger til skygger og lag til teksten. De tekst-skygge egenskap godtar en kommadelt liste over skygger som skal brukes på teksten.

Syntaks for text-shadow CSS-egenskapen:

/* Du kan bruke 4 argumenter med text-shadow CSS-egenskapen:
offset-x, offset-y, blur-radius og color */
/* offset-x | offset-y | blur-radius | farge */
tekst-skygge: 2px 2px 4px rød;
/* farge | offset-x | offset-y | blur-radius */
tekst-skygge: #18fa3e 1px 2px 10px;

Merk: Argumentene for farge og uskarphet-radius er valgfrie.

I slekt: Hvordan bruke CSS-tekstskygge: triks og eksempler

For eksempel:

bakgrunn: #e74c3c;
farge: #fff;
font-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 4p, 0,52 1p, 0,52 rgba), 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, 1,03, 1,52, 4,03, 4,52, 4,03, 4,03, 4,03, 4,03, 4,03, 4,03, 4,03, 4,03, 4,00 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 ), 52px, 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 (193, 58, 44, 0,69), 21px 21px 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 4x 9, 60px, 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,8px rgba (2,8px 2,81px 2,81px 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 9, 70px, 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 (324x rgba (3245, 3245, 325, 325, 325, 325, 325, 325, 325) 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 ), 48px 9r, 48px 9r, 72px 9r, 48px 9r, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

De boks-skygge egenskapen brukes til å bruke en skygge på HTML-elementer.

Syntaks for box-shadow CSS-egenskapen

box-shadow: [horisontal offset] [vertikal offset] [blur radius] [valgfri spredningsradius] [farge];

Merk: Uskarphet, spredning og fargeparametere er valgfrie.

I slekt: Hvordan bruke CSS box-shadow: triks og eksempler

For eksempel:

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

Hvis du vil ta en titt på den fullstendige kildekoden som brukes i denne artikkelen, her er GitHub-depotet.

Style nettstedet ditt med moderne CSS-triks

Å legge til CSS-tekstskygger på et nettsted er en fin måte å tiltrekke brukernes oppmerksomhet. Det kan gi nettstedet en viss eleganse og et unikt preg. Vær kreativ og eksperimenter med noen tekst-skygge eksempler som kan samsvare med temaet på nettstedet ditt.

11 CSS Text Shadow-eksempler du kan prøve på nettstedet ditt

Du kan gjøre mye med tekstskyggeeffekter i CSS, men det kan være vanskelig å vite nøyaktig hva som er mulig. Få hjelp med disse visuelle eksemplene.

Les Neste

Om forfatteren