10 (Mer) CSS-tricks du förmodligen förbises

Det finns många CSS-fragment som webbutvecklare kan använda för att uppnå vissa resultat, och då finns det CSS-tricks som du kan använda för saker som att anpassa innehållet vertikalt. Med CSS som en ständigt utvecklande enhet, stöter vi gång på gång på coola CSS-tricks som är roliga att veta.

I dagens inlägg introducerar jag dig till Ytterligare 10 CSS-attribut och tricks som du kanske inte vet.

1. Skriv vertikalt

Det finns ett CSS-attribut som heter skrivläge som accepterar ett av dessa tre värden; horisontell-tb, vertikal-rl och vertikal-lr.

horisontell-tb är standardvärdet och det orsakar det typiska vänster till höger horisontella textflödet i ett element.

De vertikal-* Värdena är dock för vertikalt blockflöde, vilket gör att text skrivs från topp till botten av webbläsarna. I vertikal-rl, nya rader läggs till vänster om de föregående och vice versa för vertikal-lr.

Detta är användbart för visar språk som kinesiska och japanska som typiskt skrivs från topp till botten och även för när du vill visa text vertikalt för att spara horisontellt utrymme, som i tabellrubriker.

Notera: Om du vill styra enskilda bokstäver, kan du använda textorientering, vrida dem upprätt eller sidled, efter önskemål.

 -webkit-skrivläge: vertikal-rl; -ms-skrivläge: tb-rl; skrivläge: vertikal-rl; 

2. Återanvänd färgvärde

Nyckelordet currentColor bär värdet av Färg attribut och kan användas i andra attribut som accepterar färgvärden som bakgrund.

div background: linear-gradient (90deg, currentColor 50%, svart 50%); ... färg: # FFD700; / * currentColor är # FFD700 * / 

3. Blanda bakgrunder

Ett element kan ha mer än en bakgrund (en bakgrundsfärg och flera bakgrundsbilder). De bakgrund-blandning-mode blandar dem alla tillsammans enligt det givna blandningsläget. Det finns totalt 16 blandningslägen just nu.

Bakgrundsmixning: skillnad; 

4. Blandningselement

mix-mix-mode blandar innehållet och bakgrunden till överlappande element. Chrome verkar inte stödja alla lägen trots att Firefox gör det.

mix-mix-mode: färg; 

Jag tog två element, en img visar bilden av en ros och a spänna med en grafisk bakgrund, staplade dem och tillämpade några mix-mix-lägen.

5. Ignorera pekarhändelser

Du kan göra ett element oblivious till någon pekare händelse genom att använda ett enda attribut som heter Pekaren-händelser. Genom att ge Pekaren-händelser värdet av ingen i ett element förhindrar det att det är ett mål att peka händelser. IE11 + stöd ingår.

I följande demo finns en kryssruta under två bilder staplade ovanför varandra. Båda bilderna bär pekarehändelser: ingen, tillåter oss att klicka på kryssrutan begravd under dem. Baserat på den markerade rutan i kryssrutan visas den önskade bilden medan den andra är dold.

6. Dekorera delade lådor

Typiskt när en låda är uppdelad (som när ett inlineelement bevittnar raster), kan de splittrade delarnas kanter sakna alla rutformar och titta på skivor. För att undvika det kan du använda box-dekoration-break: klon.

Nu för att följa upp det med ett exempel och en tidig "Jul i horisonten" påminnelse, här är en lista över Santa's Reindeer som alla skrev i en enda spänna! Ho! Ho! Ho!

Notera: Även om moderna IE stöder box-dekoration-break, vid kanten av delad delgräns är rendering inte jämn och bakgrunden ser skivad ut. Men det gör det box-shadow snyggt, vilket var anledningen till att jag använde rutaskuggor för både gränsen och bakgrunden. Det finns också en frånvaro av horisontell vaddering i kanterna i IE som du kanske vill fylla med mellanslag.

7. Dölj tabellelement

synlighet: kollapsa är ett attribut skapat bara för tabellelementen, som rader och kolumner. Om den används på något annat kommer det att fungera som synlighet: dold. Chrome men behandlar det som dold även för bordselement.

När du tilldelar synlighet: kollapsa på ett bordelement är det dolt och dess utrymme fylls av närliggande innehåll - som hur det skulle fungera på att använda display: none istället.

Men till skillnad från display: none som ändrar tabelllayouten efter avlägsnande av utrymmet, är layouten densamma i synlighet: kollaps. Du kan se hur det fungerar mer detaljerat här.

8. Skapa kolumner

Du kan skapa en kolumnlayout för innehållet med hjälp av kolonner attribut. Den låter dig ange hur många kolumner (kolonn-count) och hur varje kolumnbredd (kolumnbredd) ska göras i ett element.

Om innehållet är annat än text, som till exempel en bild, måste du komma ihåg sin bredd respektive till kolumnen. För följande exempel användes jag bara kolonn-count för att ange hur många kolumner jag vill ha.

-webbkit-kolumnräkning: 2; -moz-kolonnräkning: 2; kolumnräkning: 2; 

9. Gör delar anpassningsbara

Ett element kan göras resizeable (vertikalt, horisontellt eller båda) med CSS3 attributet ändra storlek . Ändringsformatet i a textarea kan avaktiveras med samma.

ändra storlek: vertikal; resize: horizontal; ändra storlek: båda; ändra storlek: ingen; 

10. Skapa mönster

Det kan finnas flera CSS3-gradienter (både linjära och radiella) för ett enda element och de kan staplas på varandra för att skapa mönster. Detta tillåter oss att skapa fina bakgrunder för element utan att använda externa bilder. Att göra det fungerar kan kräva lite övning dock.