background preloader

CSS3 Cheat Sheet (PDF)

CSS3 Cheat Sheet (PDF)
Advertisement Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card. So we asked our friend Chris Hanscom from (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. The cheat sheet was done in the same format as the CSS 2 Reference Guide that you may want to use for your projects as well. Download the CSS 3 Cheat Sheet for free! preview (.gif, 1255×882px)download the pdf (5 pages, 123 Kb) Thank you very much, Chris Hanscom! Further Resources About CSS 3 Do you use CSS 3 already? Related:  CSS

css Zen Garden: The Beauty in CSS Design Tools to Make CSS3 CSS or cascading style sheet is basically a style sheet language that is used to describe the presentation semantics or the looks and formatting of a document. This document is written in a mark-up language. One of its basic uses is to style the web pages that are either written in HTML or XHTML but this language can also be applied to any other kind of document. CSS also does a major job that is it separates the content of the document from the presentation of the document and in addition it also includes features like layouts, colors and fonts. This separation that is done by CSS improves the accessibility of the content and also provides more flexibility and control in the specification of presentation. CSS3 is similarly an improved version of CSS and it helps the designers to insert stylish fonts and effects to their website very easily. This is very helpful css3 code generator, Create code for some most popular CSS3 Properties - text-shadow, border-radius, Box Resize and more.

Graphical vi-vim Cheat Sheet and Tutorial Learning vi or vim is not easy. But it doesn't have to be that difficult, either. It is, in any case, faster, more powerful, and more productive than editing with any other editor, so you would do very well in investing the time and effort to learn it. Being a vi lover myself, I came up with the idea of providing a graphical cheat sheet for those learning vi or vim, and I also found out it was a very good way to structure a tutorial. By the way, I recently published the definitive article explaining why vi/vim editing is so much better than regular editing. Graphical cheat sheet This is a single page describing the full vi/vim input model, the function of all keys, and all major features. Graphical cheat sheet based tutorial The tutorial above is structured in 7 lessons that cover the major commands in vi/vim. Notes vim is an incredible editor by Bram Moolenaar, based on the original vi by Bill Joy, adding a ton of improvements over it. Relevant links Why, oh why, do those #?

CSS3 Exciting Functions and Features: 30 Useful Tutorials - Noupe Design Blog May 21 2009 With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today. CSS3 Color Module CSS3 supports more color and a wider range of color definitions. Gradient Borders You can have gradient border using the -moz-border-radius / -webkit-border property. Border Image Sometimes usual CSS border properties are not enough. Rounded Corner Boxes Andy budd shows us how to easily create rounded corners for any box using border-radius and background position. Box Shadow The css3 property box-shadow allows you to add a shadow effect without using images to a selected element. Multiple background Images Multiple Columns Text Shadow CSS3 Opacity

Улучшаем юзабилити за 5 минут В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет. 1. Мой излюбленный совет. Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них. 2. Этот совет сработает только в вебкитах, но, как я и сказала, это только «глазурь на тортике», так что не всё ли равно? Предположим, что ссылки у вас на странице обычно синие, но становятся красными при наведении на них. 3. 4. Этот совет не сработает в IE (кроме IE9 и новее — и в Firefox 3.

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.

-prefix-free: Всякому такому автору сайта, который снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes). Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется в Google Chrome и в Apple Safari (и в других браузерах на основе в Опере — в IE — а в Konqueror (и в наиболее ранних версиях Во-первых, это задалбывает. Во-вторых, это неэкономично. В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс.

CSS Template Tutorial Slicing + Coding Header | Basics CSS Template Tutorial – Slicing + Coding Header Welcome to the slicing and coding tutorial for the header. In this part you will slice each image used for the header and logo and code it using CSS and XHTML. The first thing you are going to have to do is to slice the image. Slicing the image The first image needed is the background for the header. To slice an image you use the slice tool in image ready. You can see I only selected a portion of the header background. Coding the header background The header is a div container. We get the width 800px because it is the full width of the wrapper div. Add this code after the wrapper opening and closing tags. Slicing the logo The logo is the "freecss" text in the header. First thing to do is to slice the logo. Try to get as little of the background as possible. Calculate padding values This is a simple thing which I do to calculate any padding values. Save as optimized and read the height value this is what we will be using. CSS Explained

Как избежать ошибок в CSS3 Новые свойства CSS3 не только дают нам дополнительные возможности, но приводят к некоторым трудностям. Эта статья поможет узнать Вам, правильно ли Вы используете новые функции и избежать распространенных ошибок. В общем, некоторые моменты пугают. Не забывайте указывать префиксы для всех браузеров Префиксы для браузера (vendor prefixes) добавляются перед свойствами CSS. Например, свойство CSS3 transform мы укажем как -moz-transform для Mozilla Firefox, как -webkit-transform для Safari и Chrome, как -o-transform для Opera и, наконец, как -ms-transform — для Internet Explorer. Не всегда нужно употреблять сразу четыре префикса, но не забывайте использовать все приставки, когда это необходимо . Не делайте так: Делайте так: Не забывайте и не ленитесь добавлять каждую приставку. Больше про эту особенность Вы сможете прочитать в статье Эрика Мейера . Не ставьте свойство с приставкой в конец списка Safari5 понимает два эти свойства по-разному. Смотрите на примере Оставайтесь в теме Плохое форматирование