background preloader

HTML5, CSS3, JS Demos, Creations and Experiments


cssdeck codecasts by quanta Revealing CSSDeck Codecasts Website: Twitter: @cssdeck Caption Hover Effects A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. Animatable box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Pure CSS GUI icons (experimental) An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraint

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. JSbin, JSfiddle or Codepen, which one to use and why? There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So sometimes it become a confusing question which one to use; and more importantly why and when? Let’s compare these three today and find out which one can be the most suitable one for you. So, first of all let’s compare the features of these three. Feature comparison table These are the main features provided by these three playgrounds.

50 Useful CSS Snippets Every Designer Should Have With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Multiple Backgrounds and Borders with CSS 2.1 Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 IETester is free.To support the projectyou can make a donation : or you can translate it. IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of IE11, IE10, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the installed IE in the same process. This is an alpha release, so feel free to post comments/bugs on the IETester forum. Requirement : Windows 8 desktop, Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7) Note for IE10 : IE10 is not available on IETester if it is not the default IE version installed on the system.

The Best Freebies for Designers (June 2013) Here are the best freebies for designers from June 2013. We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, textures… and everything else inbetween. Freebies for Designers – June 2013: Icon Sets Thin Stroke Icons (PSD) Download Page →

W3C CSS 2.2 Abstract This specification defines Cascading Style Sheets level 2 revision 2 (CSS 2.2). CSS is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). Coding Kung-fu: 35 Graphics Built Purely With CSS3 Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

Development Environments - Full Stack Python A development environment is a combination of a text editor and the Python interpreter. The text editor allows you to write the code. The interpreter provides a way to execute the code you've written. A text editor can be as simple as Notepad on Windows or more complicated as a complete integrated development environment (IDE) such as PyCharm which runs on any major operating system. Genius Marketing: Artsy Animated GIFs Show Beer-Making Process You all went gaga when we featured the animated-GIF stylings of Jamie Beck and Kevin Burg earlier this year, so we're pleased to see that the duo is expanding their horizons with a new project. Yes, it's marketing beer. And yes, it's still pretty freaking cool.

A collection of free CSS snippets from around the web. by viktory12345 Feb 9

Related:  ux/designСайты Инфа разнаяamirasaeedSites généralistes