Большая подборка уроков по созданию CSS-кнопок

[openkazan]

Ай Спасибо тебе, Добрый человек! Кланюсь:)

[Grammka]

Половина кнопок выглядят мягко говоря ужасно…

[lolmaus]

Ну так пользуйтесь второй половиной, в чем проблема?

[Grammka]

Я выразил свое мнение, или это уже запрещено? И если зашел разговор, то какой смысл от кнопок дизайна 90х годов (по цвету и массовым градиентикам). А если это как пример, то 90% сделано по одному методу…

[Grammka]

Это адекватное создание кнопок? давайте на хабр такие кнопки

[kossnocorp]

Это кнопки answer / decline в iPhone:

[lolmaus]

Кому-то не понравившиеся вам варианты покажутся приятными или, например, подходящими под конкретный дизайн.

Смысл не только в примере, но и в готовых решениях. Кроме того. большое разнообразие вариантов на одной странице часто помогает определиться с выбором.

Некоторые стили содержат в себе коллекции иконок. Только ради них этот прекрасно оформленный пост заслуживает добавления в закладки.

А мнение выражать, конечно, не запрещено, но правило хорошего тона — воздерживаться от комментариев, которые не несут пользы читателям, не имеют иной цели, кроме выражения негатива, и не подкреплены аргументацией…

Вместо этого вы можете:

• сделать свой вариант и предложить его читателям;
• составить свою подборку с  блэкджеком и шлюхами  современным и актуальным дизайном кнопочек.

Вам, конечно же, лень, и нет времени. Тогда можно просто ничего не писать.

Извините за напутственный тон, оно само так получилось.

[lolmaus]

Реквестирую аналогичную подборку для SASS.

[lolmaus]

Нашел:
jaredhardy.com/sassy-buttons/

[Daser]

Скоро придет время графического редактора, который выдает чистый html5+CSS3 на выходе.

[lolmaus]

В случае с графическим редактором дело без SVG, скорее всего, не обойдется.

А WYSIWYG-редакторы сайтов традиционно выдают тяжелый код, плохо поддающийся сопровождению без этого самого редактора. Так что блокноты и IDE своих позиций никогда не сдадут.

[Daser]

Если посмотреть на файл иллюстратора в блокноте, то увидим postscript код, который описывает объекты, их стили. Но если же в ручную, кодом CSS3 можно описать простейшие графические, то почему бы и не быть такому графическому редактору?
Просто вместо postscript кода, использовать CSS.

[lolmaus]

CSS слишком специфичен и ограничен в возможностях, он не способен описывать изображения, выполняемые в графических редакторах. Каждое изображение, выполненное на чистом CSS, — это произведение своеобразного искусства, решенная головоломка, требующая изрядного остроумия и терпения.

А если вспомнить различия в рендере продвинутого CSS в различных браузерах, то становится совсем грустно.

Другое дело SVG. У него неплохая поддержка современными браузерами, единообразность отображения. А внутри — обычный XML.

Это векторное изображение с большой вероятностью отобразится в вашем браузере:


Но SVG, конечно, не обладает главной возможностью CSS — возможностью семантически навешивать оформление на HTML.

[Daser]

«CSS слишком специфичен и ограничен в возможностях»

Все дело в тенденциях, а они таковы, что все может быть))

[LostSenSS]

>CSS слишком специфичен и ограничен в возможностях, он не способен описывать изображения, выполняемые в графических редакторах. Каждое изображение, выполненное на чистом CSS, — это произведение своеобразного искусства, решенная головоломка, требующая изрядного остроумия и терпения.

Уже нет :) codepen.io/blazeeboy/pen/bCaLE

[lolmaus]

Шутку оценил.

А если серьезно, для этого есть data:image и к графическому редактированию CSS это отношения не имеет.

[LostSenSS]

Почему шутка?
box-shadow это css и оно работает.
Другое дело, что всерьез это никто использовать не будет, конечно.

[lolmaus]

Шутка — из-за фактической контрпродуктивности решения при какбе формальному соответствию задаче.

[leMar]

Современный уровень фроненда не позволят это. Как понять когда проект сложный и маштабруемый и нужно контролировать каждый эдемент, а где можно опбйтись пару класов. Как понять, когда нужен врапер, а когда нет. А расширяемость?

[Daser]

Ну так глобально может и не быть, и может и не нужно. Я думаю, что достаточно на выходе получить html+css файлы с шаблоном кнопки или оформленная форма входа, к примеру. В рамках одного проекта можно проконтролировать программно уникальность классов и идентификаторов…

[sergeisirik]

Кстати, может, кто-нибудь подскажет по поводу Flex 4 и CSS3? Ну, они там нормально совместимы, может есть какие-то особенности?

[WieFix]

Download Me! CSS3 Download Button

демо не работает

[Neutron]

Вот спасибо. Забрал реализацию Download Me! CSS3 Download Button.
Еще CSS3 Github Buttons очень шикарны. Недели 3 назад использовал их при создании сайта заказчику.

[leealex]

Мне эта тоже понравилась Download Me! CSS3 Download Button, но по ссылке открывается заглушка хостера :(

[Neutron]

Прошу: http://www.htmldrive.net/items/show/972/pure-CSS3-download-button.
Демо тут.

WieFix это и для вас тоже.
grokru если не сложно, поменяйте ссылки.

[WieFix]

cпасибо

[leealex]

Спасибо большое :)

[grokru]

Спасибо, исправил.