Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.
Continue reading CSS Stylesheet selectorsCategory: Design
iOS fixed layers and scrolling
If it does not scroll as expected on iOS, try:
height: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
That’s all! Continue reading iOS fixed layers and scrolling
more css
bron: https://css-tricks.com/examples/ShapesOfCSS/
Please not some of these do not work because of the default stylesheet ‘box-sizing’:
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
TheShapes of CSS
All of the below use only a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser.
iphone ipad ugly form buttons
Just correct this using CSS.
The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme.
.thing {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
center
Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.
So let’s make it a decision tree and hopefully make it easier. Continue reading center
Selfie
My new profile photo:
Do I start using this one or just archive it?
Development and fonts
0O 1I lI 1l 5S 2Z 6G 8B vy 4A
…very common read errors in source code, that may now be over.
Thanks to ‘Hack‘ there is a new free font on the market designed for programming and to make our lives a little easier (…to read that is).
See: http://sourcefoundry.org/hack/
I am certainly giving this one a try!
Cloudy with design
QR-Code Anyone?
QR-Codes are all around… and My Brain finally compiled a separate script to generate these neat little two-dimensional barcodes.
Enter the URL, selected the level of error-correction and the single-block-pixel-size. Just try it and enjoy!
If you like this functionality, also check out the implementation on ETEN en ETEN for promotion of the Apps; It generates QR-Codes, to visit the app-download page for a restaurant, but when you do so with a phone or tablet, you will be redirected to the correct App Store.
Want something like this for yourself? Just contact My Brain.
woff mime-type
Remember the custom fonts post?
Don’t forget to set the correct mime-type on your webserver:
woff – application/font-woff
woff2 – application/font-woff
Otherwise the font-file will not load…