Иногда быть веб-разработчиком просто чертовски трудно.
Особенно coding часто является ответственным за замедление нашего рабочего процесса, снижения качества нашей работы и бессонных ночей с пиццей и кофе прокладки вокруг ноутбука.Причина: с рядом проблем несовместимости и весьма творческое движками это иногда занимает слишком много времени, чтобы найти обходной путь для некоторых проблема без решения браузеров с изворотливым хаки.И that’ S, где готовые к использованию решения, разработанные другими дизайнерами приходят в handy.
Ровно год назад we’ ве опубликовал пост с 53 CSS-методов, которые Couldn’ Онлайн-т Without где мы предоставили ссылки на наиболее полезных CSS-techniques которые часто используются почти в каждом проекте.За последний год we’ посетили наблюдения what’ S происходит с CSS на основе веб-разработки, и мы собрали самые полезные CSS-методов we’ ве наткнулся — для нас и для наших readers.
В этой статье мы представляем 50 новых CSS-методов, идей и готовых к использованию решений для эффективного coding.Вы, безусловно, знаете, некоторые из них, но, безусловно, не все из них.Некоторые техники не хватает?Дайте нам знать в комментариях к этой post.
Спасибо всем разработчикам, которые внесли свой вклад в CSS-ориентированное проектирование за последний год.Сообщество высоко оценивает it.
CSS-Techniques
1. Триады Настройка фона с CSSСайт Silverback веб использует три фоновых изображений для создания иллюзии 3D с простым CSS.Нет документацию при условии, однако исходный код вполне интуитивно.[Через Wilson Miner]
2. Creative Использование прозрачности PNG в веб-DesignПри надлежащей поддержки PNG в Internet Explorer 7, и некоторые полезные JavaScript и CSS трюки на счет для старых браузеров, мы можем использовать PNG изображений значительно повысить наш дизайн vocabulary.
3. CSS на стороне сервера Предварительно Processor
5. CSS SiteMap
6. Styling файла входы с CSS и DOMФайл входов (< Тип входа = ” file” / >) являются проклятием красивый дизайн формы.Нет движок обеспечивает детальный контроль над их желанием презентации дизайнеров.Эта простая, из трех частей прогрессивного улучшения предоставляет разметку, CSS, JavaScript и для решения давней irritation.
7. Savvy подход к MessagingДерек Powazek предлагает добавить сообщение об авторских правах на фотографии и использовать CSS, чтобы обрезать его вид.Это, как предполагается достичь цели добавив надежной информации об авторских правах, не стирая вашу собственную work.
8. Particletree Категория List
9. Advanced CSS Menu TrickТо, что мы хотим сделать здесь, а не просто изменение состояния элемента навигации, пользователь в данный момент пролонгации, мы хотим изменить без элементов навигации, как well.
11. Создание таблицы с динамически выделенный колоннами, как сумасшедший Egg’ S ценообразование table
12. Полоса из списка Стиль InspirationРазличных типов списка и панели навигации стиль.Как stripes.
14. Dynamic CSS с VariablesДжеффри Grosenbach описывает, как можно интегрировать CSS переменные в CSS кодирование — с Рубином на Rails.
15. Гиперссылка Cues с FaviconsЯ хотел бы расширить понятие гиперссылка сигналы мало.Для ссылок, которые указывают на внешние сайты, что, если, вместо того чтобы показывать общий значок «внешние ссылки», мы показали, что иконка сайта
17. CSS Шаг MenuМетод проектирования так называемой шаг menus, которые имеют некоторые шаги, пользователи должны пройти, чтобы достичь некоторой цели.Это меню предлагает различные суммышагов, в зависимости от типа пользователя доступ к application.
18. Создание графических кнопок пуленепробиваемые связи с CSS | 456 Berea Street
19. Iconize Textlinks с CSSСсылки весело, но иногда мы не знаем, где они принимают нас.С этой маленькой технику CSS пользователь может определить ссылку на его иконку.Обновленный релиз technique.
20. Лучше Упорядоченные списки (с помощью простого PHP и CSS) Упорядоченные списки скучно!Конечно, вы можете применять фоновые изображения и сделать совсем немного прихорашиваться к регулярному упорядоченный список, но вы просто не получают достаточного контроля над числом itself.
21. Круговое меню с CSSВ этой статье показано, как красивые круговые меню навигации создается.В испанском языке с Источник code и example.
