background preloader

CSS3 Patterns Gallery

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?

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

Related:  CSS InspirationenvladimirrWeb & TechAdvanced CSS3CSS

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:

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!

How To Create a Pure CSS Dropdown Menu With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown.

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). Griddify, a Tiny Photoshop Panel for Guides and Grids Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop. Watch the short tutorial to learn how it works: Download and Install (Photoshop CC) Download and install ZXPInstaller. It helps you install Griddify and other Adobe extensions easily.

Related:  CSS3css3ResourcesTEXTURE