1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Тема: Зміна розміру блока "від центру"

Здорів. Є от така кніпка
http://не-дійсний-домен/4YyEN.png
html, css

<div class="button">кніпонька =)</div>
.button {
    background: #aaa;
    width: 150px;
    height: 30px;
    font-family: Tahoma;
    margin: 0 25% 0 25%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,.6);
    text-align: center;
    background: linear-gradient(90deg,rgba(0,0,0,.1),white 40px,
        white 110px, rgba(0,0,0,.1) 150px);
    display: inline-table;
    transition: all .4s;
    vertical-align: middle;
}

.button:hover {
    width: 160px;
    height: 40px;    text-shadow: 0px 0px 10px yellow;
}

При наведенні щура на ту кнопку, вона збільшується, але збільшується не в усі сторони, а тільки вправо і вниз. Як зробити, щоб воно збільшувалось у всі сторони?

2 Відповідь від Chemist-i Востаннє редагувалося Chemist-i (25.10.2013 02:21:31)

  • Chemist-i
  • Chemist-i
  • Replace Team
  • Поза форумом
  • Звідки: world wide web
  • Дата реєстрації: 31.10.2012
  • Повідомлень: 3 800
    • Репутація: 2394

Re: Зміна розміру блока "від центру"

<html>
<head>
 
<style type="text/css">
.button {
    background: #aaa;
    width: 150px;
    height: 30px;
    font-family: Tahoma;
    margin: 0 25% 0 25%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,.6);
    text-align: center;
    background: linear-gradient(90deg,rgba(0,0,0,.1),white 40px,
        white 110px, rgba(0,0,0,.1) 150px);

    display: block;
    position:relative;

    transition: all .4s;
    vertical-align: middle;
}

.button:hover {
    top:-5px;
    right:5px;
    
    width: 160px;
    height: 40px;    text-shadow: 0px 0px 10px yellow;
}
</style> 

</head>

  <body>
    <div class="button">кніпонька =)</div>
  </body>
</html>
Подякували: FakiNyan1

Chemist-i вебсайт

3 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 620
    • Репутація: 13333

Re: Зміна розміру блока "від центру"

Додайте margin і зменшуйте-збільшуйте.
А взагалі змінювати реальні розміри під рух мишки - погано. Н.м.д.

koala вебсайт

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Зміна розміру блока "від центру"

koala написав:

Додайте margin і зменшуйте-збільшуйте.
А взагалі змінювати реальні розміри під рух мишки - погано. Н.м.д.

а чо погано?

5 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2106

Re: Зміна розміру блока "від центру"

FakiNyan, інші елементи будуть плавати, а це не дуже гарно виглядає. Навіть якщо зробити, що не будуть рухатись інші елементи, то це все одно не дуже гарно виглядає.

Replace вебсайт

6 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Зміна розміру блока "від центру"

а чо погано?

уявіть що на форумі коли ви пишете повідомлення, наводите на кнопку надіслати а тут вона така вжик і на 40 пікселів по боках розширилась)))

Взагалі це скоріш за все з психологією пов'язано. Коли людина отримує корисну інформацію (вебсайт, книжка, ще якась онлайн штука) вона не любить коли щось блимає моргає стрибає і розширюється.

+ один з варіантів це втілення реального світу)
Коли ви відкриваєте двері тоді дверна ручка не розширюється в розмірах. Вона просто є така як є) ;)

p.s. ХЗ куда мене понесло але хочу переконати що зміна розміру кнопки це погано ;)

funivan вебсайт

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Зміна розміру блока "від центру"

funivan написав:

а чо погано?

уявіть що на форумі коли ви пишете повідомлення, наводите на кнопку надіслати а тут вона така вжик і на 40 пікселів по боках розширилась)))

Взагалі це скоріш за все з психологією пов'язано. Коли людина отримує корисну інформацію (вебсайт, книжка, ще якась онлайн штука) вона не любить коли щось блимає моргає стрибає і розширюється.

+ один з варіантів це втілення реального світу)
Коли ви відкриваєте двері тоді дверна ручка не розширюється в розмірах. Вона просто є така як є) ;)

p.s. ХЗ куда мене понесло але хочу переконати що зміна розміру кнопки це погано ;)

ну ок.. я тіпо зрозумів...