Er zitten wel enkele leuke tussen 🙂
Je kunt een element stylen met de beperking dat 2 elementen binnen eenzelfde parent bestaan.
Adjacent sibling
Als de 2 elementen na elkaar moeten komen, kun je dit definiëren door middel van een plus.
bvb:
h1.opener + h2
<h1>Titel</h1>
<h2>subtitel</h2>
General sibling
Als de 2 elementen niet direct na elkaar komen, kun je dit definiëren door middel van een tilde.
bvb:
h1 ~ pre
<h1>Definition of the function a</h1>
Function a(x) has to be applied to all figures in the table.
<pre>function a(x) = 12x/13.5</pre>
Je hebt het waarschijnlijk al meegemaakt, je hebt 2 containers met aparte verticale marge en blijkt dat de uiteindelijke verticale marge niet overeenkomt met het verwachte resultaat… zijnde de som van de 2 marges.
Dat heeft dus te maken met collapsing margins.
Blijkbaar is het zo dat als beide marges positieve zijn, de grootste van de 2 wordt gebruikt en dus niet de som.
Zet je onder een container met een bottom-margin van 15px een andere container met een top-margin van 20px dan zou je verwachten dat de ruimte tussen die 2 containers 35px zou zijn. Wat blijkt, de marge tussen de 2 containers bedraagt 20px.
Hetzelfde scenario gebeurd met parents en children.
Stel de parent heeft een marge van 20px en alle children hebben een marge van 15px, dan zou je verwachten dat de totale marge 35px is maar het blijft dus 20px.
Het enige wat dit verbreekt is het gebruik van iets ‘vast’ tussen de 2 containers zoals een padding van 1px of een border-top van 1px.
Dit onduidelijk gedrag maakt het heel moeilijk om iets altijd correct te tonen.
#wife {right: 100%; margin: 0;}
#titanic {float: none;}
#bermuda-triangle {display: none;}
.invisibility-cloak + #harry-potter {visibility: hidden;}
.invisibility-cloak + #mad-eye-moody {visibility: visible !important;}
#usa + #mexico {border: 1px dashed;}
#europe .country {border: none;}
#china {border-top-style: solid;}
.sniper-mode-engaged {cursor: crosshair;}
.bambis-mom {cursor: crosshair; orphans: 1; }
#periodic {display: table;}
#big-bang::before {content: “”;}
#chucknorris {color: #BADA55;}
#nsa {opacity: 1;}
#tower-of-pisa {font-style: italic;}
#australia {transform: rotateY(180deg);}
.bruce-banner {color: pink; transition: color 10s;}
.bruce-banner .the-hulk {color: green;}
.oliver-queen {cursor: arrow;}
.leprechaun {height: 20%; color: green; display: none;}
.infinity-edge-pools {overflow: hidden;}
.obese {width: 200%; overflow: visible;}
.religious-upbringing {perspective: inherit;}
.yomama {width: 99999999px;}
#lego {display: block;}
.hobbit {height: 50%;}
.hobbit #foot {width: 200%;}
.delorean {z-index: -1955;}
.fear {display: none;}
.usa > .marijuana-laws {
.federal {
cursor: not-allowed !important;
.state {
cursor: wait;
&.AK, &.CO, &.DC, &.OR, &.WA {
cursor: progress;
}
}
}
.single-lane-road {width: auto;}
.samsung {@extend apple;}
.illuminati {position: absolute; visibility: hidden;}
.rich-people {top: 1%;}
.working-class {bottom: 99%;}
gangsta-rap {word-spacing: 0;}
#moses > .sea {column-count: 2;}
#ikea {display: table;}
#autobots {transform: translate3d();}
.government {transition: all 4yr ease-out;}
#rip {
bottom: -6912px;
/* 6912px = 6 feet */
}
.defibrillator {clear: both;}
#muscles {display: flex;}
Source: http://saijogeorge.com/css-puns/
Door middel van het download-attribute kun je enerzijds de filenaam van een file beïnvloeden en anderzijds een download forceren.
<a href="folder/123456.pdf" download="filenaam">Download</a>
Bovenstaande link zal dus een download forceren met als filenaam “filenaam.pdf” ipv “123456.pdf”.
Op deze manier kun je dynamische downloads van een mooiere naam voorzien zonder uitgebreide code.
Dit is een HTML5-feature die jammer genoeg voorlopig enkel in Chrome werkt.
.ninja { color: black; visibility: hidden; }
Get the background position of a sprite…. use spritecow 🙂
Easy file uploads and cloud storage integration
“print.css is an open source print stylesheet for the environmentally-conscious web developer”
‘And I will strike down upon thee with great vengeance …’ Laat Samuel L. Jackson uw Lorum Ipsum maken 🙂 http://slipsum.com/
Powered by WordPress
