Использование тени теней для создания эффекта скоса

У меня есть код css, на котором есть тег. Я нарисовал его, чтобы скосить, когда я нависаю над ним.Использование тени теней для создания эффекта скоса

Это CSS:

#slider-next {  
    padding:10px 60px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
border-radius: 25px; 
    background: -moz-linear-gradient(top, #28c4e3 0%, #0d5664 100%); /* firefox */ 

    text-shadow: 0 1px 2px #fff; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28c4e3), color-stop(100%,#0d5664)); /* webkit */font-size:20px} 

#slider-next:hover { 
    box-shadow:   0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); 
    -moz-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); 
    -webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); 
    border: solid #ccc 3px; 
}

И это HTML:

<span id="slider-next" style="float:right"></span>

То, что я хочу сделать, когда я наведите курсор мыши на текст диапазона, он фасок вверх, чтобы дать эффект кнопки. Прямо сейчас он скошен вниз.

Как это сделать? Here's a fiddle of it.

источник

2013-06-07 Mohammad Dohadwala

вы можете использовать этот онлайн бесплатный инструмент для создания именно то, что вам нужно :) Http: // css3generator.com/ – Julien

спасибо за редактирование –

thats not goonna work @julien –

Просто нужно быстро настроить значения box-shadow (я инвертировал значения y), теперь он выглядит намного больше похоже на кнопку. Кроме того, ваши префиксные объявления box-shadow должны всегда появляться перед неподготовленными.

Демо:

#slider-next {  
 
    padding:10px 60px; 
 
    -webkit-border-radius: 25px; 
 
    -moz-border-radius: 25px; 
 
border-radius: 25px; 
 
    background: -moz-linear-gradient(top, #28c4e3 0%, #0d5664 100%); /* firefox */ 
 

 
    text-shadow: 0 1px 2px #fff; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28c4e3), color-stop(100%,#0d5664)); /* webkit */font-size:20px} 
 

 
#slider-next:hover { 
 
    -moz-box-shadow: 0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8); 
 
    -webkit-box-shadow: 0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8); 
 
    box-shadow:   0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8); 
 
    border: solid #ccc 3px; 
 
}

<span id="slider-next" style="float:left"></span>

JSFiddle Версия: http://jsfiddle.net/g7YMV/4/

источник

2015-10-03 04:37:34

Использование тени теней для создания эффекта скоса

ответ

Смежные вопросы