7 inlägg taggade med "css"

När jag började lära mig CSS för många år sedan fick jag lära mig att border-radius: 50% gör en form till en ellips.

div {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	border-radius: 50%;
}

Jag ifrågasatte aldrig varför. Men som du kanske gissar är 50% inget slags "ellips-hack". Allt är logiskt.

Vi gjorde nyligen några justeringar av font-features på jobbet. Bland annat ändrade vi utseendet på 0 (siffran noll) till att inkludera ett snedstreck (som 0), för att göra det lättare att skilja från versalen O. Jag lärde mig några saker i processen som jag vill dela med mig av!

Snedstreckade nollor​

Det finns två huvudsakliga sätt att konfigurera snedstreckade nollor.

1. font-feature-settings: "zero" 1;
2. font-variant: slashed-zero;

De senaste månaderna har jag dykt ner i logiska egenskapers vackra värld. CSS-specifikationen har en mening som jag tycker beskriver vad logiska egenskaper är på ett bra sätt:

[Logiska] egenskaper är writing-mode-relativa motsvarigheter till sina fysiska motsvarigheter.

Fysiska egenskaper är enkla att resonera kring eftersom de representerar fysiska riktningar. Top, right, bottom och left är absoluta riktningar. Vänster är alltid vänster – så enkelt är det. Logiska egenskaper är däremot relativa – den fysiska riktningen de motsvarar varierar.

Som nämnts gör den absoluta naturen hos fysiska egenskaper att de är enkla att resonera kring. Men den absoluta naturen är också en begränsning.

<h1 class="h2"></h1>

Det är en kodrad (eller åtminstone en HTML-starttagg med en klass) som tydligen gör många arga eller förvirrade.

Jag stötte nyligen på uppgiften att skapa ett kontaktformulär med input-rader i en kolumn och en textarea och submit-knapp i den andra kolumnen. Den lilla utmaningen var att få textarean att fylla det tillgängliga utrymmet ovanför submit-knappen på ett responsivt sätt, så att textarean fortsätter att fylla det tillgängliga utrymmet oavsett antalet input-rader i kolumnen till vänster.

Här är designen, där du kan välja antalet input-rader:

Jag ställs ofta inför uppgiften att centrera något. Antingen horisontellt eller vertikalt, och ofta på båda ledderna samtidigt. När inte flex och grid fanns i CSS kunde det vara ganska bökigt att få till vertikal och horisontell centrering. Nu finns det smidiga lösningar!

Vi utgår från ett span-element i en div:

Färger på webben kan definieras på många olika sätt. Det finns 140 färgnamn såsom till exempel green, goldenrod och navy. Utöver det finns dessa fyra standarder för färgvärden: HEX, RGB, RGBA och HSL. Jag går igenom dessa en i taget i det här inlägget och visar också hur man kan generera slumpmässiga färgvärden för respektive standard med React.