background preloader

CSS3 Patterns Gallery

CSS3 Patterns Gallery
Wave (294 B)✖by Paul Salentiny 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?

http://lea.verou.me/css3patterns/

Related:  CSS Inspirationenvladimirrcss 3 kursWeb & TechAdvanced CSS3

Responsive background images with fixed or fluid aspect ratios – Voormedia What's the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images. Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An <img> element with a percentual width will have its height automatically adjusted. Its aspect ratio remains the same when it is resized. Vertical align anything with just 3 lines of CSS With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc. So, to vertically align anything we write:

CSS Template Layout Module Abstract A grid with four slots defined by ‘display: "aaaaaaa" "bccccdd"’. CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents. This module contains CSS features to describe layouts at a high level, meant for tasks such as the positioning and alignment of “widgets” in a graphical user interface or the layout grid for a page or a window. A layout grid or “template” defines one or more “slots” that an element's content can flow into. Free textures for your next web project. The seigaiha or wave is a pattern of layered concentric circles creating arches, symbolic of waves or water and representing surges of good luck. Made by Olga Libby Download A friend gave me a cork wallet.

Preview border-corner-shape, before implementations! As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is border-corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-corner-shape, it will be able to do so much more!

6 Pure CSS Content Slider Alternatives to JavaScript jQuery content slider is perfect for any kind of website to display their featured works, articles or product, its really easy to use and creates beautiful slider effects without getting your hands dirty with code. There’re so many great tutorials out there teaching how to create a content sliders with jQuery. But before you decide to use jQuery content sliders, you also need to consider how many of your users are browsing your site with JavaScript disabled through analytics tools. Usually, 1%-3% of your site visitors have javascript disabled, It seems like some low numbers?, keep in mind that small percentages of big numbers are also big numbers.

Ultimate guide to learning AngularJS in one day Mastered this? Try my Opinionated AngularJS styleguide for teams What is AngularJS? Angular is a client-side MVC/MVVM framework built in JavaScript, essential for modern single page web applications (and even websites). HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: we, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? See Modernizr. Looking for a guide to write your own polyfills?

Related:  CSSHTML5CSSCSS3Design pattern libraryCSS3CSS3CSSCSStoolsarwinhover styles + animationswebdesignResourcesPattern und Texturen