8 viktiga CSS-tips och tricks som alla utvecklare bör känna till

CSS används för att lägga till stil på en webbsida efter att du har ställt in HTML-skelettet. Dessutom kan du skapa snygg design i CSS med bara några rader kod.

Varje utvecklare bör känna till dessa CSS-trick för att utveckla sina projekt snabbt och effektivt. De kommer garanterat att öka din produktivitet till nästa nivå – låt oss komma igång.

1. Hover-effekter

Du kan lägga till en hovringseffekt till ett HTML-element med hjälp av :sväva väljare.

Exempel: Lägger till hovringseffekt till ett knappelement.

HTML-kod:

Håll muspekaren över mig

CSS-kod:

knapp: hover {
färg: #0062FF;
kantlinje: #0062FF fast 1px;
bakgrund: #FFFF99;
}

Du kan leka med den här koden och lägga till effekter som tona in,växa i, skev, och så vidare. Gör den till din egen!

CSS-toningseffekt vid hovring

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

CSS Grow-in-effekt vid hovring

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

2. Ändra storlek på bilder för att passa en div-behållare

Du kan ändra storlek på en bild så att den passar en div-behållare med hjälp av

höjd, bredd, och objektpassning egenskaper.

HTML-kod:

CSS-kod:

.random-image {
 höjd: 100%;
 bredd: 100%;
 objektpassning: innehålla;
 }

3. Åsidosätter alla stilar

Du kan åsidosätta alla andra stildeklarationer för ett attribut (inklusive inline-stilar) med hjälp av !Viktig direktiv i slutet av ett värde.

HTML-kod:

 Hej världen!

CSS-kod:

p {
 bakgrundsfärg: gul;
 }
 .klassnamn {
 bakgrundsfärg: blå !viktigt;
 }
 #idName {
 bakgrundsfärg: grön;
 }

I det här exemplet är !Viktig regeln åsidosätter allt annat bakgrundsfärg deklarationer och säkerställer att bakgrundsfärgen ställs in på blå istället för grön.

4. Trunkerat Text Med Ellipsis

Du kan trunkera överfull text med en ellips (...) använda text-spill CSS-egenskap.

HTML-kod:

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

CSS-kod:

.text {
 white-space: nowrap;
 overflow: gömd;
 text-overflow: ellips;
 bredd: 200px;
 }

Relaterad: CSS-boxmodellen förklaras med exempel

5. Använder text-transform

Du kan tvinga text att vara versaler, gemener eller versaler med hjälp av textomvandling CSS-egenskap.

Versal

HTML-kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kod:

.stora bokstäver {
 text-transform: versaler;
 }

Små bokstäver

HTML-kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kod:

.små bokstäver {
 text-transform: gemener;
 }

Kapitalisera

HTML-kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS-kod:

.capitalize {
 text-transform: versal;
 }

6. Använder egendomsdeklaration på en rad

Du kan använda stenografiegenskaperna i CSS för att göra din kod kortfattad och lättläsbar.

Till exempel CSS bakgrund är en stenografi-egenskap som låter dig definiera värdena för bakgrundsfärg, bakgrundsbild, bakgrund-upprepa, och bakgrundsposition. På samma sätt kan du definiera egenskaper för font, gräns, marginal, och stoppning.

Enradig bakgrundsegendomsdeklaration

bakgrundsfärg: svart;
bakgrundsbild: url (images/xyz.png);
bakgrundsupprepning: ingen upprepning;
bakgrundsposition: vänster topp;

Du kan förenkla ovanstående deklaration till en enda rad:

bakgrund: svart url (images/xyz.png) ingen repetering vänster topp;

Stenografiegenskaperna är mycket bekväma att använda, men du måste överväga några knepiga kant fall (som beskrivs på MDN Web Docs) när du använder dem.

Verktygstips är ett sätt att ge mer information om ett element när användaren flyttar muspekaren över elementet.

HTML-kod:

Höger verktygstips
Det här är verktygstipset

CSS-kod:

