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. 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
Useful HTML5 Frameworks, Template Generators and Tools Web designing needs consideration of a few facts before starting with a particular project. Clients will never allow you to take ample time to end up the project and you have to be efficient enough to run parallel with your clients. Uses of technical applications can ease the task which again takes in account the right choice of the designing medium. Using designing template is thus important to deliver a project at the stipulated time. HTML5 frameworks help to cut short the CSS step along with increasing the visibility of the site. Let me discuss in brief why it is inevitable to use frameworks while working with HTML5.
CSS3 Monochrome Icon Set A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely. These are inspired by Glyphicons and Glyphish. Related: 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.
Custom Scrollbars in WebKit Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that. These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. Icon Fonts are Awesome Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings.
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 →
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. Lumbar Lumbar is a js-build tool that takes a general codebase and list of platforms to generate modular platform specific applications. Introduction You can think of lumbar as a conditional compiler that targets platforms. However, it doesn’t rely on variables in your source code. There’s no #ifdef or #endifs. Rather you can include and exclude files by associating them with a platform.
100+ Resources for Web Developers Photo Credit: SMITHMag Update #1 – March 14, 2008 Update #2 – September 22, 2008 Translated into Italian at Geekissimo
A collection of free CSS snippets from around the web. by viktory12345 Feb 9