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
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.
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.