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 Several months ago I was experimenting with the creation of common GUI icons with CSS. Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. Example code The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. The HTML is a basic unordered list of links. <ul><li class="power"><a href="#non">Power</a></li><li class="play"><a href="#non">Play</a></li><li class="stop"><a href="#non">Stop</a></li><li class="pause"><a href="#non">Pause</a></li></ul> Each icon uses its own set of styles.
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck 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. With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. RSS Feed Icon RSS Feed Icon built with CSS3, exclusively from Hongkiat! Apple iMac Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3. Apple Keyboard It’s Apple Keyboard built with CSS3! Apple iPhone Oh, one more thing: iPhoneCSS3. Cherry Blossom Coffee Cup A tiring day? More
Quick Tip: The Multi-Column CSS3 Module For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! column-count: The desired number of columns for the element. Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count. Do you use CSS columns in your projects?
50+ Awesome CSS3 Techniques for Better Designs CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized. There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground. And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly. Below are more than fifty awesome CSS3 tutorials. If you have a favorite technique or tutorial that’s not included below, please share it in the comments! Using CSS3 For Imageless Illustration Various new methods in CSS3 allow a number of very complex graphics to be created using pure CSS and no images. Pure CSS iPhone Illustration A mixture of borders, transforms and gradients to make an animated image of an iPhone. Creating The Opera Browser Logo in CSS3 A clean illustration of the Opera logo rendered using CSS3 techniques. Our Solar System with CSS3 Analog Clock Effect Shadow Experiments Utilitzing CSS3 Columns
An Introduction To Graphical Effects in CSS : Adobe Dreamweaver Team Blog Over the past couple of years, CSS has gotten a set of new properties that allow us to create quite advanced graphical effects right in the browsers, using a few lines of code, and without having to resort to graphics editors to achieve those effects. If you are like me, then that sounds like music to your ears. I don’t do well in graphics editors and would choose a code path over a graphical editor path any day. CSS now allows us to do more graphical work right in our text editors. Examples of graphical effects that we can create using CSS today include textured text effects, photo effects like color editing/tweaking, photo and element blending that also enable us to blend elements with other elements, clipping content to arbitrary shapes, and more. You can even wrap content to arbitrary shapes with CSS too! CSS has gone a long way, and in this article I want to give you an overview of the CSS features that allow us to create such graphical effects—namely blend modes and filter effects.
Inspiration for Text Styles and Hover Effects A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas. View demo Download source When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. We’ve laid them out in “fullscreen” using a big font size so that you can see the effects in detail. If you enjoy this you might also like our Creative Link Effects which has some more inspiration especially for menu-type links. Attention: Some of the techniques are very experimental and won’t work in all browsers. We are using a couple of different techniques, including SVG masks and an inverted text masking technique introduced by Yoksel together with a canvas effect. Let’s have a look at one of the effects, “Kukuri”: The markup for this effect is simply a link with a data attribute: The common styles for all link effects are as follows:
Streamlining CSS Print Design with Sass However, as we completed a critical mass of templates and moved from the proof-of-concept phase to production, CSS maintenance considerations rose to the fore. In our initial rollout of Paged Media designs, we built one set of core CSS files that contained a complete implementation of the styling for all standard book elements (headers, footers, chapter openers, tables, figures, etc.) for one of our simplest and most popular interior designs. CSS for all other interiors designs then @imported this core.css and performed selective overrides to adjust styling as appropriate. This approach served us well for a while, but as we added more and more templates, the monolithic nature of our CSS architecture became a liability. We had amassed a mountain of customizations that were piled on top of — and somewhat precariously balanced on — the style base. Now, happily, each design was completely siloed. It was clear we needed a more nuanced, middle-ground approach to CSS development. Conclusion
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.
Buttons · Bootstrap Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. Contents Examples Bootstrap includes six predefined button styles, each serving its own semantic purpose. Copy <! Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. The .btn classes are designed to be used with the <button> element. When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers. Outline buttons In need of a button, but not the hefty background colors they bring? Sizes Fancy larger or smaller buttons? Active state Disabled state