CSS center a div in vertical
I have implemented a small fix to center vertically a div in the browser window
here the link
Bourbon SASS made lean by thoughtbot
The people from thoughbot are known for releasing, what they use.
https://github.com/thoughtbot/bourbon
may be worth a look, when you start working with sass / scss and are just about to create simple mixins, that help you during day and night.
Some examples from the readme page at github.
Animations
@include animation-name(slideup, fadein);
@include animation-duration(1.0s, 1.2s);
@include animation-timing-function(ease-in-out, ease-out);
# Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
Golden Ratio
div {
Increment Up GR with positive value
font-size: golden-ratio(14px, 1); // returns: 22.652px
Increment Down GR with negative value
font-size: golden-ratio(14px, -1); // returns: 8.653px
Can be used with ceil(round up) or floor(round down)
font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
}
Drupal Praktikum Berlin
Wir suchen ab sofort Drupal - Praktikanten und Praktikantinnen in Berlin:
Hello Etsy-Weltweit erste Kreativkonferenz für nachhaltiges Microbusiness, 18./19.9.
Mit „Hello Etsy – A Summit on Small Business and Sustainability“ möchte Etsy jeden – ob Student, Designer oder Kleinstunternehmer – unterstützen und motivieren, sein eigenes Business zu gründen, Gleichgesinnte zu treffen oder sich einfach inspirieren zu lassen. Insgesamt werden rund 500 Teilnehmer im Berliner E-Werk erwartet. Das internationale Programm setzt sich aus Vorträgen und Workshops erfolgreicher Entrepreneure, Marketing und Social Media Profis sowie Rechts- und Finanzexperten zusammen.
CSS Gradient and Mobile Browsers
While making the layout for a mobile app with the help of jquerymobile, I have questioned myself about the gradient background, for web and mobile. Looks like the mostly used mobile browser is Opera Mobile - Opera mini,that since the end of 2010 replace "Web (mobile) Browser for S60" the default browser for the mostly sold operative system Symbian OS (originally Nokia propertary made after Open Source!), with "29.2% of worldwide smartphone market share in 2011" (Wikipedia) , on the 2nd place is Android that is increasing users! 3rd place for Iphone with iOS and Safari. The mobile browsers are born around 1996, in text only mode, around 2006 start the usage of CSS2.1, but the hardware developed so fast that there is no old browser engine to fight with, but just a choice or they cannot show a graphic layout or the can and better then your others monitor . So the list can be restricted to:
/* Safari, Chrome, Skyfire, Nokia Series 60, Polaris, BlackBerry, Android*/
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);
/*Portable Firefox, Firefox Mobile Fennec 1.0 Alpha 3, SeaMonkey Portable 2.0.14*/
background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99%);
/*Opera Mini & Opera Mobile*/
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);
/*IE mobile */
-msfilter:"progid:DXImageTransform.Microsoft.gradient (startColorStr='#81aea7', EndColorStr='#81aea7')"
For the computers Windows XP is always on the top usage, also if Windows 7 is increasing, but with a luck windows user start to leave Internet Explorer that is on the top but decreasing, followed from Firefox and an increasing number of Chrome users. The fact that IE6 is still there, brrrrr, is going down but is anyway counting almost the same users like Safari. The CSS code for the computer web compatibility is really long:
/* W3C Standard */
background:linear-gradient(bottom, #81aea7, #c7dad6);
/* Safari 4-5, Chrome 1-9 */
background-image: -webkit-gradient( linear,left bottom,left top, color-stop(0.5, rgb(0,98,83)), color-stop(0.99, rgb(199,218,214)) );
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);
/*Mozilla/Gecko (Firefox >= 3.6 etc) */
background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99% );
/* Opera 11.10+ */
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);
/*IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006353', EndColorStr='#c7dad6', GradientType=0);
/*IE 8+*/
-msfilter:"progid:DXImageTransform.Microsoft.gradient (startColorStr='#81aea7', EndColorStr='#81aea7')" You could add even one more exception, for a while Opera used an external svg to create the gradient, but the work is not worth.
So many lines that makes me nostalgic about the old way to do it, that now can be used as fallback in emergency:
/* fallback, Opera <=10 */
background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x;
Linkography
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers http://en.wikipedia.org/wiki/Mobile_browser thanks for the great work: http://www.normansblog.de/demos/browser-support-checklist-css3
Draw Great and Stylisch Flow Diagrams online without knowing anything
Here http://www.websequencediagrams.com/ you can easily draw diagrams like
writing stuff like
Bla->Foo A-->B: text A->B: text activate B B-->A: text deactivate B
Google Collaboratory launches new Website
At http://collaboratory.de the Google Think Tank finally has a new website,
Hooray.
Online Mini CMS von Heroku
Heroku laesst dich online mit Rendera ganz einfach Websites bauen :)
IE 8 Compability issue with filter and ms-filter
Didn't dive into it yet and honestly: I don't really use IE8, but wanted to share this little info
It is originally from an article about mixing transparency with gradients in CSS3, which is possible using RGBA - values.
/* approximately a 33% opacity on blue */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#550000FF, endColorstr=#550000FF ); /* IE8 uses -ms-filter for whatever reason... */ -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#550000FF, endColorstr=#550000FF );