Добавить запись
Кодинг
★ Рубрика: Кодинг
★ Тема: css

Бейдж для сайта на css

Вдруг вы решите распродать что-то на вашем сайте. Например, ваши идеи внезапно подешевеют на несколько десятков процентов. Вам срочно могут понадобиться яркие и красочные беджи, чтобы сообщить о ваших благих намерениях. Смотрите примеры ниже.
Скидка
3%
при оплате
онлайн
Скидка
4%
при оплате
онлайн
Наценка
5%
при оплате
онлайн


Согласитесь, бейджи выглядят стильно и привлекают внимание. Такие бейжди используются довольно часто и оффлайн. Например, в магазинах на них размещают скидки на распродажах, информацию про акции. Яркий контрастный цвет привлекает внимание. Да и сам формат относится к числу устоявшихся и уже на подсознательном уровне человеком воспринимается как выгодное предложение. Такие изображения часто печатают на самоклеющихся этикетках и наклейках, таких как предлагаются тут. При печати таких изображений важно, чтобы они были четкими (высокая разрешающаяся способность) иначе теряется их эффектность. Поэтому они должны быть сконвертированы в векторную графику или могут использоваться изображения в формате svg. Также можно достичь приемлемого качества печати и напрямую с сайта, если изображение построено с использованием стилей css.

Но, чтобы сделать такие бейджи, надо следующее: код css: 
.badge {
 position: relative;
 width: 240px;
 height: 240px;
 float: left;
}

.badge1 {
 position: relative;
}
.badge1bg {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 50px auto;
}
.badge1bg1 {
 -moz-transform: rotate(5deg);
 -ms-transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 transform: rotate(5deg);
}
.badge1bg2 {
 -moz-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 transform: rotate(35deg);
}
.badge1bg3 {
 -moz-transform: rotate(65deg);
 -ms-transform: rotate(65deg);
 -webkit-transform: rotate(65deg);
 transform: rotate(65deg);
}
.badge1bg1, .badge1bg2, .badge1bg3 {
 position: absolute;
 width: 150px;
 height: 150px;
 background: green;
 -moz-border-radius: 18%;
 -webkit-border-radius: 18%;
 border-radius: 18%;
}
.badge1text {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 46px auto;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
 text-transform: uppercase;
 border: 4px solid rgba(0,0,0,.1);
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 -moz-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 transform: rotate(-5deg);
}
.badge1text1 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}
.badge1text2 {
 font-size: 60px;
 line-height: 40px;
 margin-top: 15px;
}
.badge1text3 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}


.badge2 {
 position: relative;
}
.badge2bg {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 50px auto;
}
.badge2bg1 {
 -moz-transform: rotate(5deg);
 -ms-transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 transform: rotate(5deg);
}
.badge2bg2 {
 -moz-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 transform: rotate(35deg);
}
.badge2bg3 {
 -moz-transform: rotate(65deg);
 -ms-transform: rotate(65deg);
 -webkit-transform: rotate(65deg);
 transform: rotate(65deg);
}
.badge2bg1, .badge2bg2, .badge2bg3 {
 position: absolute;
 width: 150px;
 height: 150px;
 background: orange;
 -moz-border-radius: 9%;
 -webkit-border-radius: 9%;
 border-radius: 9%;
}
.badge2text {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 46px auto;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
 text-transform: uppercase;
 border: 4px solid rgba(0,0,0,.1);
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 -moz-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.badge2text1 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}
.badge2text2 {
 font-size: 60px;
 line-height: 40px;
 margin-top: 15px;
}
.badge2text3 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}


.badge3 {
 position: relative;
}
.badge3bg {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 50px auto;
}
.badge3bg1 {
 -moz-transform: rotate(5deg);
 -ms-transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 transform: rotate(5deg);
}
.badge3bg2 {
 -moz-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 transform: rotate(35deg);
}
.badge3bg3 {
 -moz-transform: rotate(65deg);
 -ms-transform: rotate(65deg);
 -webkit-transform: rotate(65deg);
 transform: rotate(65deg);
}
.badge3bg1, .badge3bg2, .badge3bg3 {
 position: absolute;
 width: 150px;
 height: 150px;
 background: red;
 -moz-border-radius: 3%;
 -webkit-border-radius: 3%;
 border-radius: 3%;
}
.badge3text {
 position: absolute;
 left: 0;
 right: 0;
 width: 150px;
 height: 150px;
 margin: 46px auto;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
 text-transform: uppercase;
 border: 4px solid rgba(0,0,0,.1);
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 -moz-transform: rotate(-1deg);
 -ms-transform: rotate(-1deg);
 -webkit-transform: rotate(-1deg);
 transform: rotate(-1deg);
}
.badge3text1 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}
.badge3text2 {
 font-size: 60px;
 line-height: 40px;
 margin-top: 15px;
}
.badge3text3 {
 font-size: 11px;
 line-height: 15px;
 margin-top: 15px;
}
Ну и конечно же html-код контейнеров:
 Похожие публикации: css
Войти и комментировать [ Вход | Регистрация ]