Добър ден приятели! Това е още една статия, написана по молба на един от читателите на моя блог. Днес ще приложим възможността за показване на изображение при задържане на курсора на мишката върху връзка. Защо това може да е необходимо? Всичко е много просто, по този начин можете да спестите място на сайта и в същото време да съживите връзките.
Както знаете, за изпълнение изскачащи снимкивъзможно с Помощ за jQuery, CSS, а също и HTML. В днешната статия ще публикувам завършен кодтози ефект, а също и да даде няколко добри примери. Всеки скрипт е доста прост, създаден с помощта на CSS+HTML. Няма да ви мъча повече и ще ви дам готови решения!
Изскачащо изображение при задържане
a.site-ssilka:hover+div
Нека накратко обясня основните моменти. За да покажете изскачащо изображение, трябва да се обърнете към етикета
с атрибут src и след знака за равенство в кавички напишете пътя до изображението, след като го качите на основна папкасайт.
Етикет <а> със задължителния параметър href отговаря за създаването и показването на връзка (в моя пример това е текст).
Ако елементите на сайта са се преместили, можете да зададете ширината и височината на изображението, като използвате свойството ширинаи височина. Параметрите се задават в пиксели.
Атрибутът alt позволява на търсачките да разпознават по-точно какво е показано на изображението.
За по-голяма яснота подчертах частта от кода, която най-вероятно искате да промените.
Изскачащ текст при задържане на курсора на мишката върху връзка
a.site-ssilka:hover+div
По смело!!! Легни над мен!
Както можете да видите от примера, когато задържите курсора на мишката над текста, изскача текстова подсказка.
Изчезващо изображение при задържане на курсора на мишката върху връзка
a.site-ssilka:hover+div
По смело!!! Легни над мен!
За да добавите определен ефект по-горе, просто копирайте кода, който ви подхожда, и го поставете в текстов редактор. По този начин връзка с изскачащо / изчезващо изображение може да бъде написана навсякъде в статията.
Важен момент!Всеки от представените скриптове не накърнява валидността на сайта.
Смятам, че е не по-малко удобно да изпълните задачата, като добавите специален скрипт към стиловия файл на вашия шаблон, който обикновено се нарича style.css.
CSS изскачащо изображение
позиция: роднина;
Миниатюра: hover(
Thumbnail span( /*CSS за увеличено изображение*/
позиция: абсолютна;
цвят на фона: #3d3d3d;
рамка: 1px плътно бяло;
видимост: скрита;
текст-декорация: няма;
радиус на границата: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img( /*CSS за увеличено изображение*/
ширина на границата: 0
Thumbnail:hover span( /*CSS за увеличено изображение при задържане на курсора на мишката*/
видимост: видима;
ляво: 60px; /*позиция, където увеличеното изображение трябва да се измества хоризонтално */
За да покажете изскачащ прозорец, когато задържите курсора на мишката върху връзка, вмъкнете следната връзка в текста:
Освен това може да се вмъкне връзка с изскачащо изображение определена частвашият шаблон. За да направите това, добавете следния код към файла index.php. Това е файл, който определя визуалното подреждане на елементите на сайта.
В случай, че не сте запознати с CSS, ще обясня, че записът img.animate1:hover казва на браузъра, че за всички елементи , с атрибут на клас, равен на animate1, при задържане върху тях с курсора на мишката се прилагат посочените стилове. И стиловете са посочени между фигурни скоби( и ). Ако всичко е направено правилно, трябва да изглежда така:
Можете да направите снимка в първоначално състояниеполупрозрачен, а когато задържите над него, го направете непрозрачен. След това трябва да добавите следните редове към CSS файла:
img.animate1(
филтър: алфа (Непрозрачност=25);
непрозрачност: 0,25
}
img.animate1:hover (
непрозрачност: 1
}
Резултатът ще бъде така:
За по-голям ефект можете да забавите промените в прозрачността на картината. За да направите това, можете да използвате CSS свойството за преход, което задава ефекта на преход между две състояния на елемент. Например, нека добавим една секунда забавяне. Тогава нашият CSS код ще изглежда така:
img.animate1(
филтър: алфа (Непрозрачност=25);
непрозрачност: 0,25
-moz-преход: всички 1s лесно влизане-навън; /* ефект на преход за Firefox преди версия 16.0 */
-webkit-transition: всички 1s ease-in-out; /* ефект на преход за Chrome до версия 26.0, Safari, Android и iOS */
-o-преход: всички 1s лесно влизане-навън; /* ефект на преход за Opera преди версия 12.10 */
преход: всички 1s леко влизане и излизане; /* ефект на преход за други браузъри */
}
img.animate1:hover (
филтър: алфа (Непрозрачност=100);
непрозрачност: 1
}
Резултат:
Използвайки свойството transform, изображението може да бъде мащабирано, завъртяно, изместено, наклонено. Нека се опитаме да увеличим снимката. Тогава css кодът ще бъде така:
img.animate1(
- o-преход: всички 1s лекота;
преход: всички 1s лекота;
}
img.animate1:hover(
- moz-трансформация: мащаб (1.5); /* трансформиращ ефект за Firefox преди версия 16.0 */
- webkit-transform: мащаб (1.5); /* трансформиращ ефект за Chrome до версия 26.0, Safari, Android и iOS */
- o-трансформация: мащаб (1.5); /* трансформиращ ефект за Opera преди версия 12.10 */
- ms-трансформация: мащаб (1.5); /* трансформиращ ефект за IE 9.0 */
трансформация: мащаб (1.5); /* трансформиращ ефект за други браузъри */
}
И резултатът ще бъде така:
Може да се добави завъртане, за да се увеличи изображението. Тогава css стиловете се променят малко:
img.animate1(
moz-преход: всички 1s лекота;
webkit-transition: всички 1s лекота;
- o-преход: всички 1s лекота;
преход: всички 1s лекота;
}
img.animate1:hover(
- moz-трансформация: завъртане (360 градуса) мащаб (1.5);
- webkit-transform: завъртане (360 градуса) мащаб (1.5);
- o-трансформация: завъртане (360 градуса) скала (1,5);
- ms-трансформация: завъртане (360 градуса) мащаб (1.5);
трансформация: завъртане (360 градуса) мащаб (1.5);
}
Резултат:
По-горе разгледахме случаите, когато една снимка е включена в анимацията. След това помислете как да замените едно изображение с друго. В този случай обикновено се подготвят две изображения с еднакъв размер: едното за оригиналния изглед, другото за неговата замяна.
Да кажем, че имаме две снимки, едната черно-бяла, а другата цветна:
Нека направим така, че когато задържите курсора на мишката върху черно-бяло изображение, да се показва цветно изображение. За да направим това, ще направим оригиналното изображение фон на елемента div, като използваме свойството background. И когато задържите курсора върху изображението на курсора, ние ще се променим фонова картинаизползвайки същия псевдоклас и свойство на фона. За да приложите този ефект върху html страницадобавете div елемент с класа rotate1:
И добавете следните описания на стила:
div.rotate1(
фон: url (img/2.jpg); /* Път до файла с оригиналното изображение */
ширина: 480px /* Ширина на картината */
височина: 360px; /* Височина на изображението */
}
div.rotate1:hover (
фон: url (img/1.jpg); /* Път до файла със смененото изображение */
}
И резултата:
Този метод има един съществен недостатък. Тъй като втората картина се зарежда само при задържане на курсора, ако потребителят има бавна интернет връзка и размерът на файла с картината е голям, картината ще се покаже с пауза. Ето защо по-долу ще разгледаме още няколко начина за замяна на изображения при задържане на курсора на мишката.
Следващият метод ще се основава на комбиниране на две снимки в един файл. Да кажем, че трябва да поставим бутон на страницата, който при задържане на курсора на мишката върху него ще промени външния си вид. За целта комбинираме две изображения в един файл и полученото изображение ще изглежда така:
В този случай промяната от един модел в друг ще се извърши чрез преместване фоново изображениевертикално, използвайки свойството background-position. Тъй като когато щракнете върху бутона, обикновено отивате на друга страница, ние ще вмъкнем изображението в елемента< a>. След това поставете следния код в html страницата:
И в css файл като този:
a.rotate2(
фон: url (img/button.png); /* Път до файла с оригиналното изображение */
дисплей:блок; /* Връзка като блоков елемент */
ширина: 50px /* Ширина на изображението в пиксели */
височина: 30px; /* Височина на изображението */
}
a.rotate2:hover(
позиция на фона: 0-30px; /* Изместване на фона */
}
Резултат:
И последният начин за днес е, когато едно изображение се постави под друго с cssпозиция: абсолютни правила. В този случай поставяме две изображения вътре в контейнера div:
И добавете css стилове:
Animate2(
позиция: роднина;
margin:0 auto;/* настройте div блока в центъра на страницата*/
ширина:480px; /* Ширина */
височина: 360px; /* Височина */
}
.animate2 img(
позиция: абсолютна; /* абсолютно позициониране*/
ляво: 0; /* подравнете изображенията вляво горен ъгъл div-a*/
отгоре: 0; /* подравнете изображенията в горния ляв ъгъл на div */
}
След добавяне на css правилата, изображенията ще бъдат поставени едно под друго. Вече контролира прозрачността на изображенията с свойства на непрозрачноств нормално състояние ще покажем втората снимка, а когато задържите курсора на мишката върху първата. За да направите това, в нормално състояние правим картината с първия клас напълно прозрачна, а когато задържите курсора, е вярно обратното: картината с втория клас ще бъде напълно прозрачна, а с първия клас ще не е прозрачен:
Animate2 img.first ( /* първото изображение е напълно прозрачно */
непрозрачност:0;
филтър:алфа (непрозрачност=0);
}
.animate2:hover img.first ( /* първото изображение става непрозрачно при задържане */
непрозрачност:1;
филтър:алфа (непрозрачност=100);
}
/* и вторият става прозрачен при задържане */
непрозрачност:0;
филтър:алфа (непрозрачност=0);
}
Резултат:
Можете да постигнете плавен преход, като добавите свойството CSS преход към последното правило:
Animate2:hover img.second, .animate2 img.second:hover (
непрозрачност:0;
филтър:алфа (непрозрачност=0);
-moz-преход: всички 2s лекота;
-webkit-transition: всички 2s лекота;
-o-преход: всички 2s лекота;
преход: всички 2s лекота;
}
И резултата:
И ако добавим свойството transform:
Animate2:hover img.second, .animate2 img.second:hover (
непрозрачност:0;
филтър:алфа (непрозрачност=0);
-moz-трансформация: мащаб (0, 1);
-webkit-transform:scale(0, 1);
-o-трансформиране: мащаб (0, 1);
-ms-трансформация: мащаб (0, 1);
трансформиране: мащаб (0, 1); /* намали ширината на изображението до 0 */
}
Ще се получи така:
Чрез комбиниране на различни CSS свойства можете да постигнете различни ефекти при задържанепри смяна на изображения при задържане на мишката. Публикувах тези и други примери на тази страница, където можете също да изтеглите изходния код. Това е всичко, докато не се срещнем отново.
| 18.02.2016
CSS3 отваря неограничени възможности за UI дизайнерите, а основното предимство е, че почти всяка идея може лесно да бъде реализирана и оживена, без да се прибягва до използването на JavaScript.
Удивително е колко прости неща могат да подправят една обикновена уеб страница, правейки я по-достъпна за потребителите. Говорим за CSS3 преходи, с които можете да позволите на елемента да се трансформира и да промени стила, например при задържане. Деветте примера за CSS3 анимация по-долу ще ви помогнат да създадете отзивчив опит на вашия сайт, както и да подобрят цялостния външен вид на страницата с красиви плавни преходи.
За по-подробна информация можете да изтеглите архива с файловете.
Всички ефекти работят със свойството преход. преход- "преход", "трансформация") и псевдо-клас: hover , който определя стила на елемента, когато курсорът на мишката е поставен върху него (в нашия урок). За нашите примери използвахме div 500x309 пиксела, първоначален цвят на фона #6d6d6d и продължителност на прехода от 0,3 секунди.
Тяло > div (ширина: 500px; височина: 309px; фон: #6d6d6d; -webkit-transition: всички 0.3s лекота; -moz-transition: всички 0.3s лекота;; -o-transition: всички 0.3s лекота;; преход: всички 0,3 секунди лекота; )
1. Променете цвета при задържане
Преди време прилагането на такъв ефект беше доста усърдна работа, с математически изчисления на определени RGB стойности. Сега е достатъчно да запишете css стил, в който трябва да добавите псевдокласа: задръжте върху селектора и задайте цвета на фона, който плавно (за 0,3 секунди) ще замени оригиналния цвят на фона, когато задържите курсора на мишката над блока:
Цвят: задържане на курсора (фон:#53ea93; )
2. Външният вид на рамката
Интересна и ярка трансформация е вътрешната рамка, която плавно се появява, когато задържите курсора на мишката. Добър за декориране на различни копчета. За да постигнем този ефект, използваме псевдокласа :hover и свойството box-shadow с вмъкнатия параметър (задава сянката вътре в елемента). Освен това ще трябва да зададете разтягането на сянката (в нашия случай е 23px) и нейния цвят:
Border:hover (кутия-сянка: вмъкване 0 0 0 23px #53ea93; )
3. Люлка
Тази CSS анимация е изключение, тъй като свойството за преход не се използва тук. Вместо това използвахме:
- @keyframes е основна директива за създаване на CSS анимация кадър по кадър, която ви позволява да правите т.нар. сценарий и опишете анимацията като списък с ключови точки;
- animation и animation-iteration-count - свойства за задаване на параметри на анимация (продължителност и скорост) и брой цикли (повторения). В нашия случай повторете 1.
4. Разпад
Ефектът на избледняване е просто промяна на прозрачността на елемент. Анимацията се създава на два етапа: първо трябва да зададете първоначалното състояние на прозрачност на 1 - тоест пълна непрозрачност, и след това да посочите стойността му, когато задържите курсора на мишката - 0,6:
Избледняване (непрозрачност: 1;) .fade:hover (непрозрачност: 0,6;)
За обратен резултат разменете стойностите:
5. Увеличаване
За да увеличим квадратчето при задържане, ще използваме свойството transform и ще зададем стойността му на scale(1.2). В този случай блокът ще се увеличи с 20 процента, като същевременно запази пропорциите си:
Grow:hover (-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Намаляване
Намаляването на елемент е също толкова лесно, колкото и увеличаването му. Ако в петия параграф, за да увеличим мащаба, трябваше да посочим стойност, по-голяма от 1, тогава, за да намалим блока, ние просто посочим стойност, която ще бъде по-малка от единица, например scale(0.7) . Сега, когато задържите курсора на мишката, блокът ще намалее пропорционално с 30 процента от първоначалния си размер:
Shrink:hover (-webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Трансформация в кръг
Една често използвана анимация е правоъгълен елемент, който се трансформира в кръг, когато се задържи върху него. Ползване на имота css border-radius, използвано във връзка с :hover и conversion , това може да се приложи без проблеми:
Circle:hover ( border-radius: 70%; )
8. Въртене
Забавна опция за анимация е да завъртите елемент с определен брой градуси. За целта отново се нуждаем от свойството transform, но с различна стойност - rotateZ(20deg) . С тези параметри блокът ще се завърти на 20 градуса по посока на часовниковата стрелка спрямо оста Z:
Завъртане: курсор (-webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D сянка
Дизайнерите не са съгласни дали този ефект е подходящ в плоския дизайн. Въпреки това, тази CSS3 анимация е доста оригинална и се използва и в уеб страници. Ще постигнем триизмерен ефект, използвайки вече познатите ни свойства на box-shadow (ще създаде многослойна сянка) и ще трансформираме с параметъра translateX (-7px) (ще гарантира, че блокът е изместен хоризонтално наляво със 7 пиксела ):
threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); трансформиране: translateX(-7px); )
Поддръжка на браузър
Свойството за преход в момента се поддържа от следните браузъри:
| Десктоп браузъри | |
|---|---|
| Internet Explorer | Поддържа се от IE 10 и по-нова версия |
| Chrome | Поддържа се от версия 26 (преди версия 25 да работи с префикс -webkit-) |
| Firefox | Поддържа се от версия 16 (във версии 4-15 работи с -moz- префикс) |
| Опера | Поддържа се от версия 12.1 |
| сафари | Поддържа се от версия 6.1 (във версии 3.1-6 работи с префикс -webkit-) |
Останалите свойства, използвани в тези примери, като transform, box-shadow и т.н., също се поддържат от почти всички модерни браузъри. Въпреки това, ако възнамерявате да използвате тези идеи за вашите проекти, ние силно препоръчваме да проверите отново съвместимостта на различни браузъри.
Надяваме се, че тези примери за CSS3 анимация са ви били полезни. Желаем ви творчески успех!
Преди да се занимаваме с бутоните, нека да разгледаме настройките, които са общи за всички тях.
HTML
За копчета ще се използва много прост htmlкодът:
Абонирай се
css
Също така всички бутони ще имат Основни настройкиза текста на надписа и демаркиране на връзки:
ButtonText ( шрифт: 18px/1.5 Helvetica, Arial, sans-serif; цвят: #fff; ) a (цвят: #fff; текстова декорация: няма; )
Обикновено потребителят очаква сравнително лек ефект при задържане на мишката върху връзка или бутон. И в нашия случай бутонът променя размера си - увеличава се, показвайки допълнително съобщение.
Основен CSS код
За да започнем, трябва само да дадем на бутона форма и цвят. Определете височина от 28px и ширина от 115px, добавете полета и подложка и дайте на бутона светла рамка.
#button1 (фон: #6292c2; граница: 2px плътен #eee; височина: 28px; ширина: 115px; поле: 50px 0 0 50px; подложка: 0 0 0 7px; преливане: скрито; дисплей: блокиране; )
CSS3 ефекти
Някои хора харесват, когато един прост бутон е придружен от доста много CSS код. AT този разделпредоставя допълнителни CSS3 стилове за нашия бутон. Може и без тях, но те придават на бутона по-модерен вид.
Заоблете ъглите на рамката и добавете градиент. Ето един малък трик с тъмен градиент, който работи с всеки цвят на фона.
/*Заоблени ъгли*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; радиус на границата: 15px; /*Градиент*/ фоново изображение: -webkit-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: -moz-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -o-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -ms-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
CSS анимация
Сега да инсталираме CSS преход. Анимацията ще се използва за всякакви промени в свойствата и ще продължи половин секунда.
Задържане на мишката
Остава само да добавите стил за разширяване на бутона, когато задържите курсора на мишката върху него. Бутонът трябва да е широк 230px, за да се покаже цялата публикация.
#button1:hover (ширина: 230px;)
Лесна промяна на цветовия тон
Много прост и популярен CSS ефект за бутон. Когато преместите курсора на мишката, плавно променя тона на цвета на фона.
Основен CSS код
CSS кодът е много подобен на предишния пример. Използва се различен цвят на фона и формата е леко модифицирана. Текстът също е центриран и височината на реда за бутона е зададена така, че да е вертикално центриран.
#button2 (фон: #d11717; граница: 2px плътен #eee; височина: 38px; ширина: 125px; поле: 50px 0 0 50px; преливане: скрито; дисплей: блокиране; подравняване на текст: център; височина на линия: 38px; )
CSS3 ефекти
Задайте заоблянето на ъглите, градиента за фона и допълнителната сянка. С помощта на rgba правим сянката черна и прозрачна.
/*Заоблени ъгли*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; радиус на границата: 10px /*Градиент*/ фоново изображение: -webkit-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: -moz-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -o-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -ms-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); /*Сянка*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); кутия-сянка: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS анимация
Анимацията е практически същата като в предишния пример.
/*Преход*/ -webkit-transition: Всички 0.5s лекота; -moz-преход: Всички 0,5s лекота; -o-преход: Всички 0,5s лекота; -ms-преход: Всички 0,5s лекота; преход: Всички 0,5 s лекота;
Задържане на мишката
При задържане на курсора на мишката ще бъде зададен различен цвят на фона. Опитайте да изберете опция за по-светъл цвят във Photoshop за страхотен ефект.
#button2:hover (цвят на фона: #ff3434; )
Този ефект може да бъде доста впечатляващ в зависимост от избора на фоново изображение. Демото използва невзрачен фон и ефектът изглежда невзрачен. Опитайте да използвате различна картина и може да постигнете зашеметяващ ефект.
Основен CSS код
Основната част от кода е същата като в предишните примери. Обърнете внимание, че използваме фоново изображение. Първоначалната позиция на фона е зададена на "0 0". Когато задържите курсора, позицията се измества вертикално.
#button3 (фон: #d11717 url("bkg-1.jpg"); фонова позиция: 0 0; текстова сянка: 0px 2px 0px rgba(0, 0, 0, 0.3); размер на шрифта: 22px; височина : 58px; ширина: 155px; margin: 50px 0 0 50px; overflow: скрит; display: block; text-align: center; line-height: 58px; )
CSS3 ефекти
В този пример няма нищо особено - заоблени ъгли и сенки.
/*Заоблени ъгли*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; радиус на границата: 5px /*Сянка*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); кутия-сянка: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS анимация
Анимацията за този случай е по-дълга, за да създаде плавен и интересен ефект.
/*Преход*/ -webkit-transition: Всички 0.8s лекота; -moz-преход: Всички 0.8s лекота; -o-преход: Всички 0,8s лекота; -ms-преход: Всички 0,8s лекота; преход: Всички 0,8 s лекота;
Задържане на мишката
Сега е време да преместите фоновото изображение. Първоначалната позиция беше "0 0". Задайте втория параметър на 150px. За да се преместите хоризонтално, трябва да промените първия параметър.
#button3:hover (background-position: 0px 150px;)
3D симулирано натискане на бутон
Последният пример в нашия урок се фокусира върху популярния 3D метод за симулиране на щракване на бутон, когато задържите курсора на мишката върху него. Анимацията за този случай е толкова проста, че дори не изисква CSS преход. Но крайният резултат е доста впечатляващ.
Основен CSS код
CSS код за нашия бутон.
#button4 (фон: #5c5c5c; текстова сянка: 0px 2px 0px rgba(0, 0, 0, 0.3); размер на шрифта: 22px; височина: 58px; ширина: 155px; поле: 50px 0 0 50px; преливане: скрито ; дисплей: блок; подравняване на текст: център; височина на линия: 58px; )
CSS3 ефекти
В този случай CSS3 вече не е добра опция. За да получите ефекта, са необходими сенки и градиент. Твърдата сянка създава вид на 3D бутон.
/*Заоблени ъгли*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; радиус на границата: 5px /*Сянка*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); кутия-сянка: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ фоново изображение: -webkit-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: -moz-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -o-линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2)); фоново изображение: -ms-линеен градиент(отгоре, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); фоново изображение: линеен градиент (отгоре, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.2));
Задържане на мишката
В този случай имаме най-големия hover раздел. Дължината на сянката е намалена и полетата създават преливане на тъмната зона. Всичко заедно създава илюзията за натискане на бутон. Обръщането на градиента засилва ефекта.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0) , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ фоново изображение: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); фоново изображение: -moz-линеен градиент (отдолу, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0.4) )); фоново изображение: -o-линеен градиент(отдолу, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); фоново изображение: -ms-линеен градиент( отдолу, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); фоново изображение: линеен градиент(отдолу, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )