577 Давайте предположим, что вы учитель химии, и, кроме всего прочего, дизайнер.
Единственное, что вам захотелось бы сделать, так это периодическую таблицу химических элементов Менделеева на HTML и CSS!
Пример
HTML
Мы сделали нашу сетку элементов, используя целую кучу ul элементов, но вы можете применить стилевые правила не только на них. Можно использовать абсолютно любые HTML элементы, не забудьте только CSS правила поправить.
|
1 2 3 4 5 |
<ul id="alkali-metals"> <li><a href="#"> H </a></li> <li><a href="#"> Li </a></li> <li><a href="#"> Fr </a></li> </ul> |
Веселье с CSS начинается так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
ul.peri-boxes li { float: left; width: 52px height: 52px margin: 0px } ul.peri-boxes li a{ float: left; width: 52px height: 37px font-size: 16px } ul.peri-boxes li a.box{ background-color: #1b2a34; color: #fff border: 1px solid #000 -webkit-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000; -moz-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000; -webkit-transition: ll 0.12s ease-out -moz-transition: ll 0.12s ease-out } ul.peri-boxes li a.box:hover{ background-color: #2daebf; left: -23px; top: -23px; width: 62px; height: 47px; z-index: 1; font-size: 1.5em; border: 1px solid #2daebf -moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a; -webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a; -webkit-animation-name: boxPulse; -webkit-animation-duration: .7s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .12s; } |
Чтобы оживить нашу периодическую таблицу химических элементов, нужно сделать кое-что еще, а именно, парение элемента в воздухе, при наведении на элемент указателем мыши. Само парение элементов будет работать через -webkit анимацию.
Анимация на CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@-webkit-keyframes boxPulse { from { width: 62px; height: 47px; left: -23px; top: -23px; -webkit-animation-timing-function: ease-out; } 50% { width: 58px; height: 45px; top: -19px; } to { width: 62px; height: 47px; left: -23px; top: -23px; -webkit-animation-timing-function: ease-out; } } |
