HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck Browserhacks HTML5 und CSS3 mit Hilfe von Modernizr verwenden Modernizr ist eine praktische Open Source JavaScript-Library, um schon heute HTML5 und CSS3 Elemente für Webseiten-Projekte nutzen zu können. Das Script funktioniert eigentlich recht einfach. Es stellt fest, welche HTML5 und CSS3-Funktionen der jeweils verwendete Browser unterstützt und welche nicht, und fügt dann automatisch entsprechende CSS-Klassen in den html-Tag der Webseite ein. Mit Hilfe dieser CSS-Klassen kannst du dann in deinem Stylesheet arbeiten, und entsprechende Styles für moderne Browser, sowie Fallback-Lösungen für ältere Browser definieren. Modernizr ist also besonders hilfreich, um moderne Features wie @font-face, Multiple Backgrounds oder HTML5-Video zu verwenden, und dennoch alternative CSS-Styles für Browser anbieten zu können, die diese Features noch nicht unterstützen. 1. Um Modernizr verwenden zu können, musst du dir als erstes das aktuelle Script (derzeit 1.6, letztes Update am 25.10.2010) auf der Webseite von Modernizr herunterladen. 2. 3. 4.
Troubleshooting CSS Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions. On the bright side, this is what makes CSS fun (or kinda)! Photo credits Anyway, I’m not here to talk about my convictions but about CSS. Among others, I picked some really common yet annoying issues: Float clearing, an old battle I think this has to be the most common wat? Basically, when an element only contains floated elements, it collapses on itself. There are a number of ways to fix this. Then Nicolas Gallagher came with a new way to clear floats from the parent without touching the markup at all. Why? Why?
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? CSS Background Animations Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element. We'll use CSS animations instead of transitions for this effect: With the animation code in place, now it's time to apply it to an element with a background image: The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times. How epic is it that we don't need to use JavaScript to manage these animations anymore?
CSSTidy Top 10 Best HTML5 Websites of 2012 Here are our editor's picks for the Top 10 Best HTML5 Websites of 2016 based on visual artistry, integrated sound, ease of use, and uniqueness. 1 | The Wilderness Downtown The Wilderness Downtown is an interactive music video for Arcade Fire's song ''We Used to Wait''. Visitors are asked to input the address of the home they grew up in and then the site uses Google Earth and HTML5 to create a personalized music video that takes the user on a journey back home. 2 | Heart of The Artic Heart of The Arctic takes users on an Arctic expedition/scavenger hunt through four distinct environments designed to show users the steps that would be needed to restore climate balance to the arctic region. 3 | Three Dreams of Black 3 Dreams of Black uses HTML5 to promote Danger Mouse and Daniele Luppi's album Rome. 4 | Enjoy Your Privacy The website was created to warn consumers about the dangers of not using password protection on their mobile devices.