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
Category: Design
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…
Websites and Fonts
Domainname – √ check
Logo – √ check
Colorscheme – √ check
Fonts – √ check
Businesscards – √ check
Letterhead – √ check
Website – ehm? …working on it… just can’t get the correct font to work on the website…
One option is to hire My Brain, another is to keep trying yourself. Colors and style may be easy, but to get the correct font on your website is another story. For this you may want to try:
http://www.fontsquirrel.com/tools/webfont-generator
Good luck!