1

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

Здорів. Є от така кніпка
http://puu.sh/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;
}

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

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

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>
x
Подякували: FakiNyan1

3

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

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

4

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

koala написав:

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

а чо погано?

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

5

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

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

6

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

а чо погано?

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

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

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

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

7

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

funivan написав:

а чо погано?

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

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

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

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

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...