сейчас на сайте:
Лучшие сказки мира 03skazki.ru
Детектив и фантастика 03pressa.ru
Песни прошлых лет 03pesni.ru
Для досуга
Пример псевдо-3D блока на чистом html+CSS body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } html { height: 100% } body { font: 12px/18px Tahoma, Verdana, sans-serif; width: 100%; background-color:#efefef; color:#999; } a { color: #c33; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p { padding-top: 10px; font-size: 14px; line-height: 22px; } img { border: none; } input { vertical-align: middle } h2 { font:italic 1em/1.2em Georgia; } #container { margin: 50px auto 0px auto; width: 800px; } .bubble { clear: both; margin: 0px auto; width: 750px; background: #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); position: relative; z-index: 90; behavior: url(ie-css3.htc); } .rectangle { background: #7f9db9; height: 50px; width: 780px; position: relative; left:-15px; top: 30px; float: left; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); z-index: 100; } .rectangle h2 { font-size: 30px; color: #fff; padding-top: 6px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-align: center; } .triangle-l { border-color: transparent #7d90a3 transparent transparent; border-style:solid; border-width:15px; height:0px; width:0px; position: relative; left: -30px; top: 65px; z-index: -1; } .triangle-r { border-color: transparent transparent transparent #7d90a3; border-style:solid; border-width:15px; height:0px; width:0px; position: relative; left: 750px; top: 35px; z-index: -1; } .info { padding: 50px 25px 15px 25px; } .info h2 { font-size: 20px; } .menu { position: relative; top:7px; left: 50px; z-index: 80; } .menu li { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); width: 50px; overflow: hidden; margin: 10px 0px; padding: 5px 5px 5px 18px; float: left; background: #7f9db9; text-align: right; } .menu li a { color: #fff; text-decoration: none; display:block; } .menu li.l1 { background: rgba(131, 178, 51, 0.65); } .menu li.l1:hover { background: rgb(131,178,51); } .menu li.l2 { background: rgba(196, 89, 30, 0.65); } .menu li.l2:hover { background: rgb(196,89,30); } .menu li.l3 { background: rgba(65, 117, 160, 0.65); } .menu li.l3:hover { background: rgb(65,117,160); } .copy { text-align:center; margin-top:30px } CSS3 реально круто 3D CSS блок Хе-хей, А ведь здесь чистый CSS, без картинок! Для этого примера изпользуются несколько новый свойств в CSS3. 3D эффекты, закругленные уголочки, тени, повороты элементов... Правда круто? Обратно на описание примера
Для этого примера изпользуются несколько новый свойств в CSS3. 3D эффекты, закругленные уголочки, тени, повороты элементов... Правда круто?
Обратно на описание примера