kropp {
 text-align: center;
 }
 .tooltip_div {
 position: relativ;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 synlighet: dold;
 bredd: 170px;
 bakgrundsfärg: blå;
 färg: #fff;
 text-align: center;
 border-radie: 6px;
 stoppning: 5px 0;
 /* Placering av verktygstipset */
 position: absolut;
 z-index: 1;
 topp: -5px;
 vänster: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kod:

Vänster verktygstips
Det här är verktygstipset

CSS-kod:

kropp {
 text-align: center;
 }
 .tooltip_div {
 position: relativ;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 synlighet: dold;
 bredd: 170px;
 bakgrundsfärg: blå;
 färg: #fff;
 text-align: center;
 border-radie: 6px;
 stoppning: 5px 0;
 /* Placering av verktygstipset */
 position: absolut;
 z-index: 1;
 topp: -5px;
 höger: 105%;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kod:

Topp verktygstips
Det här är verktygstipset

CSS-kod:

kropp {
 text-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 position: relativ;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 synlighet: dold;
 bredd: 170px;
 bakgrundsfärg: blå;
 färg: #fff;
 text-align: center;
 border-radie: 6px;
 stoppning: 5px 0;
 /* Placering av verktygstipset */
 position: absolut;
 z-index: 1;
 botten: 100%;
 vänster: 50%;
 marginal-vänster: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

HTML-kod:

Nedre verktygstips
Det här är verktygstipset

CSS-kod:

kropp {
 text-align: center;
 }
 .tooltip_div {
 margin-top: 100px;
 position: relativ;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 synlighet: dold;
 bredd: 170px;
 bakgrundsfärg: blå;
 färg: #fff;
 text-align: center;
 border-radie: 6px;
 stoppning: 5px 0;
 /* Placera verktygstipset */
 position: absolut;
 z-index: 1;
 topp 100%;
 vänster: 50%;
 marginal-vänster: -60px;
 }
 .tooltip_div: hover .tooltip {
 synlighet: synlig;
 }

Du kan också använda Bootstrap-biblioteket för att skapa anpassade Bootstrap verktygstips.

8. Lägg till skuggeffekter

Du kan lägga till CSS-skuggeffekter till texter och element med hjälp av text-skugga och den box-skugga CSS-egenskaper respektive.

CSS Text Shadow

De text-skugga CSS-egenskapen lägger till skuggor och lager i texten. De text-skugga egenskapen accepterar en kommaseparerad lista med skuggor som ska appliceras på texten.

Syntax för text-shadow CSS-egenskapen:

/* Du kan använda 4 argument med text-shadow CSS-egenskapen:
offset-x, offset-y, blur-radius och color */
/* offset-x | offset-y | oskärpa radie | Färg */
text-shadow: 2px 2px 4px röd;
/* färg | offset-x | offset-y | oskärpa radie */
text-shadow: #18fa3e 1px 2px 10px;

Notera: Argumenten för färg och oskärpa radie är valfria.

Relaterad: Hur man använder CSS text-shadow: knep och exempel

Till exempel:

bakgrund: #e74c3c;
färg: #fff;
teckensnittsfamilj: lato;
text-skugga: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 4x 34p), 0,52 rgba, 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, 4,03, 4,03, 4,03, 4,03, 4,03, 4, 03, 4, 03, 4, 03, 4, 03, 4, 03, 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), 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 (1,6 px 4, 4, 4, 4, 4, 4, 4, 4, 4, 9, 4, 9 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), 62px 4x., 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 2,8px 2,8px 2,81px 2,81px 2,81px 2,8p 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 (3245, 3245, 3245, 7px rgba, 3245, 7p 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 9r, 52x., 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

De box-skugga egenskapen används för att applicera en skugga på HTML-element.

Syntax för CSS-egenskapen box-shadow

box-shadow: [horisontell offset] [vertikal offset] [oskärpa radie] [valfri spridningsradie] [färg];

Notera: Parametrarna för oskärpa, spridning och färg är valfria.

Relaterad: Hur man använder CSS box-shadow: knep och exempel

Till exempel:

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

Om du vill ta en titt på den fullständiga källkoden som används i den här artikeln, här är GitHub-förrådet.

Style din webbplats med moderna CSS-tricks

Att lägga till CSS-textskuggor på en webbplats är ett bra sätt att dra användarnas uppmärksamhet. Det kan ge webbplatsen en viss elegans och en unik känsla. Var kreativ och experimentera med några text-skugga exempel som kan stämma överens med temat för din webbplats.

11 CSS Text Shadow-exempel som du kan prova på din webbplats

Man kan göra mycket med textskuggeffekter i CSS, men det kan vara svårt att veta exakt vad som är möjligt. Få hjälp med dessa visuella exempel.

Läs Nästa

Om författaren