Designing Flexible Pie Charts With CSS and SVG — Smashing Magazine When it comes to CSS techniques, nobody is more stubborn and smart enough to find solutions to any problems than Lea Verou. Recently, Lea has written, designed and published CSS Secrets1, a truly fantastic book on the little CSS tricks and techniques for solving everyday problems. If you thought that you know CSS fairly well, think again: you will be surprised. In this article, we publish a few nuggets from the book, which were also presented in Lea’s recent talk at SmashingConf New York2 — on designing simple pie charts, with CSS. Please notice that some demos might not work as expected due to limited support in browsers. Pie charts, even in their simplest two-color form, have traditionally been anything but simple to create with web technologies, despite being incredibly common for information ranging from simple stats to progress indicators and timers. Although the feat is not as impossible as it once was, there’s still no simple one-liner for it. Transform-Based Solution Pie Static6
Adding touch gestures and mouse controls to a 3D CSS cube An update to the original 3D cube (from July 2009 no less), I’ve added touch gesture support (iOS) and click-and-drag behaviour. Animation is incredibly smooth on the iPhone, even the 3G model. Arrow key presses will still rotate the cube, and ESC will reset it. Experiment: 3D cube with touch gestures and click and drag One year on and the cube still only works in Safari. Experiment updated for Firefox 10 which supports 3D transforms. It works relatively simply: on click the start co-ordinates are saved and on drag the difference between current drag position and starting co-ordinates are applied to the cube as a transform, which is completed after the specified transition duration. Touch tweaks Pixel values for touch positions are found in event.originalEvent.touches.pageX, instead of event.pageX. A 200ms transition duration suits the browser, but on touch devices it felt sluggish, so I’ve upped it to 50ms so the cube is always at your finger-tips. Better CSS Any questions?
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do By Chris Coyier On June 13, 2011 It's pretty amazing what you can do with the pseudo elements ::before and ::after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. #Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. #Expand the number of shapes you can make with a single element All of the shapes above and many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: #Show URL's of links in printed web pages #Clear floats Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo element to do that for us. #Simulate float: center; #Share this:
14 Highly Useful Online CSS3 Generators CSS is commonly known as cascading style sheets which can be defined as basically a style sheet language and it is used for describing the presentation semantics which in lay man’s language is the looks and formatting of a document that is initially written in markup language. CSS has to perform the basic purpose of separating the content that the document has from the presentation of the document presentation that includes elements such as colors layouts and fonts. If you are working with CSS , it is very important to have a good set of tools so that you can easily speed up the process and not only does it speed up the process but using these tools can also help simplify the work to a very great extent which is also of great help. A lot of these tools are available on the internet because they are in huge demand because they help in time management they are straight forward and precise and do a good amount of work in comparatively lesser time. 1) CSS Creator – Layout Design 3) CSS3 Please
CSS vs. SVG: Graphical Text Effects : Adobe Dreamweaver Team Blog This post is the first in a series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. Since I am biased to SVG, this series is really intended to prove that SVG — because of its nature as both an image and a document format — is simply better than CSS when it comes to solving certain design problems on the web. But to keep an objective point of view, we will be weighing the pros and cons of each technique and find out where and when CSS or SVG can serve as a better tool to the design goals at hand. In this article, we’re going to go over a few techniques for creating graphical text effects for the web using CSS and using SVG. Graphical Text Effects with CSS The Old CSS Way Some years ago, we used to hack our way into creating visually appealing text on the web by not creating that text on the web, but by simply placing an image of that effect in stead of a piece of text that we would otherwise want to be graphical. Final Words
Inline SVG vs Icon Fonts [CAGEMATCH] If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Let's compare. Icons are Vector There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over. CSS Control The big win for inline SVG here is probably multi-color icons. Positioning Weird Failures Forced Failures Semantics Accessibility Ease of Use Browser Support Winner It all comes down to browser support.
::after / ::before | CSS-Tricks In-depth front-end engineering courses ::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this: <div><! ::before is exactly the same only it inserts the content before any other content in the HTML instead of after. You want the generated content to come before the element content, positionally.The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally. The value for content can be: A string: content: "a string"; - special characters need to be specially encoded as a unicode entity. Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>"; #: vs :: :: is the newer format indented to distinguish pseudo content from pseudo selectors. #Related #Other Resources #Browser Support Little issues:
Advanced CSS filters This is my first post in english. If you find any errors, or if you can't figure it out, please let me know. Back in 2011, browsers started to implement CSS shorthand filters from the Filter Effects specification. CSS shorthands filters, like blur(), contrast() or grayscale() are a great addition to CSS, even if SVG filters can achieve really amazing things. Today, I want to go a bit further, introducing new features with CSS. backdrop-filter First of all, there's the backdrop-filter property defined in the Filter Effect Level 2. Even if I was sceptical at first, I started to play with it in February in WebKit nightlies, and changed my mind: it is pretty awesome. In last June, Apple announced at the WWDC conference that this property will be available in Safari 9 later this year. With this property, you can achieve many effects that weren’t easily possible until now. Every element behind the header is blurred by 5px. See live result on JSBin (only Safari 9) filter()