background preloader

CSS Zen Garden: The Beauty of CSS Design

CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file.

http://csszengarden.com/

Related:  webpageresponsive designhtml5/css3

Guide to Responsive-Friendly CSS Columns The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy: With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas.

Build a Responsive, Mobile-Friendly Website From Scratch: CSS stylesheet In the last article of this series, I’ve shown how to start building a website from scratch with a particular focus on the HTML code and its main elements. Now it’s time to introduce the first CSS rules in order to have a general idea of the graphic style that the homepage of our website will display, especially for the pc-desktop version. First of all, before having a look on the rules we have to apply in order to create a particular design for our homepage, let’s see how it will appear in our browser window (my default browser is Chrome but, with the application of some specific rules, you’ll be able to obtain the same result for all modern web-browsers). The homepage of our totally customizable website should look more or less as following:

New HTML5 structural tags What is HTML5? HTML5, the latest version of the Hypertext Markup Language (HTML), is the most radical revision of the language to date. It introduces many new features in a variety of areas. The 30 CSS Selectors you Must Memorize So you learned the base id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory. And by the way, if you're having trouble with your CSS and want a pro to look over it and fix any errors, you can find some qualified freelancers on Envato Studio.

CSS Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.

How To Keep The Footer At The Bottom of the Page with CSS A familiar problem for many developers. A stunning design, perfectly crafted in semantic markup and CSS, that looks perfect in every browser… until you have a page without much content on it. Many people using dummy content on a standard-sized monitor will not notice this issue. Some might even argue that it’s not worth fixing at all… but I think they’re wrong, and just in case you agree, I’m going to show you a simple way to fix it. The Problem:

Responsive Web Design Guidelines and Tutorials In this overview you will find the most useful and popular articles we have published on Smashing Magazine on Responsive Web Design. Design Process In The Responsive Age You cannot plan for and design a responsive, content-focused, mobile-first 1 website the same way you’ve been creating websites for years—you just can’t. Get Ready for HTML 5 With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks. See what others have done#section1

CSS Selectors: Just the Tricky Bits div > p + div[id*='header'] – If you saw this jumbled mess of selectors in someone’s CSS, could you decipher it? If not, then you’ll want to read this primer on funky CSS selectors that you should know! A Flawed Education Like many self-taught CSS guys, my education was cobbled together from a million different sources. I read articles, followed tutorials and experimented until my head hurt to get to a point where I could bust out a complex layout and achieve the styling that I want without too much trouble. However, over time I slowly started to realize that I lacked a proper understanding of one of the most basic, essential elements to working with CSS: selectors.

Labs - Spry framework for Ajax When Adobe first introduced Spry, our goal was to bring Ajax capabilities to the web design community, allowing designers to create web pages that provided a richer experience for the end user. As we know, however, the web evolves at a blistering pace. Over the last couple of years, frameworks such as JQuery have evolved to encompass many of the capabilities originally envisaged for Spry, making Spry as a standalone offering less relevant. As we can continue to focus our efforts in furthering the web, we have decided to no longer invest in the development of Spry. We do however recognize that for some designers it continues to provide value.

Related:  programmingUseful websiteszacblakemore