Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Calc funkció

Mire jó a CSS -ben a calc funkció? Igen, nyilván számolni de hogyan is? Nos, ezt szeretném most megmutatni.

Tegyük fel reszponzív designt készítesz, a modul hossza mondjuk 50%, és a padding 20px. Oké, beleteszünk a modulba például egy teljes szélességű képet, de ha én azt szeretném, hogy ez kép olyan széles legyen, hogy a modul szélétől széléig érjen, akkor már egy kicsit bajos lesz calc nélkül. Nyilván nekiállhatnék kiszámolni azt a 20px -t, de minek? Meg mi a garancia rá, hogy nem rontom el? Én például tuti el fogom 😀 Na, erre jó nekünk ez a funkció, mert így ezt mondhatjuk annak a képnek:

img{

width: calc(100% + 40px);

margin:-left: -20px;

margin:-right: -20px;

}

Margin nyilván eleve kell akkor, de most nem ez a fontos. Hiába mondjuk a képnek, hogy 20px-el legyen kijjebb, a kép szélessége még ugyanolyan lesz, és nem fog a modul szélétől a széléig érni.

A calc -val tehát most hozzáadtuk a margin-left és a margin-right közös értéket ahhoz a száz százalékhoz. Erre jó hát. Különböző mértékegységű értékeket tudunk vele simán összeadni.

De nem csak összeadásra jó. Használatjuk még:

kivonásra (-),

szorzásra (*) – Ez csupán számmal, mértékegység (például px) nélkül működik!

és osztásra (/) – Ez csupán számmal, mértékegység (például px) nélkül működik!.

Fontos, hogy az értékek és a műveletjel között legyen helyköz, máskülönben nem fog működni!

Remélem érthetően magyaráztam el és segített a használatában 🙂

Oszd meg az ismerőseiddel