• 39217
  • 526
  • 72
Нравится блог?
Подписывайтесь!

Печенюки или мини-фреймворк от домохозяйки

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

Помимо графической разработки, которая упала на мои плечи, мне пришлось по совместительству заняться версткой этого интерфейса (где познала разницу между дизайнерами-верстальщиками и программистами-верстальщиками, но об этом как-нибудь в другой раз :-) ).В процессе верстки, сделала для себя мини-удобную штуку, эдакие печенюшки - мини фреймворк для домохозяек.

В интерфейсе есть много кнопочек, хороших и разных. Разных габаритов (2 вида габарита) и четыре цветовых решения. Проект , изначально, сам по себе мультиязычный, и обходится деревенскими костылями вроде "запекания картинки-кнопочки для разных языковых версий" это не комильфо ни разу. Посему, пришлось выкручиваться.

рисунок 1. так выглядят кнопочки в макете

вот так выглядит разметка для кнопки

<a href="#"> Leave</a>

Как известно, у элемента может быть один ID  и несколько классов. Этим можно как раз грязно воспользоваться - описать габарит кнопки, цветовое решение (это общие классы) и расположение кнопки (дополнительный класс) отдельно.

в классе, который предназначен для габарита кнопки, указываем следующие параметры:

.size {width: ; height: ; display: ;

font-size:; text-align:center ; text-decoration:none ; color: ; }

(где width ,height и font-size разные для разных габаритов)

в классе, который предназначен для цвета, прописываем

.color {backgound:(url'') no-repeat top left }

и при наведении мыши, естественно

.color:hover {backgound:(url'') no-repeat top left }

background, естественно, разный для каждого цветового решения: это картинка - фон кнопки

рисунок2 . фон кнопки - каждому свой

и третий вид класса - расположение. где указываете position, если нужно, или float

в итоге, в сборке, разметка будет выглядеть вот так:

<a href="#" class="size color position"> Leave</a>

 

Преимущество сей печеньки в гибкости - можно поменять размер, цвет, или расположение кнопки одним мановением ноги или руки.

Или название кнопки. Было Yes, станет No или еще как-нибудь.

При отключенных картинках все будет замечательно читаться и видеться.


Такие дела. Домохозяйки пекут не только пироги, но и вот такие вот печеньки.

Кимушка Горымушка Kimberly
концептуальный боянист, тетенька с термосом
14 мая 2013, 0:27
690

Загрузка...
Loading...

Комментарии

xapon
1
0
Можно бы и без картинок - обрати внимание на www.colorzilla.com :)
круто, спасибо! я пошла совсем костыльным образом, чтобы избежать меньшего кодинга. и надо было сделать поддержку для IE8, а боюсь, прелести колорзиллы потеряются там.
xapon
0
0
он генерирует градиенты для ие 6+ через магические фильтры, там в коментах написано же)
я попячилась:) и устыдилась:)
казалось бы, при чем тут бутстрап?
ну я же велосипеды изобретаю, мне можно :)

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Известный казахстанский бизнесмен становится первопроходцем и создает школу, о которой можно только мечтать. То, что мы, как взрослые, делаем в бизнесе, дети будут делать в этой школе.
Zhumanova
24 апр. 2017 / 16:29
  • 20760
  • 5
Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Всё ли так хорошо у жителей Казахстана? Почему-то наша страна сохраняет твёрдые позиции в первых строчках мировых рейтингов по числу самоубийств.
openqazaqstan
24 апр. 2017 / 16:54
  • 3723
  • 20
«Третья мировая война начнётся в мае 2017 года» – провидец из Португалии

«Третья мировая война начнётся в мае 2017 года» – провидец из Португалии

Провидец из Португалии по имени Горацио Вильегас считает, что новая мировая война состоится уже в текущем году. Считается, что португалец два года назад объявил, что Трамп станет президентом.
Seattle
21 апр. 2017 / 15:33
  • 3843
  • 13
«А ты покушала?» или Как завоевать сердце женщины простой заботой

«А ты покушала?» или Как завоевать сердце женщины простой заботой

Так как опыт хождения по свиданиям у меня немаленький, да и с интуицией давно дружу, я быстро отсеиваю тех, с кем будут проблемы. Как я это определяю? Очень просто.
Bonittta
22 апр. 2017 / 14:10
«Казпочта» отжигает. Редкий шанс вспомнить агрессивные советские очереди

«Казпочта» отжигает. Редкий шанс вспомнить агрессивные советские очереди

Люди старшего и среднего поколений помнят шумные, недобрые, грубо ругающиеся очереди советских лет. Увидеть, как это было, можно теперь разве что в каком-нибудь фильме. Хотя не только.
openqazaqstan
26 апр. 2017 / 16:14
  • 2522
  • 30
Юный алматинец покорил Первый канал на шоу Максима Галкина

Юный алматинец покорил Первый канал на шоу Максима Галкина

Житель Алматы по имени Марк Усачев недавно оказался на телепрограмме "Лучше всех", с успехом идущей на Первом канале России. 9-летний алматинец покорил публику своими недюжинными знаниями.
Seattle
24 апр. 2017 / 16:59
  • 2169
  • 2
Инстаграм – это «рынок девушек» и он круче любой базы данных

Инстаграм – это «рынок девушек» и он круче любой базы данных

Для меня Инстаграм – это рынок. Почему? Ничего не изменилось, девушки все так же бьются в попытках наиболее выгодно себя продать, посредством привлечения внимания.
Annette_Scherer
24 апр. 2017 / 22:35
  • 2024
  • 4
Паводок в Атбасаре глазами блогера

Паводок в Атбасаре глазами блогера

Ситуация в населенном пункте непростая, много домов подтопило, по сравнению с 2014-м годом уровень воды поднялся намного выше. Жители держатся молодцом.
kokshetau_today
21 апр. 2017 / 14:17
  • 2039
  • 8
Жуткие истории о рабстве – такие вещи творятся в стране, принимающей «ЭКСПО»

Жуткие истории о рабстве – такие вещи творятся в стране, принимающей «ЭКСПО»

Мы живём, возможно, уже совсем в другом обществе, а не в том, к которому привыкли. Не первый год Казахстан периодически потрясают жуткие истории о рабстве.
openqazaqstan
26 апр. 2017 / 9:39
  • 1820
  • 19