background preloader

Layer Styles

Layer Styles
Related:  CSS

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.

Les bordures en CSS3 Le CSS3 améliore la propriété border afin de lui attribuer plus de fonctionnalités. NOTE : selon le navigateur, il est nécessaire d'ajouter ou non le préfixe pour utiliser la propriété CSS3 : -webkit, -moz, -o. Si c'est le cas, il sera mis dans les exemples de code ci-dessous. Compatibilité : Chrome, Safari, Firefox, Internet Explorer 9, Opera. 4 commentaires Article lu 3735 fois. Cette propriété permet de changer les couleurs des bordures. border-color: top right bottom left; ou border-color: top|bottom right|left; Démo La bordure peut être dorénavant mise en forme via des images. border-image; border-top-image ; border-right-image ; border-bottom-image ; border-left-image. Démo La propriété round permet de répéter l'image (tout comme la propriété repeat). Démo Permet de modifier l'arrondi des coins des bordures d'un élément. On peut appliquer l'arrondi à un seul côté. Démo Le box-shadow permet de rajouter un ombrage à un élément. Démo Copyright © 2011 debray jerome.

CSS3 Cheat Sheet (PDF) - Smashing Coding 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 Veign.com (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?

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

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

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

улучшение CSS кода Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки. Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны. Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи. Мы собираемся опубликовать pdf-версию этой статьи, так что подпишитесь на наш RSS канал (Smash Magazine RSS)1, чтобы следить за обновлениями. Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями. 1.1 Кодинг: Начинаем 1.2 Организация CSS Сводите число контейнеров к минимуму.

htmlbook.ru Sass Привет! Несколько раз при написании CSS кода я ловил себя на мысли, что было бы круто, если бы в CSS можно было использовать что-то вроде переменных и функций — это бы избавило от необходимости повторять участки кода и сильно ускорило бы работу. Увы, такого в CSS делать нельзя. Недавно Саша спросил меня: «Ты знаком с Sass?». Оказалось, что это специальный язык написания стилей, но более удобный и предоставляющий массу новых возможностей, которых нет в привычном CSS. Что такое Sass Авторы называют его мета-языком описания стилей. В чем прелесть Sass предоставлять вам больше возможностей и свободы при написании CSS. Красота кода В Sass нет точек с запятой и фигурных скобок, свойства располагаются непосредственно после селектора и по одному на строке. Вложенность Теперь для вложенных селекторов не нужно повторять селекторы родителей, достаточно просто расположить дочерний селектор внутри родительского. Переменные Миксины Как это работает Изначально есть файлы, в которых вы пишете на Sass. Вывод

Методология БЭМ Обычно при вёрстке и программировании сайта разработчики опираются на допущение, что дизайн и технические требования к странице не изменятся в процессе разработки. Дизайнер, верстальщик и программист каждый работает в своей области, часто не пересекаясь друг с другом: Дизайнер создаёт дизайн в виде набора макетовИз этих макетов делается статическая HTML/CSS вёрсткаОна передаётся программисту для создания шаблонов на каком-то серверном языке и оживлении сайта с помощью JavaScript Такой подход хорошо работает только в том случае, если дизайн сайта остаётся неизменным всё время его жизни и изменения только добавляют контент. Но обычно так не происходит, сайт начинает жить своей жизнью и развиваться. Если в код сайта не заложена определённая структура, если он делается не по фиксированным правилам, то постепенно его становится всё сложнее и сложнее разрабатывать, код сайта становится неподвластным разработчикам. Условия появления методологии Мы искали решения возникающих перед нами проблем.

Related: